✨ Migrate to RouterProvider and other refactors

src/new-frontend/src/components/ActionsMenu.tsx

@@ -4,9 +4,9 @@ import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@ch
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { FiTrash, FiEdit } from 'react-icons/fi';
 
-import Delete from '../pages/modals/DeleteAlert';
-import EditUser from '../pages/modals/EditUser';
-import EditItem from '../pages/modals/EditItem';
+import Delete from '../modals/DeleteAlert';
+import EditUser from '../modals/EditUser';
+import EditItem from '../modals/EditItem';
 
 interface ActionsMenuProps {
     type: string;

src/new-frontend/src/components/Navbar.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
 
-import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react';
-import { FaPlus } from "react-icons/fa";
+import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
+import { FaPlus, FaSearch } from "react-icons/fa";
 
-import CreateItem from '../pages/modals/CreateItem';
-import CreateUser from '../pages/modals/CreateUser';
+import AddUser from '../modals/AddUser';
+import AddItem from '../modals/AddItem';
 
 interface NavbarProps {
     type: string;
 }
 
 const Navbar: React.FC<NavbarProps> = ({ type }) => {
-    const createUserModal = useDisclosure();
-    const createItemModal = useDisclosure();
+    const addUserModal = useDisclosure();
+    const addItemModal = useDisclosure();
 
     return (
         <>
-            <Flex gap={4} py={{ base: "8", md: "4" }} justify={{ base: "center", md: "end" }}>
-                <Button bg="ui.main" color="white" gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? createUserModal.onOpen : createItemModal.onOpen}>
-                    <Icon as={FaPlus} /> Create {type}
+            <Flex py={8} gap={4}>
+                <InputGroup w={{ base: "100%", md: "auto" }}>
+                    <InputLeftElement pointerEvents="none">
+                        <Icon as={FaSearch} color="gray.400" />
+                    </InputLeftElement>
+                    <Input type="text" placeholder="Search" fontSize={{ base: "sm", md: "inherit" }} borderRadius="8px" />
+                </InputGroup>
+                <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}>
+                    <Icon as={FaPlus} /> Add {type}
                 </Button>
-                <CreateUser isOpen={createUserModal.isOpen} onClose={createUserModal.onClose} />
-                <CreateItem isOpen={createItemModal.isOpen} onClose={createItemModal.onClose} />
-            </Flex>
+                <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
+                <AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
+            </Flex >
         </>
     );
 };

src/new-frontend/src/components/Sidebar.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 
-import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure } from '@chakra-ui/react';
+import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text } from '@chakra-ui/react';
 import { FiMenu } from 'react-icons/fi';
 
-import Logo from "../assets/images/fastapi-logo.png";
+import Logo from "../assets/images/fastapi-logo.svg";
 import SidebarItems from './SidebarItems';
-import UserInfo from './UserInfo';
+import { useUserStore } from '../store/user-store';
 
 
 const Sidebar: React.FC = () => {
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const { user } = useUserStore();
 
     return (
         <>
@@ -20,25 +21,31 @@ const Sidebar: React.FC = () => {
                 <DrawerContent bg="ui.secondary" maxW="250px">
                     <DrawerCloseButton />
                     <DrawerBody py={8}>
-                        <Flex flexDir="column" justify="space-between" h="100%">
+                        <Flex flexDir="column" justify="space-between">
                             <Box>
-                                <Image src={Logo} alt="Logo" />
+                                <Image src={Logo} alt="Logo" p={6} />
                                 <SidebarItems onClose={onClose} />
                             </Box>
-                            <UserInfo />
+                            {
+                                user?.email &&
+                                <Text color='gray' noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
+                            }
                         </Flex>
                     </DrawerBody>
                 </DrawerContent>
             </Drawer>
 
             {/* Desktop */}
             <Box bg="white" p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
-                <Flex flexDir="column" justify="space-between" bg="ui.secondary" p={6} borderRadius={12}>
+                <Flex flexDir="column" justify="space-between" bg="ui.secondary" p={4} borderRadius={12}>
                     <Box>
-                        <Image src={Logo} alt="Logo" w="180px" maxW="2xs" />
+                        <Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
                         <SidebarItems />
                     </Box>
-                    <UserInfo />
+                    {
+                        user?.email &&
+                        <Text color='gray' noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
+                    }
                 </Flex>
             </Box>
         </>

src/new-frontend/src/components/SidebarItems.tsx

@@ -1,49 +1,48 @@
 import React from 'react';
 
-import { Flex, Icon, Text } from '@chakra-ui/react';
-import { FiBriefcase, FiHome, FiLogOut, FiSettings, FiUsers } from 'react-icons/fi';
-import { Link, useNavigate } from 'react-router-dom';
-
+import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
+import { Link, useLocation } from 'react-router-dom';
 
 const items = [
     { icon: FiHome, title: 'Dashboard', path: "/" },
     { icon: FiBriefcase, title: 'Items', path: "/items" },
     { icon: FiUsers, title: 'Admin', path: "/admin" },
     { icon: FiSettings, title: 'User Settings', path: "/settings" },
-    { icon: FiLogOut, title: 'Log out' }
 ];
 
 interface SidebarItemsProps {
     onClose?: () => void;
 }
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
-    const navigate = useNavigate();
-
-    const handleLogout = async () => {
-        localStorage.removeItem("access_token");
-        navigate("/login");
-    // TODO: reset all Zustand states
-    };
+    const location = useLocation();
 
     const listItems = items.map((item) => (
-        <Flex w="100%" p={2} key={item.title} _hover={{
-            background: "gray.200",
-            borderRadius: "12px",
-        }} onClick={item.title === 'Log out' ? handleLogout : onClose}>
-            <Link to={item.path || "/"}>
-                <Flex gap={4}>
-                    <Icon color="ui.main" as={item.icon} alignSelf="center" />
-                    <Text>{item.title}</Text>
-
-                </Flex>
-            </Link>
+        <Flex
+            as={Link}
+            to={item.path}
+            w="100%"
+            p={2}
+            key={item.title}
+            style={location.pathname === item.path ? {
+                background: "#E2E8F0",
+                borderRadius: "12px",
+            } : {}}
+            color="ui.main"
+            onClick={onClose}
+        >
+            <Icon as={item.icon} alignSelf="center" />
+            <Text ml={2}>{item.title}</Text>
         </Flex>
     ));
 
     return (
         <>
-            {listItems}
+            <Box>
+                {listItems}
+            </Box>
+
         </>
     );
 };