✨ Restructure folders, allow editing of users/items, and implement other refactors and improvements (#603)

* Reorganize project directory structure

* Allow edit users/items, add useAuth and useCustomToast, password confirmation

* Minor improvements for consistency

* Add 'Cancel' button to UserInformation in editMode

* Refactor UserSettings

* Enable user password changes and improve error handling

* Enable user information update

* Add logout to Sidebar in mobile devices, conditional tabs depending on role and other improvements

* Add badges

* Remove comment

* Appearance tab updates

* Change badge color

* Reset inputs when clicking on 'Cancel' button

* Disable actions menu for Superuser when logged in

* Modify Logout and update stores

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/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={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={deleteModal.onOpen} icon={<FiTrash fontSize='16px' />} color='ui.danger'>Delete {type}</MenuItem>
                 </MenuList>
                 {
-                    type === "User" ? <EditUser isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
+                    type === 'User' ? <EditUser user_id={id} isOpen={editUserModal.isOpen} onClose={editUserModal.onClose} />
-                        : <EditItem 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/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 useCustomToast from '../../hooks/useCustomToast';
-import { useUsersStore } from '../store/users-store';
+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({
+            showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
-                title: "Success",
-                description: `The ${type.toLowerCase()} was deleted successfully.`,
-                status: "success",
-                isClosable: true,
-            });
             onClose();
         } catch (err) {
-            toast({
+            showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
-                title: "An error occurred.",
-                description: `An error occurred while deleting the ${type.toLowerCase()}.`,
-                status: "error",
-                isClosable: true,
-            });
         } 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/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 AddUser from '../Admin/AddUser';
-import AddItem from '../modals/AddItem';
+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/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: "/" },

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

@@ -1,38 +1,38 @@
 import React from 'react';
 
-import { IconButton } from '@chakra-ui/button';
+import { Box, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
-import { Box } from '@chakra-ui/layout';
-import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { FaUserAstronaut } from 'react-icons/fa';
 import { FiLogOut, FiUser } from 'react-icons/fi';
-import { useNavigate } from 'react-router';
+import { Link, useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+
+import useAuth from '../../hooks/useAuth';
 
 const UserMenu: React.FC = () => {
     const navigate = useNavigate();
+    const { logout } = useAuth();
 
     const handleLogout = async () => {
-        localStorage.removeItem("access_token");
+        logout()
-        navigate("/login");
+        navigate('/login');
-        // TODO: reset all Zustand states
     };
 
     return (
         <>
-            <Box position="fixed" top={4} right={4}>
+            {/* Desktop */}
+            <Box display={{ base: 'none', md: 'block' }} position='fixed' top={4} right={4}>
                 <Menu>
                     <MenuButton
                         as={IconButton}
                         aria-label='Options'
-                        icon={<FaUserAstronaut color="white" fontSize="18px" />}
+                        icon={<FaUserAstronaut color='white' fontSize='18px' />}
-                        bg="ui.main"
+                        bg='ui.main'
                         isRound
                     />
                     <MenuList>
-                        <MenuItem icon={<FiUser fontSize="18px" />} as={Link} to="settings">
+                        <MenuItem icon={<FiUser fontSize='18px' />} as={Link} to='settings'>
                             My profile
                         </MenuItem>
-                        <MenuItem icon={<FiLogOut fontSize="18px" />} onClick={handleLogout} color="ui.danger" fontWeight="bold">
+                        <MenuItem icon={<FiLogOut fontSize='18px' />} onClick={handleLogout} color='ui.danger' fontWeight='bold'>
                             Log out
                         </MenuItem>
                     </MenuList>

src/new-frontend/src/components/Items/AddItem.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 
-import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast } from '@chakra-ui/react';
+import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { ItemCreate } from '../client';
+import { ApiError, ItemCreate } from '../../client';
-import { useItemsStore } from '../store/items-store';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
 
 interface AddItemProps {
     isOpen: boolean;
@@ -12,7 +13,7 @@ interface AddItemProps {
 }
 
 const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
-    const toast = useToast();
+    const showToast = useCustomToast();
     const [isLoading, setIsLoading] = useState(false);
     const { register, handleSubmit, reset } = useForm<ItemCreate>();
     const { addItem } = useItemsStore();
@@ -21,21 +22,12 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
         setIsLoading(true);
         try {
             await addItem(data);
-            toast({
+            showToast('Success!', 'Item created successfully.', 'success');
-                title: 'Success!',
-                description: 'Item created successfully.',
-                status: 'success',
-                isClosable: true,
-            });
             reset();
             onClose();
         } catch (err) {
-            toast({
+            const errDetail = (err as ApiError).body.detail;
-                title: 'Something went wrong.',
+            showToast('Something went wrong.', `${errDetail}`, 'error');
-                description: 'Failed to create item. Please try again.',
-                status: 'error',
-                isClosable: true,
-            });
         } finally {
             setIsLoading(false);
         }
@@ -50,30 +42,32 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
                 isCentered
             >
                 <ModalOverlay />
-                <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+                <ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
                     <ModalHeader>Add Item</ModalHeader>
                     <ModalCloseButton />
                     <ModalBody pb={6}>
                         <FormControl>
-                            <FormLabel>Title</FormLabel>
+                            <FormLabel htmlFor='title'>Title</FormLabel>
                             <Input
+                                id='title'
                                 {...register('title')}
-                                placeholder="Title"
+                                placeholder='Title'
-                                type="text"
+                                type='text'
                             />
                         </FormControl>
                         <FormControl mt={4}>
-                            <FormLabel>Description</FormLabel>
+                            <FormLabel htmlFor='description'>Description</FormLabel>
                             <Input
+                                id='description'
                                 {...register('description')}
-                                placeholder="Description"
+                                placeholder='Description'
-                                type="text"
+                                type='text'
                             />
                         </FormControl>
                     </ModalBody>
 
                     <ModalFooter gap={3}>
-                        <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
+                        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isLoading}>
                             Save
                         </Button>
                         <Button onClick={onClose} isDisabled={isLoading}>

src/new-frontend/src/components/Items/EditItem.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import { ApiError, ItemUpdate } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
+
+interface EditItemProps {
+    id: number;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const EditItem: React.FC<EditItemProps> = ({ id, isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>();
+    const { editItem, items } = useItemsStore();
+
+    const currentItem = items.find((item) => item.id === id);
+
+    const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
+        try {
+            await editItem(id, data);
+            showToast('Success!', 'Item updated successfully.', 'success');
+            reset();
+            onClose();
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+    }
+
+    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 Item</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody pb={6}>
+                        <FormControl>
+                            <FormLabel htmlFor='title'>Title</FormLabel>
+                            <Input id='title' {...register('title')} defaultValue={currentItem?.title} type='text' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='description'>Description</FormLabel>
+                            <Input id='description' {...register('description')} defaultValue={currentItem?.description} placeholder='Description' type='text' />
+                        </FormControl>
+                    </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 EditItem;

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

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text, useColorModeValue } from '@chakra-ui/react';
-import { FiMenu } from 'react-icons/fi';
-
-import Logo from "../assets/images/fastapi-logo.svg";
-import SidebarItems from './SidebarItems';
-import { useUserStore } from '../store/user-store';
-
-
-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();
-
-    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} />
-                            </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/UserSettings/Appearance.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
 
-import { Container, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
+import { Badge, Container, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
 
 const Appearance: React.FC = () => {
     const { colorMode, toggleColorMode } = useColorMode();
 
     return (
         <>
-            <Container maxW="full">
+            <Container maxW='full'>
-                <Heading size="sm" py={4}>
+                <Heading size='sm' py={4}>
                     Appearance
                 </Heading>
                 <RadioGroup onChange={toggleColorMode} value={colorMode}>
                     <Stack>
-                        <Radio value="light" colorScheme="teal">
+                        {/* TODO: Add system default option */}
-                            Light <i>(default)</i>
+                        <Radio value='light' colorScheme='teal'>
+                            Light Mode<Badge ml='1' colorScheme='teal'>Default</Badge>
                         </Radio>
-                        <Radio value="dark" colorScheme="teal">
+                        <Radio value='dark' colorScheme='teal'>
-                            Dark
+                            Dark Mode
                         </Radio>
                     </Stack>
                 </RadioGroup>

src/new-frontend/src/components/UserSettings/ChangePassword.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { ApiError, UpdatePassword } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useUserStore } from '../../store/user-store';
+
+interface UpdatePasswordForm extends UpdatePassword {
+    confirm_password: string;
+}
+
+const ChangePassword: React.FC = () => {
+    const color = useColorModeValue('gray.700', 'white');
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UpdatePasswordForm>();
+    const { editPassword } = useUserStore();
+
+    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
+        try {
+            await editPassword(data);
+            showToast('Success!', 'Password updated.', 'success');
+            reset();
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+
+    }
+
+    return (
+        <>
+            <Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
+                <Heading size='sm' py={4}>
+                    Change Password
+                </Heading>
+                <Box w={{ 'sm': 'full', 'md': '50%' }}>
+                    <FormControl>
+                        <FormLabel color={color} htmlFor='currentPassword'>Current password</FormLabel>
+                        <Input id='currentPassword' {...register('current_password')} placeholder='••••••••' type='password' />
+                    </FormControl>
+                    <FormControl mt={4}>
+                        <FormLabel color={color} htmlFor='newPassword'>New password</FormLabel>
+                        <Input id='newPassword' {...register('new_password')} placeholder='••••••••' type='password' />
+                    </FormControl>
+                    <FormControl mt={4}>
+                        <FormLabel color={color} htmlFor='confirmPassword'>Confirm new password</FormLabel>
+                        <Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
+                    </FormControl>
+                    <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
+                        Save
+                    </Button>
+                </Box>
+            </ Container>
+        </>
+    );
+}
+export default ChangePassword;

src/new-frontend/src/components/UserSettings/DeleteAccount.tsx

@@ -2,21 +2,21 @@ import React from 'react';
 
 import { Button, Container, Heading, Text, useDisclosure } from '@chakra-ui/react';
 
-import DeleteConfirmation from '../modals/DeleteConfirmation';
+import DeleteConfirmation from './DeleteConfirmation';
 
 const DeleteAccount: React.FC = () => {
     const confirmationModal = useDisclosure();
 
     return (
         <>
-            <Container maxW="full">
+            <Container maxW='full'>
-                <Heading size="sm" py={4}>
+                <Heading size='sm' py={4}>
                     Delete Account
                 </Heading>
                 <Text>
                     Are you sure you want to delete your account? This action cannot be undone.
                 </Text>
-                <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} mt={4} onClick={confirmationModal.onOpen}>
+                <Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} mt={4} onClick={confirmationModal.onOpen}>
                     Delete
                 </Button>
                 <DeleteConfirmation isOpen={confirmationModal.isOpen} onClose={confirmationModal.onClose} />

src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -1,7 +1,8 @@
 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 useCustomToast from '../../hooks/useCustomToast';
 
 interface DeleteProps {
     isOpen: boolean;
@@ -9,7 +10,7 @@ interface DeleteProps {
 }
 
 const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
-    const toast = useToast();
+    const showToast = useCustomToast();
     const cancelRef = React.useRef<HTMLButtonElement | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const { handleSubmit } = useForm();
@@ -20,12 +21,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
             // TODO: Delete user account when API is ready
             onClose();
         } catch (err) {
-            toast({
+            showToast('An error occurred', 'An error occurred while deleting your account.', 'error');
-                title: "An error occurred.",
-                description: `An error occurred while deleting your account.`,
-                status: "error",
-                isClosable: true,
-            });
         } finally {
             setIsLoading(false);
         }
@@ -37,21 +33,21 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
                 isOpen={isOpen}
                 onClose={onClose}
                 leastDestructiveRef={cancelRef}
-                size={{ base: "sm", md: "md" }}
+                size={{ base: 'sm', md: 'md' }}
                 isCentered
             >
                 <AlertDialogOverlay>
-                    <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
+                    <AlertDialogContent as='form' onSubmit={handleSubmit(onSubmit)}>
                         <AlertDialogHeader>
                             Confirmation Required
                         </AlertDialogHeader>
 
                         <AlertDialogBody>
-                            All your account data will be <b>permanently deleted.</b> If you're sure, please click <b>'Confirm'</b> to proceed.
+                            All your account data will be <strong>permanently deleted.</strong> If you're sure, please click <strong>'Confirm'</strong> to proceed.
                         </AlertDialogBody>
 
                         <AlertDialogFooter gap={3}>
-                            <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
+                            <Button bg='ui.danger' color='white' _hover={{ opacity: 0.8 }} type='submit' isLoading={isLoading}>
                                 Confirm
                             </Button>
                             <Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>

src/new-frontend/src/components/UserSettings/UserInformation.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+
+import { Box, Button, Container, Flex, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
+
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { ApiError, UserOut, UserUpdateMe } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useUserStore } from '../../store/user-store';
+import { useUsersStore } from '../../store/users-store';
+
+const UserInformation: React.FC = () => {
+    const color = useColorModeValue('gray.700', 'white');
+    const showToast = useCustomToast();
+    const [editMode, setEditMode] = useState(false);
+    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserOut>();
+    const { user, editUser } = useUserStore();
+    const { getUsers } = useUsersStore();
+
+    const toggleEditMode = () => {
+        setEditMode(!editMode);
+    };
+
+    const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
+        try {
+            await editUser(data);
+            await getUsers()
+            showToast('Success!', 'User updated successfully.', 'success');
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+    }
+
+    const onCancel = () => {
+        reset();
+        toggleEditMode();
+    }
+
+    return (
+        <>
+            <Container maxW='full' as='form' onSubmit={handleSubmit(onSubmit)}>
+                <Heading size='sm' py={4}>
+                    User Information
+                </Heading>
+                <Box w={{ 'sm': 'full', 'md': '50%' }}>
+                    <FormControl>
+                        <FormLabel color={color} htmlFor='name'>Full name</FormLabel>
+                        {
+                            editMode ?
+                                <Input id='name' {...register('full_name')} defaultValue={user?.full_name} type='text' size='md' /> :
+                                <Text size='md' py={2}>
+                                    {user?.full_name || 'N/A'}
+                                </Text>
+                        }
+                    </FormControl>
+                    <FormControl mt={4}>
+                        <FormLabel color={color} htmlFor='email'>Email</FormLabel>
+                        {
+                            editMode ?
+                                <Input id='email' {...register('email')} defaultValue={user?.email} type='text' size='md' /> :
+                                <Text size='md' py={2}>
+                                    {user?.email || 'N/A'}
+                                </Text>
+                        }
+                    </FormControl>
+                    <Flex mt={4} gap={3}>
+                        <Button
+                            bg='ui.main'
+                            color='white'
+                            _hover={{ opacity: 0.8 }}
+                            onClick={toggleEditMode}
+                            type={editMode ? 'button' : 'submit'}
+                            isLoading={editMode ? isSubmitting : false}
+                        >
+                            {editMode ? 'Save' : 'Edit'}
+                        </Button>
+                        {editMode &&
+                            <Button onClick={onCancel}>
+                                Cancel
+                            </Button>}
+                    </Flex>
+                </Box>
+            </ Container>
+        </>
+    );
+}
+
+export default UserInformation;

src/new-frontend/src/hooks/useAuth.tsx

@@ -0,0 +1,33 @@
+import { useUserStore } from '../store/user-store';
+import { Body_login_login_access_token as AccessToken, LoginService } from '../client';
+import { useUsersStore } from '../store/users-store';
+import { useItemsStore } from '../store/items-store';
+
+const useAuth = () => {
+    const { user, getUser, resetUser } = useUserStore();
+    const { resetUsers } = useUsersStore();
+    const { resetItems } = useItemsStore();
+
+    const login = async (data: AccessToken) => {
+        const response = await LoginService.loginAccessToken({
+            formData: data,
+        });
+        localStorage.setItem('access_token', response.access_token);
+        await getUser();
+    };
+
+    const logout = () => {
+        localStorage.removeItem('access_token');
+        resetUser();
+        resetUsers();
+        resetItems();
+    };
+
+    const isLoggedIn = () => {
+        return user !== null;
+    };
+
+    return { login, logout, isLoggedIn };
+}
+
+export default useAuth;

src/new-frontend/src/hooks/useCustomToast.tsx

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { useToast } from '@chakra-ui/react';
+
+const useCustomToast = () => {
+    const toast = useToast();
+
+    const showToast = useCallback((title: string, description: string, status: 'success' | 'error') => {
+        toast({
+            title,
+            description,
+            status,
+            isClosable: true,
+        });
+    }, [toast]);
+
+    return showToast;
+};
+
+export default useCustomToast;

src/new-frontend/src/modals/AddUser.tsx

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast } from '@chakra-ui/react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-
-import { UserCreate } from '../client';
-import { useUsersStore } from '../store/users-store';
-
-interface AddUserProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
-const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
-    const toast = useToast();
-    const [isLoading, setIsLoading] = useState(false);
-    const { register, handleSubmit, reset } = useForm<UserCreate>();
-    const { addUser } = useUsersStore();
-
-    const onSubmit: SubmitHandler<UserCreate> = async (data) => {
-        setIsLoading(true);
-        try {
-            await addUser(data);
-            toast({
-                title: 'Success!',
-                description: 'User created successfully.',
-                status: 'success',
-                isClosable: true,
-            });
-            reset();
-            onClose();
-
-        } catch (err) {
-            toast({
-                title: 'Something went wrong.',
-                description: 'Failed to create user. Please try again.',
-                status: 'error',
-                isClosable: true,
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    }
-
-    return (
-        <>
-            <Modal
-                isOpen={isOpen}
-                onClose={onClose}
-                size={{ base: "sm", md: "md" }}
-                isCentered
-            >
-                <ModalOverlay />
-                <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
-                    {/* TODO: Check passwords */}
-                    <ModalHeader>Add User</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody pb={6}>
-                        <FormControl>
-                            <FormLabel>Email</FormLabel>
-                            <Input {...register('email')} placeholder='Email' type="email" />
-                        </FormControl>
-                        <FormControl mt={4}>
-                            <FormLabel>Full name</FormLabel>
-                            <Input {...register('full_name')} placeholder='Full name' type="text" />
-                        </FormControl>
-                        <FormControl mt={4}>
-                            <FormLabel>Set Password</FormLabel>
-                            <Input {...register('password')} placeholder='Password' type="password" />
-                        </FormControl>
-                        <FormControl mt={4}>
-                            <FormLabel>Confirm Password</FormLabel>
-                            <Input {...register('confirmPassword')} placeholder='Password' type="password" />
-                        </FormControl>
-                        <Flex>
-                            <FormControl mt={4}>
-                                <Checkbox {...register('is_superuser')} colorScheme='teal'>Is superuser?</Checkbox>
-                            </FormControl>
-                            <FormControl mt={4}>
-                                <Checkbox {...register('is_active')} colorScheme='teal'>Is active?</Checkbox>
-                            </FormControl>
-                        </Flex>
-                    </ModalBody>
-
-                    <ModalFooter gap={3}>
-                        <Button bg="ui.main" color="white" type="submit" isLoading={isLoading}>
-                            Save
-                        </Button>
-                        <Button onClick={onClose}>Cancel</Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
-        </>
-    )
-}
-
-export default AddUser;

src/new-frontend/src/modals/EditItem.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Button, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
-
-interface EditItemProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
-const EditItem: React.FC<EditItemProps> = ({ isOpen, onClose }) => {
-
-    return (
-        <>
-            <Modal
-                isOpen={isOpen}
-                onClose={onClose}
-                size={{ base: "sm", md: "md" }}
-                isCentered
-            >
-                <ModalOverlay />
-                <ModalContent>
-                    <ModalHeader>Edit Item</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody pb={6}>
-                        <FormControl>
-                            <FormLabel>Item</FormLabel>
-                            <Input placeholder='Item' type="text" />
-                        </FormControl>
-
-                        <FormControl mt={4}>
-                            <FormLabel>Description</FormLabel>
-                            <Input placeholder='Description' type="text" />
-                        </FormControl>
-                    </ModalBody>
-
-                    <ModalFooter gap={3}>
-                        <Button colorScheme='teal'>
-                            Save
-                        </Button>
-                        <Button onClick={onClose}>Cancel</Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
-        </>
-    )
-}
-
-export default EditItem;

src/new-frontend/src/modals/EditUser.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-
-interface EditUserProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-
-const EditUser: React.FC<EditUserProps> = ({ isOpen, onClose }) => {
-
-    return (
-        <>
-            <Modal
-                isOpen={isOpen}
-                onClose={onClose}
-                size={{ base: "sm", md: "md" }}
-                isCentered
-            >
-                <ModalOverlay />
-                <ModalContent>
-                    <ModalHeader>Edit User</ModalHeader>
-                    <ModalCloseButton />
-                    <ModalBody pb={6}>
-                        <FormControl>
-                            <FormLabel>Email</FormLabel>
-                            <Input placeholder='Email' type="email" />
-                        </FormControl>
-
-                        <FormControl mt={4}>
-                            <FormLabel>Full name</FormLabel>
-                            <Input placeholder='Full name' type="text" />
-                        </FormControl>
-                        <FormControl mt={4}>
-                            <FormLabel>Password</FormLabel>
-                            <Input placeholder='Password' type="password" />
-                        </FormControl>
-                        <Flex>
-                            <FormControl mt={4}>
-                                <Checkbox colorScheme='teal'>Is superuser?</Checkbox>
-                            </FormControl>
-                            <FormControl mt={4}>
-                                <Checkbox colorScheme='teal'>Is active?</Checkbox>
-                            </FormControl>
-                        </Flex>
-                    </ModalBody>
-
-                    <ModalFooter gap={3}>
-                        <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }}>
-                            Save
-                        </Button>
-                        <Button onClick={onClose}>Cancel</Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
-        </>
-    )
-}
-
-export default EditUser;

src/new-frontend/src/pages/Admin.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useState } from 'react';
 
-import { Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useToast } from '@chakra-ui/react';
+import { Badge, Box, Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
 
-import ActionsMenu from '../components/ActionsMenu';
+import { ApiError } from '../client';
-import Navbar from '../components/Navbar';
+import ActionsMenu from '../components/Common/ActionsMenu';
+import Navbar from '../components/Common/Navbar';
+import useCustomToast from '../hooks/useCustomToast';
+import { useUserStore } from '../store/user-store';
 import { useUsersStore } from '../store/users-store';
 
 const Admin: React.FC = () => {
-    const toast = useToast();
+    const showToast = useCustomToast();
     const [isLoading, setIsLoading] = useState(false);
     const { users, getUsers } = useUsersStore();
+    const { user: currentUser } = useUserStore();
 
     useEffect(() => {
         const fetchUsers = async () => {
@@ -17,12 +21,8 @@ const Admin: React.FC = () => {
             try {
                 await getUsers();
             } catch (err) {
-                toast({
+                const errDetail = (err as ApiError).body.detail;
-                    title: 'Something went wrong.',
+                showToast('Something went wrong.', `${errDetail}`, 'error');
-                    description: 'Failed to fetch users. Please try again.',
-                    status: 'error',
-                    isClosable: true,
-                });
             } finally {
                 setIsLoading(false);
             }
@@ -36,18 +36,18 @@ const Admin: React.FC = () => {
         <>
             {isLoading ? (
                 // TODO: Add skeleton
-                <Flex justify="center" align="center" height="100vh" width="full">
+                <Flex justify='center' align='center' height='100vh' width='full'>
-                    <Spinner size="xl" color='ui.main' />
+                    <Spinner size='xl' color='ui.main' />
                 </Flex>
             ) : (
                 users &&
-                <Container maxW="full">
+                <Container maxW='full'>
-                    <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
+                    <Heading size='lg' textAlign={{ base: 'center', md: 'left' }} pt={12}>
                         User Management
                     </Heading>
-                    <Navbar type={"User"} />
+                    <Navbar type={'User'} />
                     <TableContainer>
-                        <Table fontSize="md" size={{ base: "sm", md: "md" }}>
+                        <Table fontSize='md' size={{ base: 'sm', md: 'md' }}>
                             <Thead>
                                 <Tr>
                                     <Th>Full name</Th>
@@ -60,23 +60,23 @@ const Admin: React.FC = () => {
                             <Tbody>
                                 {users.map((user) => (
                                     <Tr key={user.id}>
-                                        <Td color={!user.full_name ? "gray.600" : "inherit"}>{user.full_name || "N/A"}</Td>
+                                        <Td color={!user.full_name ? 'gray.600' : 'inherit'}>{user.full_name || 'N/A'}{currentUser?.id === user.id && <Badge ml='1' colorScheme='teal'>You</Badge>}</Td>
                                         <Td>{user.email}</Td>
-                                        <Td>{user.is_superuser ? "Superuser" : "User"}</Td>
+                                        <Td>{user.is_superuser ? 'Superuser' : 'User'}</Td>
                                         <Td>
                                             <Flex gap={2}>
                                                 <Box
-                                                    w="2"
+                                                    w='2'
-                                                    h="2"
+                                                    h='2'
-                                                    borderRadius="50%"
+                                                    borderRadius='50%'
-                                                    bg={user.is_active ? "ui.success" : "ui.danger"}
+                                                    bg={user.is_active ? 'ui.success' : 'ui.danger'}
-                                                    alignSelf="center"
+                                                    alignSelf='center'
                                                 />
-                                                {user.is_active ? "Active" : "Inactive"}
+                                                {user.is_active ? 'Active' : 'Inactive'}
                                             </Flex>
                                         </Td>
                                         <Td>
-                                            <ActionsMenu type="User" id={user.id} />
+                                            <ActionsMenu type='User' id={user.id} disabled={currentUser?.id === user.id ? true : false} />
                                         </Td>
                                     </Tr>
                                 ))}

src/new-frontend/src/pages/Dashboard.tsx

@@ -10,8 +10,8 @@ const Dashboard: React.FC = () => {
 
     return (
         <>
-            <Container maxW="full" pt={12}>
+            <Container maxW='full' pt={12}>
-                <Text fontSize="2xl">Hi, {user?.full_name || user?.email} 👋🏼</Text>
+                <Text fontSize='2xl'>Hi, {user?.full_name || user?.email} 👋🏼</Text>
                 <Text>Welcome back, nice to see you again!</Text>
             </Container>
         </>

src/new-frontend/src/pages/ErrorPage.tsx

@@ -1,6 +1,5 @@
-import { Button, Container, Text } from "@chakra-ui/react";
+import { Button, Container, Text } from '@chakra-ui/react';
-
+import { Link, useRouteError } from 'react-router-dom';
-import { Link, useRouteError } from "react-router-dom";
 
 const ErrorPage: React.FC = () => {
     const error = useRouteError();
@@ -8,14 +7,14 @@ const ErrorPage: React.FC = () => {
 
     return (
         <>
-            <Container h="100vh"
+            <Container h='100vh'
-                alignItems="stretch"
+                alignItems='stretch'
-                justifyContent="center" textAlign="center" maxW="xs" centerContent>
+                justifyContent='center' textAlign='center' maxW='xs' centerContent>
-                <Text fontSize="8xl" color="ui.main" fontWeight="bold" lineHeight="1" mb={4}>Oops!</Text>
+                <Text fontSize='8xl' color='ui.main' fontWeight='bold' lineHeight='1' mb={4}>Oops!</Text>
-                <Text fontSize="md">Houston, we have a problem.</Text>
+                <Text fontSize='md'>Houston, we have a problem.</Text>
-                <Text fontSize="md">An unexpected error has occurred.</Text>
+                <Text fontSize='md'>An unexpected error has occurred.</Text>
-                <Text color="ui.danger"><i>{error.statusText || error.message}</i></Text>
+                {/* <Text color='ui.danger'><i>{error.statusText || error.message}</i></Text> */}
-                <Button as={Link} to="/" color="ui.main" borderColor="ui.main" variant="outline" mt={4}>Go back to Home</Button>
+                <Button as={Link} to='/' color='ui.main' borderColor='ui.main' variant='outline' mt={4}>Go back to Home</Button>
             </Container>
         </>
     );

src/new-frontend/src/pages/Items.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 
-import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr, useToast } from '@chakra-ui/react';
+import { Container, Flex, Heading, Spinner, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
 
-import ActionsMenu from '../components/ActionsMenu';
+import { ApiError } from '../client';
-import Navbar from '../components/Navbar';
+import ActionsMenu from '../components/Common/ActionsMenu';
+import Navbar from '../components/Common/Navbar';
+import useCustomToast from '../hooks/useCustomToast';
 import { useItemsStore } from '../store/items-store';
 
-
 const Items: React.FC = () => {
-    const toast = useToast();
+    const showToast = useCustomToast();
     const [isLoading, setIsLoading] = useState(false);
     const { items, getItems } = useItemsStore();
 
@@ -18,12 +19,8 @@ const Items: React.FC = () => {
             try {
                 await getItems();
             } catch (err) {
-                toast({
+                const errDetail = (err as ApiError).body.detail;
-                    title: 'Something went wrong.',
+                showToast('Something went wrong.', `${errDetail}`, 'error');
-                    description: 'Failed to fetch items. Please try again.',
-                    status: 'error',
-                    isClosable: true,
-                });
             } finally {
                 setIsLoading(false);
             }
@@ -38,18 +35,18 @@ const Items: React.FC = () => {
         <>
             {isLoading ? (
                 // TODO: Add skeleton
-                <Flex justify="center" align="center" height="100vh" width="full">
+                <Flex justify='center' align='center' height='100vh' width='full'>
-                    <Spinner size="xl" color='ui.main' />
+                    <Spinner size='xl' color='ui.main' />
                 </Flex>
             ) : (
                 items &&
-                <Container maxW="full">
+                <Container maxW='full'>
-                    <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
+                    <Heading size='lg' textAlign={{ base: 'center', md: 'left' }} pt={12}>
                         Items Management
                     </Heading>
-                    <Navbar type={"Item"} />
+                    <Navbar type={'Item'} />
                     <TableContainer>
-                        <Table size={{ base: "sm", md: "md" }}>
+                        <Table size={{ base: 'sm', md: 'md' }}>
                             <Thead>
                                 <Tr>
                                     <Th>ID</Th>
@@ -63,9 +60,9 @@ const Items: React.FC = () => {
                                     <Tr key={item.id}>
                                         <Td>{item.id}</Td>
                                         <Td>{item.title}</Td>
-                                        <Td color={!item.description ? "gray.600" : "inherit"}>{item.description || "N/A"}</Td>
+                                        <Td color={!item.description ? 'gray.600' : 'inherit'}>{item.description || 'N/A'}</Td>
                                         <Td>
-                                            <ActionsMenu type={"Item"} id={item.id} />
+                                            <ActionsMenu type={'Item'} id={item.id} />
                                         </Td>
                                     </Tr>
                                 ))}

src/new-frontend/src/pages/Layout.tsx

@@ -1,37 +1,26 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
+import { Flex } from '@chakra-ui/react';
 import { Outlet } from 'react-router-dom';
-import Sidebar from '../components/Sidebar';
 
-import { Flex, useToast } from '@chakra-ui/react';
+import Sidebar from '../components/Common/Sidebar';
+import UserMenu from '../components/Common/UserMenu';
 import { useUserStore } from '../store/user-store';
-import UserMenu from '../components/UserMenu';
 
 const Layout: React.FC = () => {
-    const toast = useToast();
     const { getUser } = useUserStore();
 
     useEffect(() => {
-        const fetchUser = async () => {
+        const token = localStorage.getItem('access_token');
-            const token = localStorage.getItem('access_token');
+        if (token) {
-            if (token) {
+            (async () => {
-                try {
+                await getUser();
-                    await getUser();
+            })();
-                } catch (err) {
-                    toast({
-                        title: 'Something went wrong.',
-                        description: 'Failed to fetch user. Please try again.',
-                        status: 'error',
-                        isClosable: true,
-                    });
-                }
-            }
         }
-        fetchUser();
+    }, [getUser]);
-    }, []);
 
     return (
-        <Flex maxW="large" h="auto" position="relative">
+        <Flex maxW='large' h='auto' position='relative'>
             <Sidebar />
             <Outlet />
             <UserMenu />

src/new-frontend/src/pages/Login.tsx

@@ -1,68 +1,67 @@
-import React from "react";
+import React from 'react';
 
-import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
-import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from "@chakra-ui/react";
+import { Button, Center, Container, FormControl, Icon, Image, Input, InputGroup, InputRightElement, Link, useBoolean } from '@chakra-ui/react';
-import { SubmitHandler, useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from 'react-hook-form';
-import { Link as ReactRouterLink, useNavigate } from "react-router-dom";
+import { Link as ReactRouterLink, useNavigate } from 'react-router-dom';
 
-import Logo from "../assets/images/fastapi-logo.svg";
+import Logo from '../assets/images/fastapi-logo.svg';
-import { LoginService } from "../client";
+import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token';
-import { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token";
+import useAuth from '../hooks/useAuth';
 
 const Login: React.FC = () => {
   const [show, setShow] = useBoolean();
   const navigate = useNavigate();
   const { register, handleSubmit } = useForm<AccessToken>();
+  const { login } = useAuth();
+
   const onSubmit: SubmitHandler<AccessToken> = async (data) => {
-    const response = await LoginService.loginAccessToken({
+    await login(data);
-      formData: data,
+    navigate('/');
-    });
-    localStorage.setItem("access_token", response.access_token);
-    navigate("/");
   };
 
   return (
     <>
       <Container
-        as="form"
+        as='form'
         onSubmit={handleSubmit(onSubmit)}
-        h="100vh"
+        h='100vh'
-        maxW="sm"
+        maxW='sm'
-        alignItems="stretch"
+        alignItems='stretch'
-        justifyContent="center"
+        justifyContent='center'
         gap={4}
         centerContent
       >
-        <Image src={Logo} alt="FastAPI logo" height="auto" maxW="2xs" alignSelf="center" />
+        <Image src={Logo} alt='FastAPI logo' height='auto' maxW='2xs' alignSelf='center' />
-        <FormControl id="email">
+        <FormControl id='email'>
-          <Input {...register("username")} placeholder="Email" type="text" />
+          <Input {...register('username')} placeholder='Email' type='text' />
         </FormControl>
-        <FormControl id="password">
+        <FormControl id='password'>
           <InputGroup>
             <Input
-              {...register("password")}
+              {...register('password')}
-              type={show ? "text" : "password"}
+              type={show ? 'text' : 'password'}
 
-              placeholder="Password"
+              placeholder='Password'
             />
             <InputRightElement
-              color="gray.400"
+              color='gray.400'
               _hover={{
-                cursor: "pointer",
+                cursor: 'pointer',
               }}
             >
-              <Icon onClick={setShow.toggle} aria-label={show ? "Hide password" : "Show password"}>
+              <Icon onClick={setShow.toggle} aria-label={show ? 'Hide password' : 'Show password'}>
                 {show ? <ViewOffIcon /> : <ViewIcon />}
               </Icon>
             </InputRightElement>
           </InputGroup>
           <Center>
-            <Link as={ReactRouterLink} to="/recover-password" color="blue.500" mt={2}>
+            <Link as={ReactRouterLink} to='/recover-password' color='blue.500' mt={2}>
               Forgot password?
             </Link>
           </Center>
         </FormControl>
-        <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} type="submit">
+        <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} type='submit'>
           Log In
         </Button>
       </Container>

src/new-frontend/src/pages/RecoverPassword.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
-import { Button, Container, FormControl, Heading, Input, Text, useToast } from "@chakra-ui/react";
+import { Button, Container, FormControl, Heading, Input, Text } from "@chakra-ui/react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
 import { LoginService } from "../client";
+import useCustomToast from "../hooks/useCustomToast";
 
 interface FormData {
   email: string;
@@ -11,20 +12,15 @@ interface FormData {
 
 const RecoverPassword: React.FC = () => {
   const { register, handleSubmit } = useForm<FormData>();
-  const toast = useToast();
+  const showToast = useCustomToast();
 
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const response = await LoginService.recoverPassword({
       email: data.email,
     });
-    console.log(response);
+    console.log(response)
 
-    toast({
+    showToast("Email sent.", "We sent an email with a link to get back into your account.", "success");
-      title: "Email sent.",
-      description: "We sent an email with a link to get back into your account.",
-      status: "success",
-      isClosable: true,
-    });
   };
 
   return (

src/new-frontend/src/pages/UserSettings.tsx

@@ -1,49 +1,46 @@
 import React from 'react';
 
 import { Container, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import Appearance from '../components/UserSettings/Appearance';
+import ChangePassword from '../components/UserSettings/ChangePassword';
+import DeleteAccount from '../components/UserSettings/DeleteAccount';
+import UserInformation from '../components/UserSettings/UserInformation';
+import { useUserStore } from '../store/user-store';
 
-import Appearance from '../panels/Appearance';
+const tabsConfig = [
-import ChangePassword from '../panels/ChangePassword';
+    { title: 'My profile', component: UserInformation },
-import DeleteAccount from '../panels/DeleteAccount';
+    { title: 'Password', component: ChangePassword },
-import UserInformation from '../panels/UserInformation';
+    { title: 'Appearance', component: Appearance },
-
+    { title: 'Danger zone', component: DeleteAccount },
-
+];
 
 const UserSettings: React.FC = () => {
+    const { user } = useUserStore();
+
+    const finalTabs = user?.is_superuser ? tabsConfig.slice(0, 3) : tabsConfig;
+
 
     return (
-        <>
+        <Container maxW='full'>
-            <Container maxW="full">
+            <Heading size='lg' textAlign={{ base: 'center', md: 'left' }} py={12}>
-                <Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
+                User Settings
-                    User Settings
+            </Heading>
-                </Heading>
+            <Tabs variant='enclosed'>
-                <Tabs variant='enclosed' >
+                <TabList>
-                    <TabList>
+                    {finalTabs.map((tab, index) => (
-                        <Tab>My profile</Tab>
+                        <Tab key={index}>{tab.title}</Tab>
-                        <Tab>Password</Tab>
+                    ))}
-                        <Tab>Appearance</Tab>
+                </TabList>
-                        <Tab>Danger zone</Tab>
+                <TabPanels>
-                    </TabList>
+                    {finalTabs.map((tab, index) => (
-                    <TabPanels>
+                        <TabPanel key={index}>
-                        <TabPanel>
+                            <tab.component />
-                            <UserInformation />
                         </TabPanel>
-                        <TabPanel>
+                    ))}
-                            <ChangePassword />
+                </TabPanels>
-                        </TabPanel>
+            </Tabs>
-                        <TabPanel>
+        </Container>
-                            <Appearance />
-                        </TabPanel>
-                        <TabPanel>
-                            <DeleteAccount />
-                        </TabPanel>
-
-                    </TabPanels>
-                </Tabs>
-            </Container>
-        </>
     );
 };
 
-export default UserSettings;
+export default UserSettings;
-

src/new-frontend/src/panels/ChangePassword.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
-
-const ChangePassword: React.FC = () => {
-    const color = useColorModeValue("gray.700", "white");
-
-    return (
-        <>
-            <Container maxW="full">
-                <Heading size="sm" py={4}>
-                    Change Password
-                </Heading>
-                <Box as="form" display="flex" flexDirection="column" alignItems="start">
-                    <FormControl>
-                        <FormLabel color={color}>Old password</FormLabel>
-                        <Input placeholder='Password' type="password" />
-                    </FormControl>
-                    <FormControl mt={4}>
-                        <FormLabel color={color}>New password</FormLabel>
-                        <Input placeholder='Password' type="password" />
-                    </FormControl>
-                    <FormControl mt={4}>
-                        <FormLabel color={color}>Confirm new password</FormLabel>
-                        <Input placeholder='Password' type="password" />
-                    </FormControl>
-                    <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} type="submit">
-                        Save
-                    </Button>
-                </Box>
-            </ Container>
-        </>
-    );
-}
-export default ChangePassword;

src/new-frontend/src/panels/UserInformation.tsx

@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button, Container, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
-
-import { useUserStore } from '../store/user-store';
-
-const UserInformation: React.FC = () => {
-    const color = useColorModeValue("gray.700", "white");
-    const [editMode, setEditMode] = useState(false);
-    const { user } = useUserStore();
-
-
-    const toggleEditMode = () => {
-        setEditMode(!editMode);
-    };
-
-    return (
-        <>
-            <Container maxW="full">
-                <Heading size="sm" py={4}>
-                    User Information
-                </Heading>
-                <FormControl>
-                    <FormLabel color={color}>Full name</FormLabel>
-                    {
-                        editMode ?
-                            <Input placeholder={user?.full_name || "Full name"} type="text" size="md" /> :
-                            <Text size="md" py={2}>
-                                {user?.full_name || "N/A"}
-                            </Text>
-                    }
-                </FormControl>
-                <FormControl mt={4}>
-                    <FormLabel color={color}>Email</FormLabel>
-                    {
-                        editMode ?
-                            <Input placeholder={user?.email} type="text" size="md" /> :
-                            <Text size="md" py={2}>
-                                {user?.email || "N/A"}
-                            </Text>
-                    }
-                </FormControl>
-                <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} onClick={toggleEditMode}>
-                    {editMode ? "Save" : "Edit"}
-                </Button>
-            </ Container>
-        </>
-    );
-}
-export default UserInformation;

src/new-frontend/src/store/items-store.tsx

@@ -1,11 +1,13 @@
-import { create } from "zustand";
+import { create } from 'zustand';
-import { ItemCreate, ItemOut, ItemsService } from "../client";
+import { ItemCreate, ItemOut, ItemUpdate, ItemsService } from '../client';
 
-interface ItemsStore { 
+interface ItemsStore {
     items: ItemOut[];
     getItems: () => Promise<void>;
     addItem: (item: ItemCreate) => Promise<void>;
+    editItem: (id: number, item: ItemUpdate) => Promise<void>;
     deleteItem: (id: number) => Promise<void>;
+    resetItems: () => void;
 }
 
 export const useItemsStore = create<ItemsStore>((set) => ({
@@ -15,11 +17,20 @@ export const useItemsStore = create<ItemsStore>((set) => ({
         set({ items: itemsResponse });
     },
     addItem: async (item: ItemCreate) => {
-        const itemResponse = await ItemsService.createItem({ requestBody: item});
+        const itemResponse = await ItemsService.createItem({ requestBody: item });
         set((state) => ({ items: [...state.items, itemResponse] }));
     },
+    editItem: async (id: number, item: ItemUpdate) => {
+        const itemResponse = await ItemsService.updateItem({ id: id, requestBody: item });
+        set((state) => ({
+            items: state.items.map((item) => (item.id === id ? itemResponse : item))
+        }));
+    },
     deleteItem: async (id: number) => {
         await ItemsService.deleteItem({ id });
         set((state) => ({ items: state.items.filter((item) => item.id !== id) }));
+    },
+    resetItems: () => {
+        set({ items: [] });
     }
 }));

src/new-frontend/src/store/user-store.tsx

@@ -1,9 +1,11 @@
-import { create } from "zustand";
+import { create } from 'zustand';
-import { UserOut, UsersService } from "../client";
+import { UpdatePassword, UserOut, UserUpdateMe, UsersService } from '../client';
 
 interface UserStore {
     user: UserOut | null;
     getUser: () => Promise<void>;
+    editUser: (user: UserUpdateMe) => Promise<void>;
+    editPassword: (password: UpdatePassword) => Promise<void>;
     resetUser: () => void;
 }
 
@@ -13,6 +15,13 @@ export const useUserStore = create<UserStore>((set) => ({
         const user = await UsersService.readUserMe();
         set({ user });
     },
+    editUser: async (user: UserUpdateMe) => {
+        const updatedUser = await UsersService.updateUserMe({ requestBody: user });
+        set((state) => ({ user: { ...state.user, ...updatedUser } }));
+    },
+    editPassword: async (password: UpdatePassword) => {
+        await UsersService.updatePasswordMe({ requestBody: password });
+    },
     resetUser: () => {
         set({ user: null });
     }

src/new-frontend/src/store/users-store.tsx

@@ -1,11 +1,13 @@
 import { create } from "zustand";
-import { UserCreate, UserOut, UsersService } from "../client";
+import { UserCreate, UserOut, UserUpdate, UsersService } from "../client";
 
 interface UsersStore {
     users: UserOut[];
     getUsers: () => Promise<void>;
     addUser: (user: UserCreate) => Promise<void>;
+    editUser: (id: number, user: UserUpdate) => Promise<void>;
     deleteUser: (id: number) => Promise<void>;
+    resetUsers: () => void;
 }
 
 export const useUsersStore = create<UsersStore>((set) => ({
@@ -18,8 +20,17 @@ export const useUsersStore = create<UsersStore>((set) => ({
         const userResponse = await UsersService.createUser({ requestBody: user });
         set((state) => ({ users: [...state.users, userResponse] }));
     },
+    editUser: async (id: number, user: UserUpdate) => {
+        const userResponse = await UsersService.updateUser({ userId: id, requestBody: user });
+        set((state) => ({
+            users: state.users.map((user) => (user.id === id ? userResponse : user))
+        }));
+    },
     deleteUser: async (id: number) => {
         await UsersService.deleteUser({ userId: id });
         set((state) => ({ users: state.users.filter((user) => user.id !== id) }));
+    },
+    resetUsers: () => {
+        set({ users: [] });
     }
 }))