css added

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;
+}