aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--panel/src/pages/Dashboard.css63
-rw-r--r--panel/src/pages/Dashboard.jsx61
-rw-r--r--panel/src/pages/ManageAds.css84
-rw-r--r--panel/src/pages/ManageAds.jsx1
-rw-r--r--panel/src/pages/Roles.css64
5 files changed, 256 insertions, 17 deletions
diff --git a/panel/src/pages/Dashboard.css b/panel/src/pages/Dashboard.css
new file mode 100644
index 0000000..08a15eb
--- /dev/null
+++ b/panel/src/pages/Dashboard.css
@@ -0,0 +1,63 @@
+.dashboard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f4f7fc;
+ min-height: 100vh;
+}
+
+.dashboard-container {
+ width: 90%;
+ max-width: 1200px;
+ margin-top: 20px;
+ padding: 20px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.dashboard-header h4 {
+ font-size: 28px;
+ color: #333;
+}
+
+.dashboard-stats {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+
+.stat-card {
+ flex: 1;
+ padding: 20px;
+ margin: 0 10px;
+ background-color: #f9fafc;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card h6 {
+ font-size: 16px;
+ color: #666;
+ margin-bottom: 10px;
+}
+
+.stat-card p {
+ font-size: 24px;
+ color: #333;
+}
+
+.chart-container {
+ margin-top: 30px;
+}
+
+.chart-container canvas {
+ width: 100% !important;
+ height: 400px !important;
+}
diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx
index d16204d..344371d 100644
--- a/panel/src/pages/Dashboard.jsx
+++ b/panel/src/pages/Dashboard.jsx
@@ -1,21 +1,37 @@
import React, { useEffect, useRef } from 'react';
-import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
-import { Bar } from 'react-chartjs-2';
+import { Chart, CategoryScale, LinearScale, LineElement, PointElement, LineController, Title, Tooltip, Legend } from 'chart.js';
+import { Line } from 'react-chartjs-2';
import Navbar from '../components/Navbar';
+import './Dashboard.css';
-Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+Chart.register(CategoryScale, LinearScale, LineElement, PointElement, LineController, Title, Tooltip, Legend);
const Dashboard = () => {
- const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };
+ const userStats = {
+ totalUsers: [50, 70, 60, 80, 100, 90, 110],
+ totalAds: 50,
+ totalRevenue: [40, 50, 30, 70, 60, 80, 75]
+ };
const chartData = {
- labels: ['Users', 'Revenue'],
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [
{
- label: 'Statistics',
- data: [userStats.totalUsers, userStats.totalRevenue],
- backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'],
+ label: 'Total Users',
+ data: userStats.totalUsers,
+ borderColor: 'rgba(75,192,192,1)',
+ backgroundColor: 'rgba(75,192,192,0.2)',
+ fill: true,
+ tension: 0.4,
},
+ {
+ label: 'Total Revenue',
+ data: userStats.totalRevenue,
+ borderColor: 'rgba(153,102,255,1)',
+ backgroundColor: 'rgba(153,102,255,0.2)',
+ fill: true,
+ tension: 0.4,
+ }
],
};
@@ -32,17 +48,28 @@ const Dashboard = () => {
}, []);
return (
- <div>
+ <div className="dashboard">
<Navbar />
- <div className="container mt-5">
- <h4 className="mb-4">Dashboard</h4>
- <div className="mb-4">
- <h6>Total Users: {userStats.totalUsers}</h6>
- <h6>Total Ads: {userStats.totalAds}</h6>
- <h6>Total Revenue: {userStats.totalRevenue}</h6>
+ <div className="dashboard-container">
+ <div className="dashboard-header">
+ <h4>Dashboard</h4>
+ </div>
+ <div className="dashboard-stats">
+ <div className="stat-card">
+ <h6>Total Users</h6>
+ <p>{userStats.totalUsers[userStats.totalUsers.length - 1]}</p>
+ </div>
+ <div className="stat-card">
+ <h6>Total Ads</h6>
+ <p>{userStats.totalAds}</p>
+ </div>
+ <div className="stat-card">
+ <h6>Total Revenue</h6>
+ <p>${userStats.totalRevenue[userStats.totalRevenue.length - 1]}</p>
+ </div>
</div>
- <div>
- <Bar ref={chartRef} data={chartData} />
+ <div className="chart-container">
+ <Line ref={chartRef} data={chartData} />
</div>
</div>
</div>
diff --git a/panel/src/pages/ManageAds.css b/panel/src/pages/ManageAds.css
new file mode 100644
index 0000000..c9f154e
--- /dev/null
+++ b/panel/src/pages/ManageAds.css
@@ -0,0 +1,84 @@
+.manage-ads {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f4f7fc;
+ min-height: 100vh;
+}
+
+.manage-ads-container {
+ width: 90%;
+ max-width: 1200px;
+ margin-top: 20px;
+ padding: 20px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.manage-ads-header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.manage-ads-header h4 {
+ font-size: 28px;
+ color: #333;
+}
+
+.ad-form {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 30px;
+}
+
+.ad-form .form-control {
+ margin-bottom: 15px;
+ padding: 10px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.ad-form button {
+ align-self: flex-start;
+ padding: 10px 20px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.ad-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.ad-card {
+ flex: 1;
+ padding: 20px;
+ margin: 10px;
+ background-color: #f9fafc;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.ad-card img {
+ max-width: 100%;
+ border-radius: 5px;
+ margin-bottom: 15px;
+}
+
+.ad-card h5 {
+ font-size: 20px;
+ color: #333;
+ margin-bottom: 10px;
+}
+
+.ad-card p {
+ font-size: 16px;
+ color: #666;
+}
diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
index 70142d2..8999db3 100644
--- a/panel/src/pages/ManageAds.jsx
+++ b/panel/src/pages/ManageAds.jsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
import { collection, addDoc, getDocs } from 'firebase/firestore';
+import './ManageAds.css';
import Navbar from '../components/Navbar';
const ManageAds = () => {
diff --git a/panel/src/pages/Roles.css b/panel/src/pages/Roles.css
new file mode 100644
index 0000000..5304391
--- /dev/null
+++ b/panel/src/pages/Roles.css
@@ -0,0 +1,64 @@
+.manage-roles {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f4f7fc;
+ min-height: 100vh;
+}
+
+.manage-roles-container {
+ width: 90%;
+ max-width: 1200px;
+ margin-top: 20px;
+ padding: 20px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.manage-roles-header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.manage-roles-header h4 {
+ font-size: 28px;
+ color: #333;
+}
+
+.user-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.user-card {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+ margin-bottom: 10px;
+ background-color: #f9fafc;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.user-card p {
+ font-size: 16px;
+ color: #666;
+ margin: 0;
+}
+
+.user-card button {
+ padding: 5px 10px;
+ margin-left: 10px;
+ font-size: 14px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.user-card button.btn-secondary {
+ background-color: #6c757d;
+}
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2024-12-25 17:34:04 +0000