Merge pull request #67 from Code-To-Give-Team14/frontend/split-admin-…

…user

update the admin and user page: user header + admin siderbar, login l…

frontend/src/App.jsx

@@ -1,11 +1,12 @@
 import { useState } from 'react'
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Link, useLocation } from 'react-router-dom';
+import { DashboardOutlined, TableOutlined, LogoutOutlined, LoginOutlined } from '@ant-design/icons';
+import { Breadcrumb, Button, Menu, Modal, Form, Input, Layout } from 'antd';
 import './styles/NavBar.css';
 import logo from './assets/Zubin-Logo.jpg'
 import './App.css'
 import ScrollToTop from './components/ScrollToTop';
 
-// List of pages
 import MainScrollPage from './pages/MainScrollPage'
 import EventPage from './pages/EventPage'
 import CommunityPage from './pages/CommunityPage'
@@ -14,51 +15,176 @@ import AdminPage from './pages/AdminPage'
 import AdminTablePage from './pages/AdminTablePage'
 import TrainingPage from './pages/TrainingPage';
 
-// Component for navigate the unauthorized users to the loginPage
-import ProtectedRoute from './components/ProtectedRoute';
-
 import { ChatBot } from './components/ChatBot';
 import { EventForm } from './components/admin/EventForm';
 import { EventTable } from './components/admin/EventTable';
 
+const { Header, Content, Footer, Sider } = Layout;
+
 function App() {
+  const [isLogin, setIsLogin] = useState(false);
+  const [loginModalVisible, setLoginModalVisible] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  // const location = useLocation();
+
+  const showLoginModal = () => {
+    setLoginModalVisible(true);
+  };
+
+  const handleLoginOk = () => {
+    setIsLogin(true);
+    setLoginModalVisible(false);
+  };
 
-  const isAuthenticated = true;
-  const isAdmin = true;
+  const handleLoginCancel = () => {
+    setLoginModalVisible(false);
+  };
+
+  const handleLogout = () => {
+    setIsLogin(false);
+  };
 
   return (
-    <>
-      <Router>
-        <ScrollToTop/>
-        <nav>
-          <Link className="nav-link" to="/"><img src={logo} className="nav-logo"/></Link>
-            <ul className="nav-links">
-              <li><Link className="nav-link" to="/event">Event</Link></li>
-              <li><Link className="nav-link" to="/community">Community</Link></li>
-              <li><Link className="nav-link" to="/engagement">Engagement</Link></li>
-              <li><Link className="nav-link" to="/admin">Admin</Link></li>
-              <div style={{ width: '50px' }}/>
-            </ul>
-        </nav>
-
-        <Routes>
-          {/* Public Routes */}
-          <Route path="/" element={<MainScrollPage />} />
-          <Route path="/event" element={<EventPage />} />
-
-          {/* Protected Routes */}
-          <Route path="/community" element={<ProtectedRoute element={<CommunityPage />} isAuthenticated={isAuthenticated} />} />
-          <Route path="/engagement" element={<ProtectedRoute element={<EngagementPage />} isAuthenticated={isAuthenticated} />} >
-            <Route path=":id"element={<ProtectedRoute element={<TrainingPage />} isAuthenticated={isAuthenticated} />}/>
-          </Route>
-
-          {/* Admin Routes */}
-          <Route path="/admin" element={<ProtectedRoute element={<AdminPage />} isAuthenticated={isAuthenticated && isAdmin} />}>
-            <Route path="table" element={<AdminTablePage />} />
-          </Route>
-        </Routes>
-      </Router>
-    </>
+
+    <Router>
+      {!isLogin && (
+        <>
+          <ScrollToTop />
+
+          <Header
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              padding: '10px 30px',
+              backgroundColor: '#fff',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            }}
+          >
+            <Link to="/">
+              <img
+                src={logo}
+                alt="Logo"
+                height="60px"
+              />
+            </Link>
+            <Menu mode="horizontal" style={{ border: 'none' }}>
+              <Menu.Item key="event">
+                <Link to="/event">Event</Link>
+              </Menu.Item>
+              <Menu.Item key="community">
+                <Link to="/community">Community</Link>
+              </Menu.Item>
+              <Menu.Item key="engagement">
+                <Link to="/engagement">Engagement</Link>
+              </Menu.Item>
+              <Menu.Item key="login" icon={<LoginOutlined />} onClick={showLoginModal}>
+                  Login
+              </Menu.Item>
+            </Menu>
+          </Header>
+
+          <Modal
+            title="Admin Login"
+            open={loginModalVisible}
+            onOk={handleLoginOk}
+            onCancel={handleLoginCancel}
+          >
+            <Form>
+              <Form.Item
+                label="Username"
+                name="username"
+                rules={[{ required: true, message: 'Please input your username!' }]}
+              >
+                <Input defaultValue="admin" />
+              </Form.Item>
+
+              <Form.Item
+                label="Password"
+                name="password"
+                rules={[{ required: true, message: 'Please input your password!' }]}
+              >
+                <Input.Password defaultValue="password" />
+              </Form.Item>
+            </Form>
+          </Modal>
+
+          <Routes>
+            <Route path="/" element={<MainScrollPage />} />
+            <Route path="/event" element={<EventPage />} />
+            <Route path="/community" element={<CommunityPage />} />
+            <Route path="/engagement" element={<EngagementPage />} />
+            <Route path=":id" element={<TrainingPage />} />
+          </Routes>
+        </>
+      )}
+      {isLogin && (
+        <Layout
+          style={{
+            minHeight: '100vh',
+          }}
+        >
+          <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+            <div
+              style={{
+                height: '32px',
+                margin: '16px',
+                backgroundColor: 'rgba(255,255,255,.2)',
+                borderRadius: '6px',
+              }}
+            />
+            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" >
+              <Menu.Item key="1" icon={<DashboardOutlined />}>
+                <Link to="/">Dashboard</Link>
+              </Menu.Item>
+              <Menu.Item key="2" icon={<TableOutlined />}>
+                <Link to="/table">Table</Link>
+              </Menu.Item>
+              <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
+                <Link to="/">logout</Link>
+              </Menu.Item>
+
+            </Menu>
+          </Sider>
+          <Layout>
+            <Header
+              style={{
+                padding: 0,
+              }}
+            />
+            <Content
+              style={{
+                margin: '0 16px',
+              }}
+            >
+              <Breadcrumb
+                style={{
+                  margin: '16px 0',
+                }}
+              >
+                <Breadcrumb.Item>Admin</Breadcrumb.Item>
+                <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
+              </Breadcrumb>
+              <div
+                style={{
+                  padding: 24,
+                  minHeight: 360,
+                  // background: colorBgContainer,
+                  // borderRadius: borderRadiusLG,
+                }}
+              >
+                <Routes>
+                  <Route path="/" element={<AdminPage />} />
+                  <Route path="/table" element={<AdminTablePage />} />
+                </Routes>
+              </div>
+
+            </Content>
+          </Layout>
+
+        </Layout>
+      )}
+
+    </Router >
   )
 }
 

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
+import './scrollbar.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

frontend/src/pages/AdminPage.jsx

@@ -7,19 +7,7 @@ import AdminPageX from "./admin/AdminPageX.jsx";
 const AdminPage = () => {
   return (
     <div style={{ display: 'flex', minHeight: '100vh' }}>
-      <aside className="admin-sidebar">
-          <button className="new-event-btn"><span>New Event</span></button>
-          <div className="admin-categories">
-            <ul>
-            <Link className="side-link" to="/admin"><li><span>Dashboard</span></li></Link>
-            <Link className="side-link" to="/admin/table"><li><span>Events</span></li></Link>
-            </ul>
-          </div>
-        </aside>
-      <main style={{ flexGrow: 1, padding: '20px' }}>
-        <Outlet />
         <AdminPageX />
-      </main>
     </div>
   );
 }

frontend/src/scrollbar.css

@@ -0,0 +1,31 @@
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: #b5b5b5 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 16px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: #b5b5b5;
+    border-radius: 10px;
+    border: 3px solid #ffffff;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: #a1a1a1;
+    /* New hover color close to #b5b5b5 */
+}
+
+*::-webkit-scrollbar-thumb:active {
+    background-color: #959595;
+    /* New active color close to #b5b5b5 */
+}

frontend/src/styles/CommunityPage.css

@@ -9,7 +9,6 @@ body {
     rgba(240, 226, 255, 0.7) 100%
   );
   color: #4b4b4b;
-  padding-top: 100px;
 }
 
 .community-page {

frontend/src/styles/NavBar.css

@@ -1,45 +0,0 @@
-nav {
-  font-family: "Open Sans", sans-serif;
-  background-color: white;
-  padding: 10px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  position: fixed; /* Fixes the navbar to the top */
-  top: 0; /* Aligns the navbar to the top of the page */
-  left: 0; /* Ensures the navbar stretches across the full width of the viewport */
-  width: 100%; /* Ensures the navbar stretches across the full width of the viewport */
-  z-index: 1000; /* Keeps the navbar above other content */
-}
-
-.nav-logo {
-  height: 60px;
-  margin-right: 20px;
-}
-
-nav ul {
-  list-style-type: none;
-  display: flex;
-  justify-content: space-around;
-  padding: 0;
-  margin: 0;
-  margin-left: auto;
-}
-
-nav li {
-  margin: 0 10px;
-}
-
-.nav-link {
-  color: #666666;
-  text-decoration: none;
-  padding: 10px 20px;
-  transition: color 0.2s;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.nav-link:hover {
-  color: #00a9ff;
-}