New React routes

.github/workflows/frontend-react-cd.yml

@@ -10,6 +10,7 @@ on:
 
 jobs:
   deploy:
+    if: false
     runs-on: ubuntu-latest
     defaults:
       run:

frontend/react/src/App.jsx → frontend/react/src/Customer.jsx

@@ -11,7 +11,7 @@ import CardWithImage from "./components/customer/CustomerCard.jsx";
 import CreateCustomerDrawer from "./components/customer/CreateCustomerDrawer.jsx";
 import {errorNotification} from "./services/notification.js";
 
-const App = () => {
+const Customer = () => {
 
     const [customers, setCustomers] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -92,4 +92,4 @@ const App = () => {
     )
 }
 
-export default App;
+export default Customer;

frontend/react/src/Home.jsx

@@ -0,0 +1,13 @@
+import SidebarWithHeader from "./components/shared/SideBar.jsx";
+import {Text} from "@chakra-ui/react";
+
+const Home = () => {
+
+    return (
+        <SidebarWithHeader>
+            <Text fontSize={"6xl"}>Dashboard</Text>
+        </SidebarWithHeader>
+    )
+}
+
+export default Home;

frontend/react/src/components/login/Login.jsx

@@ -107,7 +107,7 @@ const Login = () => {
 
     useEffect(() => {
         if (customer) {
-            navigate("/dashboard");
+            navigate("/dashboard/customers");
         }
     })
 

frontend/react/src/components/shared/SideBar.jsx

@@ -25,21 +25,17 @@ import {
 import {
     FiBell,
     FiChevronDown,
-    FiCompass,
     FiHome,
     FiMenu,
     FiSettings,
-    FiStar,
-    FiTrendingUp
+    FiUsers
 } from 'react-icons/fi';
 import {useAuth} from "../context/AuthContext.jsx";
 
 const LinkItems = [
-    {name: 'Home', icon: FiHome},
-    {name: 'Trending', icon: FiTrendingUp},
-    {name: 'Explore', icon: FiCompass},
-    {name: 'Favourites', icon: FiStar},
-    {name: 'Settings', icon: FiSettings},
+    {name: 'Home', route: '/dashboard', icon: FiHome},
+    {name: 'Customers', route: '/dashboard/customers',  icon: FiUsers},
+    {name: 'Settings', route: '/dashboard/settings', icon: FiSettings},
 ];
 
 export default function SidebarWithHeader({children}) {
@@ -95,17 +91,17 @@ const SidebarContent = ({onClose, ...rest}) => {
                 <CloseButton display={{base: 'flex', md: 'none'}} onClick={onClose}/>
             </Flex>
             {LinkItems.map((link) => (
-                <NavItem key={link.name} icon={link.icon}>
+                <NavItem key={link.name} route={link.route} icon={link.icon}>
                     {link.name}
                 </NavItem>
             ))}
         </Box>
     );
 };
 
-const NavItem = ({icon, children, ...rest}) => {
+const NavItem = ({icon, route, children, ...rest}) => {
     return (
-        // <Link href="frontend/react/src/components/shared#" style={{textDecoration: 'none'}} _focus={{boxShadow: 'none'}}>
+        <Link href={route} style={{textDecoration: 'none'}} _focus={{boxShadow: 'none'}}>
             <Flex
                 align="center"
                 p="4"
@@ -130,7 +126,7 @@ const NavItem = ({icon, children, ...rest}) => {
                 )}
                 {children}
             </Flex>
-        // </Link>
+        </Link>
     );
 };
 

frontend/react/src/components/signup/Signup.jsx

@@ -10,7 +10,7 @@ const Signup = () => {
 
     useEffect(() => {
         if (customer) {
-            navigate("/dashboard");
+            navigate("/dashboard/customers");
         }
     })
 

frontend/react/src/main.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
-import {ChakraProvider} from '@chakra-ui/react'
+import Customer from './Customer.jsx'
+import {ChakraProvider, Text} from '@chakra-ui/react'
 import { createStandaloneToast } from '@chakra-ui/toast'
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Login from "./components/login/Login.jsx";
 import Signup from "./components/signup/Signup";
 import AuthProvider from "./components/context/AuthContext.jsx";
 import ProtectedRoute from "./components/shared/ProtectedRoute.jsx";
 import './index.css'
+import Home from "./Home.jsx";
 
 const { ToastContainer } = createStandaloneToast();
 
@@ -23,7 +24,11 @@ const router = createBrowserRouter([
     },
     {
         path: "dashboard",
-        element: <ProtectedRoute><App /></ProtectedRoute>
+        element: <ProtectedRoute><Home/></ProtectedRoute>
+    },
+    {
+        path: "dashboard/customers",
+        element: <ProtectedRoute><Customer /></ProtectedRoute>
     }
 ])