updated project

8 files changed, 157 insertions, 87 deletions

diff --git a/panel/src/App.jsx b/panel/src/App.jsx
index 906f859..6d88aaf 100644
--- a/panel/src/App.jsx
+++ b/panel/src/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import ResetPage from './pages/ResetPage';
@@ -14,18 +14,17 @@ import './tailwind.css';
 function App() {
   return (
     <AuthProvider>
-      <Router>
-        <Routes>
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
-          <Route path="/reset" element={<ResetPage />} />
-          <Route path="/" element={<PrivateRoute />}>
-            <Route path="dashboard" element={<Dashboard />} />
-            <Route path="manage-ads" element={<ManageAds />} />
-            <Route path="roles" element={<Roles />} />
-          </Route>
-        </Routes>
-      </Router>
+      <Routes>
+        <Route path="/" element={<Navigate to="/login" />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="/reset" element={<ResetPage />} />
+        <Route path="/" element={<PrivateRoute />}>
+          <Route path="dashboard" element={<Dashboard />} />
+          <Route path="manage-ads" element={<ManageAds />} />
+          <Route path="roles" element={<Roles />} />
+        </Route>
+      </Routes>
     </AuthProvider>
   );
 }
diff --git a/panel/src/components/Navbar.css b/panel/src/components/Navbar.css
new file mode 100644
index 0000000..ee38707
--- /dev/null
+++ b/panel/src/components/Navbar.css
@@ -0,0 +1,27 @@
+.navbar {
+  background-color: #343a40;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+}
+
+.navbar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+.navbar-item {
+  margin: 0 1rem;
+}
+
+.navbar-item a {
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.navbar-item a:hover {
+  text-decoration: underline;
+}
diff --git a/panel/src/components/Navbar.jsx b/panel/src/components/Navbar.jsx
new file mode 100644
index 0000000..b287e97
--- /dev/null
+++ b/panel/src/components/Navbar.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Navbar.css';
+
+const Navbar = () => {
+  return (
+    <nav className="navbar">
+      <ul className="navbar-list">
+        <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li>
+        <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li>
+        <li className="navbar-item"><Link to="/roles">Roles</Link></li>
+        <li className="navbar-item"><Link to="/logout">Logout</Link></li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/panel/src/components/PrivateRoute.jsx b/panel/src/components/PrivateRoute.jsx
index 2160f74..e2c502d 100644
--- a/panel/src/components/PrivateRoute.jsx
+++ b/panel/src/components/PrivateRoute.jsx
@@ -1,17 +1,11 @@
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import LoginPage from '../pages/LoginPage';
-import Dashboard from '../pages/Dashboard'; // Assuming you have a Dashboard component
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
 
-function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        {/* Other routes */}
-      </Routes>
-    </Router>
-  );
-}
+const PrivateRoute = () => {
+  const { currentUser } = useAuth();
 
-export default App;
+  return currentUser ? <Outlet /> : <Navigate to="/login" />;
+};
+
+export default PrivateRoute;
diff --git a/panel/src/main.jsx b/panel/src/main.jsx
index 881e61b..f8085d8 100644
--- a/panel/src/main.jsx
+++ b/panel/src/main.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
 import './index.css';
 import './tailwind.css';
@@ -7,6 +8,8 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>
 );
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>
   );