✨ Restructure folders, allow editing of users/items, and implement other refactors and improvements

src/new-frontend/src/components/Admin/AddUser.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import { UserCreate } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useUsersStore } from '../../store/users-store';
+import { ApiError } from '../../client/core/ApiError';
+
+interface AddUserProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+interface UserCreateForm extends UserCreate {
+    confirmPassword: string;
+
+}
+
+const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserCreateForm>();
+    const { addUser } = useUsersStore();
+
+    const onSubmit: SubmitHandler<UserCreateForm> = async (data) => {
+        if (data.password === data.confirmPassword) {
+            try {
+                await addUser(data);
+                showToast('Success!', 'User created successfully.', 'success');
+                reset();
+                onClose();
+            } catch (err) {
+                const errDetail = (err as ApiError).body.detail;
+                showToast('Something went wrong.', `${errDetail}`, 'error');
+            }
+        } else {
+            // TODO: Complete when form validation is implemented
+            console.log("Passwords don't match")
+        }
+    }
+
+    return (
+        <>
+            <Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                size={{ base: 'sm', md: 'md' }}
+                isCentered
+            >
+                <ModalOverlay />
+                <ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
+                    <ModalHeader>Add User</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody pb={6} >
+                        <FormControl>
+                            <FormLabel htmlFor='email'>Email</FormLabel>
+                            <Input id='email' {...register('email')} placeholder='Email' type='email' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='name'>Full name</FormLabel>
+                            <Input id='name' {...register('full_name')} placeholder='Full name' type='text' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='password'>Set Password</FormLabel>
+                            <Input id='password' {...register('password')} placeholder='Password' type='password' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='confirmPassword'>Confirm Password</FormLabel>
+                            <Input id='confirmPassword' {...register('confirmPassword')} placeholder='Password' type='password' />
+                        </FormControl>
+                        <Flex mt={4}>
+                            <FormControl>
+                                <Checkbox {...register('is_superuser')} colorScheme='teal'>Is superuser?</Checkbox>
+                            </FormControl>
+                            <FormControl>
+                                <Checkbox {...register('is_active')} colorScheme='teal'>Is active?</Checkbox>
+                            </FormControl>
+                        </Flex>
+                    </ModalBody>
+                    <ModalFooter gap={3}>
+                        <Button bg='ui.main' color='white' type='submit' isLoading={isSubmitting}>
+                            Save
+                        </Button>
+                        <Button onClick={onClose}>Cancel</Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+export default AddUser;

src/new-frontend/src/components/Admin/EditUser.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import { ApiError, UserUpdate } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useUsersStore } from '../../store/users-store';
+
+interface EditUserProps {
+    user_id: number;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+interface UserUpdateForm extends UserUpdate {
+    confirm_password: string;
+}
+
+const EditUser: React.FC<EditUserProps> = ({ user_id, isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserUpdateForm>();
+    const { editUser, users } = useUsersStore();
+
+    const currentUser = users.find((user) => user.id === user_id);
+
+    const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
+        if (data.password === data.confirm_password) {
+            try {
+                await editUser(user_id, data);
+                showToast('Success!', 'User updated successfully.', 'success');
+                reset();
+                onClose();
+            } catch (err) {
+                const errDetail = (err as ApiError).body.detail;
+                showToast('Something went wrong.', `${errDetail}`, 'error');
+            }
+        } else {
+            // TODO: Complete when form validation is implemented
+            console.log("Passwords don't match")
+        }
+    }
+
+    const onCancel = () => {
+        reset();
+        onClose();
+    }
+
+    return (
+        <>
+            <Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                size={{ base: 'sm', md: 'md' }}
+                isCentered
+            >
+                <ModalOverlay />
+                <ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
+                    <ModalHeader>Edit User</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody pb={6}>
+                        <FormControl>
+                            <FormLabel htmlFor='email'>Email</FormLabel>
+                            <Input id="email" {...register('email')} defaultValue={currentUser?.email} type='email' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='name'>Full name</FormLabel>
+                            <Input id="name" {...register('full_name')} defaultValue={currentUser?.full_name} type='text' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='password'>Password</FormLabel>
+                            <Input id="password" {...register('password')} placeholder='••••••••' type='password' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='confirmPassword'>Confirmation Password</FormLabel>
+                            <Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
+                        </FormControl>
+                        <Flex>
+                            <FormControl mt={4}>
+                                <Checkbox {...register('is_superuser')} defaultChecked={currentUser?.is_superuser} colorScheme='teal'>Is superuser?</Checkbox>
+                            </FormControl>
+                            <FormControl mt={4}>
+                                <Checkbox {...register('is_active')} defaultChecked={currentUser?.is_active} colorScheme='teal'>Is active?</Checkbox>
+                            </FormControl>
+                        </Flex>
+                    </ModalBody>
+
+                    <ModalFooter gap={3}>
+                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+                            Save
+                        </Button>
+                        <Button onClick={onCancel}>Cancel</Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+export default EditUser;

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

@@ -2,33 +2,35 @@ import React from 'react';
 
 import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@chakra-ui/react';
 import { BsThreeDotsVertical } from 'react-icons/bs';
-import { FiTrash, FiEdit } from 'react-icons/fi';
+import { FiEdit, FiTrash } from 'react-icons/fi';
+
+import EditUser from '../Admin/EditUser';
+import EditItem from '../Items/EditItem';
+import Delete from './DeleteAlert';
 
-import Delete from '../modals/DeleteAlert';
-import EditUser from '../modals/EditUser';
-import EditItem from '../modals/EditItem';
 
 interface ActionsMenuProps {
     type: string;
     id: number;
+    disabled: boolean;
 }
 
-const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id }) => {
+const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {
     const editUserModal = useDisclosure();
     const deleteModal = useDisclosure();
 
     return (
         <>
             <Menu>
-                <MenuButton as={Button} rightIcon={<BsThreeDotsVertical />} variant="unstyled">
+                <MenuButton isDisabled={disabled} as={Button} rightIcon={<BsThreeDotsVertical />} variant='unstyled'>
                 </MenuButton>
                 <MenuList>
-                    <MenuItem onClick={editUserModal.onOpen} icon={<FiEdit fontSize="16px" />}>Edit {type}</MenuItem>
-                    <MenuItem onClick={deleteModal.onOpen} icon={<FiTrash fontSize="16px" />} color="ui.danger">Delete {type}</MenuItem>
+                    <MenuItem onClick={editUserModal.onOpen} icon={<FiEdit fontSize='16px' />}>Edit {type}</MenuItem>
+                    <MenuItem onClick={deleteModal.onOpen} icon={<FiTrash fontSize='16px' />} color='ui.danger'>Delete {type}</MenuItem>
                 </MenuList>
                 {
-                    type === "User" ? <EditUser isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
-                        : <EditItem isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
+                    type === 'User' ? <EditUser user_id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
+                        : <EditItem id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
                 }
                 <Delete type={type} id={id} isOpen={deleteModal.isOpen} onClose={deleteModal.onClose} />
             </Menu>

src/new-frontend/src/modals/DeleteAlert.tsx → src/new-frontend/src/components/Common/DeleteAlert.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 
-import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, useToast } from '@chakra-ui/react';
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 
-import { useItemsStore } from '../store/items-store';
-import { useUsersStore } from '../store/users-store';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
+import { useUsersStore } from '../../store/users-store';
 
 interface DeleteProps {
     type: string;
@@ -14,7 +15,7 @@ interface DeleteProps {
 }
 
 const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
-    const toast = useToast();
+    const showToast = useCustomToast();
     const cancelRef = React.useRef<HTMLButtonElement | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const { handleSubmit } = useForm();
@@ -25,20 +26,10 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
         setIsLoading(true);
         try {
             type === 'Item' ? await deleteItem(id) : await deleteUser(id);
-            toast({
-                title: "Success",
-                description: `The ${type.toLowerCase()} was deleted successfully.`,
-                status: "success",
-                isClosable: true,
-            });
+            showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
             onClose();
         } catch (err) {
-            toast({
-                title: "An error occurred.",
-                description: `An error occurred while deleting the ${type.toLowerCase()}.`,
-                status: "error",
-                isClosable: true,
-            });
+            showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
         } finally {
             setIsLoading(false);
         }
@@ -60,6 +51,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
                         </AlertDialogHeader>
 
                         <AlertDialogBody>
+                            {type === 'User' && <span>All items associated with this user will also be <strong>permantly deleted. </strong></span>}
                             Are you sure? You will not be able to undo this action.
                         </AlertDialogBody>
 

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

@@ -3,8 +3,8 @@ import React from 'react';
 import { Button, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
 import { FaPlus, FaSearch } from "react-icons/fa";
 
-import AddUser from '../modals/AddUser';
-import AddItem from '../modals/AddItem';
+import AddUser from '../Admin/AddUser';
+import AddItem from '../Items/AddItem';
 
 interface NavbarProps {
     type: string;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, Text, useColorModeValue, useDisclosure } from '@chakra-ui/react';
+import { FiLogOut, FiMenu } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
+
+import Logo from '../../assets/images/fastapi-logo.svg';
+import useAuth from '../../hooks/useAuth';
+import { useUserStore } from '../../store/user-store';
+import SidebarItems from './SidebarItems';
+
+const Sidebar: React.FC = () => {
+    const bgColor = useColorModeValue('white', '#1a202c');
+    const textColor = useColorModeValue('gray', 'white');
+    const secBgColor = useColorModeValue('ui.secondary', '#252d3d');
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { user } = useUserStore();
+    const { logout } = useAuth();
+    const navigate = useNavigate();
+
+    const handleLogout = async () => {
+        logout()
+        navigate('/login');
+    };
+
+
+    return (
+        <>
+            {/* Mobile */}
+            <IconButton onClick={onOpen} display={{ base: 'flex', md: 'none' }} aria-label='Open Menu' position='absolute' fontSize='20px' m={4} icon={<FiMenu />} />
+            <Drawer isOpen={isOpen} placement='left' onClose={onClose}>
+                <DrawerOverlay />
+                <DrawerContent maxW='250px'>
+                    <DrawerCloseButton />
+                    <DrawerBody py={8}>
+                        <Flex flexDir='column' justify='space-between'>
+                            <Box>
+                                <Image src={Logo} alt='logo' p={6} />
+                                <SidebarItems onClose={onClose} />
+                                <Flex as='button' onClick={handleLogout} p={2} color='ui.danger' fontWeight='bold' alignItems='center'>
+                                    <FiLogOut />
+                                    <Text ml={2}>Log out</Text>
+                                </Flex>
+                            </Box>
+                            {
+                                user?.email &&
+                                <Text color={textColor} noOfLines={2} fontSize='sm' p={2}>Logged in as: {user.email}</Text>
+                            }
+                        </Flex>
+                    </DrawerBody>
+                </DrawerContent>
+            </Drawer>
+
+            {/* Desktop */}
+            <Box bg={bgColor} p={3} h='100vh' position='sticky' top='0' display={{ base: 'none', md: 'flex' }}>
+                <Flex flexDir='column' justify='space-between' bg={secBgColor} p={4} borderRadius={12}>
+                    <Box>
+                        <Image src={Logo} alt='Logo' w='180px' maxW='2xs' p={6} />
+                        <SidebarItems />
+                    </Box>
+                    {
+                        user?.email &&
+                        <Text color={textColor} noOfLines={2} fontSize='sm' p={2} maxW='180px'>Logged in as: {user.email}</Text>
+                    }
+                </Flex>
+            </Box>
+        </>
+    );
+}
+
+export default Sidebar;

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

@@ -4,7 +4,7 @@ import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
 import { Link, useLocation } from 'react-router-dom';
 
-import { useUserStore } from '../store/user-store';
+import { useUserStore } from '../../store/user-store';
 
 const items = [
     { icon: FiHome, title: 'Dashboard', path: "/" },