diff options
author | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-01 17:21:25 +0530 |
---|---|---|
committer | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-01 17:21:25 +0530 |
commit | b3c07fd9f1664dda4f16357aaca74dff8226401d (patch) | |
tree | b738f4c68d897c009ba7823d0e99f1f6b44a611d /panel | |
parent | 1bc31e4d8c8d23230bdac1b2bd73e76c8d455222 (diff) | |
download | admin-panel-b3c07fd9f1664dda4f16357aaca74dff8226401d.tar.gz admin-panel-b3c07fd9f1664dda4f16357aaca74dff8226401d.tar.bz2 admin-panel-b3c07fd9f1664dda4f16357aaca74dff8226401d.zip |
updated project
Diffstat (limited to 'panel')
-rw-r--r-- | panel/src/App.jsx | 25 | ||||
-rw-r--r-- | panel/src/components/Navbar.css | 27 | ||||
-rw-r--r-- | panel/src/components/Navbar.jsx | 18 | ||||
-rw-r--r-- | panel/src/components/PrivateRoute.jsx | 24 | ||||
-rw-r--r-- | panel/src/main.jsx | 5 | ||||
-rw-r--r-- | panel/src/pages/Dashboard.jsx | 39 | ||||
-rw-r--r-- | panel/src/pages/ManageAds.jsx | 80 | ||||
-rw-r--r-- | panel/src/pages/Roles.jsx | 26 |
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> ); |