feat(frontend): added admin schedule page

bsoc-bitbyte · Jun 13, 2024 · e998220 · e998220
1 parent a811ef8
commit e998220
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 6 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -14,6 +14,7 @@ import {Toaster} from 'react-hot-toast';
 import AdminDashBoard from './pages/AdminDashBoard';
 import ProfilePage from './pages/Profile';
 import AdminProtectedRoute from './components/AdminProtectedRoutes';
+import AdminSchedule from './pages/AdminSchedule';
 
 function App() {
   const location = useLocation();
@@ -44,6 +45,14 @@ function App() {
                 </AdminProtectedRoute>
               }
             />
+            <Route
+              path="/admin/schedule"
+              element={
+                <AdminProtectedRoute>
+                  <AdminSchedule />
+                </AdminProtectedRoute>
+              }
+            />
             <Route
               path="/demo-Page"
               element={

diff --git a/frontend/src/components/AdminPanel/AdminSideBar/index.tsx b/frontend/src/components/AdminPanel/AdminSideBar/index.tsx
@@ -11,21 +11,30 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
 import ScheduleIcon from '@mui/icons-material/WatchLater';
 import AnalyticsIcon from '@mui/icons-material/Analytics';
 import BusIcon from '@mui/icons-material/DepartureBoard';
-import {useState} from 'react';
-import {Link} from 'react-router-dom';
+// import {useState} from 'react';
+import useStore from '../../../store/useStore';
+import {Link, useNavigate} from 'react-router-dom';
 import {useTheme, styled} from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/ArrowCircleLeft';
 
 export default function SideBar() {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const closeSidebar = () => {
     if (document.getElementById('drawer')) {
       (document.getElementById('drawer') as HTMLElement).style.display = 'none';
     }
   };
 
+  const OpenDashBoard = () => {
+    navigate('/admin/dashboard');
+  };
+  const OpenSchedule = () => {
+    navigate('/admin/schedule');
+  };
+
   const LinkContainer = styled(Link)`
     text-decoration: none;
     color: inherit;
@@ -47,9 +56,12 @@ export default function SideBar() {
     margin-bottom: 0.8rem;
   `;
 
-  const [active, setActive] = useState(0);
+  // const [active, setActive] = useState(0);
+  const active = useStore(state => state.active);
+  const setActive = useStore(state => state.setActive);
   const handleClick = (props: number) => {
     setActive(props);
+    console.log(active);
   };
 
   return (
@@ -107,6 +119,7 @@ export default function SideBar() {
           <Item>
             <ListButton
               onClick={() => {
+                OpenDashBoard();
                 handleClick(0);
               }}
               style={{backgroundColor: active === 0 ? '#FBBC05' : 'initial'}}
@@ -135,6 +148,7 @@ export default function SideBar() {
           <Item>
             <ListButton
               onClick={() => {
+                OpenSchedule();
                 handleClick(1);
               }}
               style={{backgroundColor: active === 1 ? '#FBBC05' : 'initial'}}
@@ -163,6 +177,7 @@ export default function SideBar() {
           <Item>
             <ListButton
               onClick={() => {
+                OpenDashBoard();
                 handleClick(2);
               }}
               style={{
@@ -194,6 +209,7 @@ export default function SideBar() {
           <Item>
             <ListButton
               onClick={() => {
+                OpenDashBoard();
                 handleClick(3);
               }}
               style={{backgroundColor: active === 3 ? '#FBBC05' : 'initial'}}

diff --git a/frontend/src/components/TicketCard.tsx b/frontend/src/components/TicketCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Card, CardContent, Typography, Box, useMediaQuery} from '@mui/material';
-import {styled} from '@mui/system';
+import {styled} from '@mui/material';
 
 const Root = styled(Card)({
   borderRadius: '24px',

diff --git a/frontend/src/components/TicketCardClose.tsx b/frontend/src/components/TicketCardClose.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Card, CardContent, Typography, Box, useMediaQuery} from '@mui/material';
-import {styled} from '@mui/system';
+import {styled} from '@mui/material';
 
 const Root = styled(Card)({
   borderRadius: '24px',

diff --git a/frontend/src/pages/AdminDashBoard/index.tsx b/frontend/src/pages/AdminDashBoard/index.tsx
@@ -3,7 +3,7 @@ import AdminLayout from '../../components/AdminPanel/AdminLayout';
 const Admin = () => {
   return (
     <>
-      <AdminLayout>Ui elements go here.</AdminLayout>
+      <AdminLayout>Ui elements goes here.</AdminLayout>
     </>
   );
 };

diff --git a/frontend/src/pages/AdminSchedule/index.tsx b/frontend/src/pages/AdminSchedule/index.tsx
@@ -0,0 +1,200 @@
+import {Box, Button, Typography, styled} from '@mui/material';
+import AdminLayout from '../../components/AdminPanel/AdminLayout';
+import SearchIcon from '@mui/icons-material/Search';
+import AddIcon from '@mui/icons-material/Add';
+import QueueIcon from '@mui/icons-material/Queue';
+import {useState} from 'react';
+
+const AdminSchedule = () => {
+  const [count, setCount] = useState(0);
+
+  const FilterButton = styled(Button)`
+    background: #f9f9f9;
+    border: 1px solid #e6e6e6;
+    border-radius: 20px;
+    color: #c6c6c6;
+    text-transform: capitalize;
+  `;
+
+  return (
+    <>
+      <AdminLayout>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '55px',
+              }}
+              onClick={() => {
+                setCount(0);
+              }}
+            >
+              <Typography
+                sx={{
+                  color: count === 0 ? '#fbbc05' : '#1A1A1A',
+                  fontSize: '24px',
+                  fontWeight: 'bold',
+                }}
+              >
+                Bus Details
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '55px',
+              }}
+              onClick={() => {
+                setCount(1);
+              }}
+            >
+              <Typography
+                sx={{
+                  color: count === 1 ? '#fbbc05' : '#1A1A1A',
+                  fontSize: '24px',
+                  fontWeight: 'bold',
+                  ml: '2rem',
+                }}
+              >
+                Conductor Details
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                ml: {
+                  xs: '2rem',
+                  sm: '10rem',
+                  md: '19.8rem',
+                  lg: '34.5rem',
+                  xl: '44rem',
+                },
+              }}
+              onClick={() => {
+                setCount(2);
+              }}
+            >
+              <SearchIcon
+                sx={{
+                  height: '32px',
+                  width: '32px',
+                }}
+              />
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              height: '4px',
+              backgroundColor: '#fbbc05',
+              width: count === 1 ? '212px' : '132px',
+              transition: '0.3s ease-out',
+              transform: count === 1 ? 'translateX(165px)' : 'translateX(0px)',
+            }}
+          ></Box>
+          <Box
+            sx={{
+              height: '3px',
+              borderRadius: '4px',
+              backgroundColor: '#c6c6c6',
+            }}
+          ></Box>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'end',
+              mt: '2rem',
+              pr: '2rem',
+            }}
+          >
+            <FilterButton
+              sx={{
+                mr: '1rem',
+              }}
+            >
+              <AddIcon />
+              <Typography>Add New</Typography>
+            </FilterButton>
+            <FilterButton>
+              <Typography>Select</Typography>
+            </FilterButton>
+          </Box>
+          {count === 0 ? (
+            <Box
+              sx={{
+                mt: '1.5rem',
+                height: '30rem',
+              }}
+            >
+              <Box
+                sx={{
+                  width: '400px',
+                  height: '269px',
+                  borderRadius: '32px',
+                  border: '4px dashed #E6E6E6',
+                  background: '#F9F9F9',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <QueueIcon
+                  sx={{
+                    width: '80px',
+                    height: '80px',
+                    color: '#e6e6e6',
+                  }}
+                />
+              </Box>
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                mt: '1.5rem',
+                height: '30rem',
+              }}
+            >
+              <Box
+                sx={{
+                  width: '250px',
+                  height: '304px',
+                  borderRadius: '32px',
+                  border: '4px dashed #E6E6E6',
+                  background: '#F9F9F9',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <QueueIcon
+                  sx={{
+                    width: '80px',
+                    height: '80px',
+                    color: '#e6e6e6',
+                  }}
+                />
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </AdminLayout>
+    </>
+  );
+};
+
+export default AdminSchedule;
diff --git a/frontend/src/store/useStore.tsx b/frontend/src/store/useStore.tsx
@@ -0,0 +1,8 @@
+import {create} from 'zustand';
+
+const useStore = create(set => ({
+  active: 0,
+  setActive: value => set({active: value}),
+}));
+
+export default useStore;