aboutsummaryrefslogtreecommitdiffstats
path: root/panel
diff options
context:
space:
mode:
Diffstat (limited to 'panel')
-rw-r--r--panel/src/App.jsx25
-rw-r--r--panel/src/components/Navbar.css27
-rw-r--r--panel/src/components/Navbar.jsx18
-rw-r--r--panel/src/components/PrivateRoute.jsx24
-rw-r--r--panel/src/main.jsx5
-rw-r--r--panel/src/pages/Dashboard.jsx39
-rw-r--r--panel/src/pages/ManageAds.jsx80
-rw-r--r--panel/src/pages/Roles.jsx26
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>
);
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2024-12-26 06:33:58 +0000