3 files changed, 87 insertions, 58 deletions
diff --git a/panel/src/pages/Dashboard.jsx b/panel/src/pages/Dashboard.jsx
index 5aa2b0c..d16204d 100644
--- a/panel/src/pages/Dashboard.jsx
+++ b/panel/src/pages/Dashboard.jsx
@@ -1,5 +1,9 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
+import Navbar from '../components/Navbar';
+
+Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const Dashboard = () => {
   const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };
@@ -15,16 +19,31 @@ const Dashboard = () => {
     ],
   };
 
+  const chartRef = useRef(null);
+
+  useEffect(() => {
+    const chartInstance = chartRef.current.chartInstance;
+
+    return () => {
+      if (chartInstance) {
+        chartInstance.destroy();
+      }
+    };
+  }, []);
+
   return (
-    <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>
-      <div>
-        <Bar data={chartData} />
+    <div>
+      <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>
+        <div>
+          <Bar ref={chartRef} data={chartData} />
+        </div>
       </div>
     </div>
   );
diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
index 4ec0b36..70142d2 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 Navbar from '../components/Navbar';
 
 const ManageAds = () => {
   const [ads, setAds] = useState([]);
@@ -22,46 +23,49 @@ const ManageAds = () => {
   };
 
   return (
-    <div className="container">
-      <h4>Manage Ads</h4>
-      <div className="mb-4">
-        <div className="mb-3">
-          <label>Title</label>
-          <input
-            type="text"
-            value={newAd.title}
-            onChange={(e) => setNewAd({ ...newAd, title: e.target.value })}
-            className="form-control"
-          />
-        </div>
-        <div className="mb-3">
-          <label>Description</label>
-          <input
-            type="text"
-            value={newAd.description}
-            onChange={(e) => setNewAd({ ...newAd, description: e.target.value })}
-            className="form-control"
-          />
+    <div>
+      <Navbar />
+      <div className="container mt-5">
+        <h4>Manage Ads</h4>
+        <div className="mb-4">
+          <div className="mb-3">
+            <label>Title</label>
+            <input
+              type="text"
+              value={newAd.title}
+              onChange={(e) => setNewAd({ ...newAd, title: e.target.value })}
+              className="form-control"
+            />
+          </div>
+          <div className="mb-3">
+            <label>Description</label>
+            <input
+              type="text"
+              value={newAd.description}
+              onChange={(e) => setNewAd({ ...newAd, description: e.target.value })}
+              className="form-control"
+            />
+          </div>
+          <div className="mb-3">
+            <label>Image URL</label>
+            <input
+              type="text"
+              value={newAd.imageUrl}
+              onChange={(e) => setNewAd({ ...newAd, imageUrl: e.target.value })}
+              className="form-control"
+            />
+          </div>
+          <button onClick={handleAddAd} className="btn btn-primary">Add Ad</button>
         </div>
-        <div className="mb-3">
-          <label>Image URL</label>
-          <input
-            type="text"
-            value={newAd.imageUrl}
-            onChange={(e) => setNewAd({ ...newAd, imageUrl: e.target.value })}
-            className="form-control"
-          />
+        <div>
+          {ads.map((ad, index) => (
+            <div key={index} className="mb-3">
+              <h5>{ad.title}</h5>
+              <p>{ad.description}</p>
+              <img src={ad.imageUrl} alt={ad.title} className="img-fluid" />
+            </div>
+          ))}
         </div>
-        <button onClick={handleAddAd} className="btn btn-primary">Add Ad</button>
-      </div>
-      <div>
-        {ads.map((ad, index) => (
-          <div key={index} className="mb-3">
-            <h5>{ad.title}</h5>
-            <p>{ad.description}</p>
-            <img src={ad.imageUrl} alt={ad.title} className="img-fluid" />
-          </div>
-        ))}
       </div>
     </div>
   );
diff --git a/panel/src/pages/Roles.jsx b/panel/src/pages/Roles.jsx
index 05f73b6..5b18ace 100644
--- a/panel/src/pages/Roles.jsx
+++ b/panel/src/pages/Roles.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { db, auth } from '../firebase';
 import { collection, getDocs } from 'firebase/firestore';
 import { httpsCallable } from 'firebase/functions';
+import Navbar from '../components/Navbar';
 
 const Roles = () => {
   const [users, setUsers] = useState([]);
@@ -33,16 +34,21 @@ const Roles = () => {
   }
 
   return (
-    <div className="container">
-      <h4>Manage Roles</h4>
-      <div>
-        {users.map((user, index) => (
-          <div key={index} className="mb-3">
-            <p>{user.email}</p>
-            <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary mr-2">Make Admin</button>
-            <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary">Make User</button>
-          </div>
-        ))}
+    <div>
+      <Navbar />
+      <div className="container mt-5">
+        <h4>Manage Roles</h4>
+        <div className="list-group">
+          {users.map((user, index) => (
+            <div key={index} className="list-group-item d-flex justify-content-between align-items-center">
+              <p className="mb-0">{user.email}</p>
+              <div>
+                <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button>
+                <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );