♻ Move project source files to top level from src, update Sentry dependency (#630)

Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>

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

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { Button, Checkbox, Flex, FormControl, FormErrorMessage, 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 {
+    confirm_password: string;
+
+}
+
+const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserCreateForm>({
+        mode: 'onBlur',
+        criteriaMode: 'all',
+        defaultValues: {
+            email: '',
+            full_name: '',
+            password: '',
+            confirm_password: '',
+            is_superuser: false,
+            is_active: false
+        }
+    });
+    const { addUser } = useUsersStore();
+
+    const onSubmit: SubmitHandler<UserCreateForm> = async (data) => {
+        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');
+        }
+    }
+
+    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 isRequired isInvalid={!!errors.email}>
+                            <FormLabel htmlFor='email'>Email</FormLabel>
+                            <Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
+                            {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4} isInvalid={!!errors.full_name}>
+                            <FormLabel htmlFor='name'>Full name</FormLabel>
+                            <Input id='name' {...register('full_name')} placeholder='Full name' type='text' />
+                            {errors.full_name && <FormErrorMessage>{errors.full_name.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4} isRequired isInvalid={!!errors.password}>
+                            <FormLabel htmlFor='password'>Set Password</FormLabel>
+                            <Input id='password' {...register('password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                            {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
+                            <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
+                            <Input id='confirm_password' {...register('confirm_password', {
+                                required: 'Please confirm your password',
+                                validate: value => value === getValues().password || 'The passwords do not match'
+                            })} placeholder='Password' type='password' />
+                            {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
+                        </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' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+                            Save
+                        </Button>
+                        <Button onClick={onClose}>Cancel</Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+export default AddUser;

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

@@ -0,0 +1,114 @@
+import React from 'react';
+
+import { Button, Checkbox, Flex, FormControl, FormErrorMessage, 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 { editUser, users } = useUsersStore();
+    const currentUser = users.find((user) => user.id === user_id);
+    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UserUpdateForm>({
+        mode: 'onBlur',
+        criteriaMode: 'all',
+        defaultValues: {
+            email: currentUser?.email,
+            full_name: currentUser?.full_name,
+            password: '',
+            confirm_password: '',
+            is_superuser: currentUser?.is_superuser,
+            is_active: currentUser?.is_active
+        }
+    });
+
+
+    const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
+        try {
+            if (data.password === '') {
+                delete data.password;
+            }
+            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');
+        }
+    }
+
+    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 isInvalid={!!errors.email}>
+                            <FormLabel htmlFor='email'>Email</FormLabel>
+                            <Input id='email' {...register('email', { pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} placeholder='Email' type='email' />
+                            {errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='name'>Full name</FormLabel>
+                            <Input id="name" {...register('full_name')} type='text' />
+                        </FormControl>
+                        <FormControl mt={4} isInvalid={!!errors.password}>
+                            <FormLabel htmlFor='password'>Set Password</FormLabel>
+                            <Input id='password' {...register('password', { minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='••••••••' type='password' />
+                            {errors.password && <FormErrorMessage>{errors.password.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4} isInvalid={!!errors.confirm_password}>
+                            <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
+                            <Input id='confirm_password' {...register('confirm_password', {
+                                validate: value => value === getValues().password || 'The passwords do not match'
+                            })} placeholder='••••••••' type='password' />
+                            {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
+                        </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' _hover={{ opacity: 0.8 }} type='submit' isLoading={isSubmitting}>
+                            Save
+                        </Button>
+                        <Button onClick={onCancel}>Cancel</Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+export default EditUser;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Button, Menu, MenuButton, MenuItem, MenuList, useDisclosure } from '@chakra-ui/react';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { FiEdit, FiTrash } from 'react-icons/fi';
+
+import EditUser from '../Admin/EditUser';
+import EditItem from '../Items/EditItem';
+import Delete from './DeleteAlert';
+
+
+interface ActionsMenuProps {
+    type: string;
+    id: number;
+    disabled?: boolean;
+}
+
+const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id, disabled }) => {
+    const editUserModal = useDisclosure();
+    const deleteModal = useDisclosure();
+
+    return (
+        <>
+            <Menu>
+                <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>
+                </MenuList>
+                {
+                    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>
+        </>
+    );
+};
+
+export default ActionsMenu;

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
+import { useUsersStore } from '../../store/users-store';
+
+interface DeleteProps {
+    type: string;
+    id: number
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const cancelRef = React.useRef<HTMLButtonElement | null>(null);
+    const { handleSubmit, formState: {isSubmitting} } = useForm();
+    const { deleteItem } = useItemsStore();
+    const { deleteUser } = useUsersStore();
+
+    const onSubmit = async () => {
+        try {
+            type === 'Item' ? await deleteItem(id) : await deleteUser(id);
+            showToast('Success', `The ${type.toLowerCase()} was deleted successfully.`, 'success');
+            onClose();
+        } catch (err) {
+            showToast('An error occurred.', `An error occurred while deleting the ${type.toLowerCase()}.`, 'error');
+        }
+    }
+
+    return (
+        <>
+            <AlertDialog
+                isOpen={isOpen}
+                onClose={onClose}
+                leastDestructiveRef={cancelRef}
+                size={{ base: "sm", md: "md" }}
+                isCentered
+            >
+                <AlertDialogOverlay>
+                    <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
+                        <AlertDialogHeader>
+                            Delete {type}
+                        </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>
+
+                        <AlertDialogFooter gap={3}>
+                            <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isSubmitting}>
+                                Delete
+                            </Button>
+                            <Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>
+                                Cancel
+                            </Button>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialogOverlay>
+            </AlertDialog>
+        </>
+    )
+}
+
+export default Delete;

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

@@ -0,0 +1,36 @@
+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 '../Admin/AddUser';
+import AddItem from '../Items/AddItem';
+
+interface NavbarProps {
+    type: string;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ type }) => {
+    const addUserModal = useDisclosure();
+    const addItemModal = useDisclosure();
+
+    return (
+        <>
+            <Flex py={8} gap={4}>
+                <InputGroup w={{ base: "100%", md: "auto" }}>
+                    <InputLeftElement pointerEvents="none">
+                        <Icon as={FaSearch} color="gray.400" />
+                    </InputLeftElement>
+                    <Input type="text" placeholder="Search" fontSize={{ base: "sm", md: "inherit" }} borderRadius="8px" />
+                </InputGroup>
+                <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} gap={1} fontSize={{ base: "sm", md: "inherit" }} onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}>
+                    <Icon as={FaPlus} /> Add {type}
+                </Button>
+                <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
+                <AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
+            </Flex >
+        </>
+    );
+};
+
+export default Navbar;

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

@@ -0,0 +1,68 @@
+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 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 handleLogout = async () => {
+        logout()
+    };
+
+
+    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;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+
+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';
+
+const items = [
+    { icon: FiHome, title: 'Dashboard', path: "/" },
+    { icon: FiBriefcase, title: 'Items', path: "/items" },
+    { icon: FiSettings, title: 'User Settings', path: "/settings" },
+];
+
+interface SidebarItemsProps {
+    onClose?: () => void;
+}
+
+const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
+    const textColor = useColorModeValue("ui.main", "#E2E8F0");
+    const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
+    const location = useLocation();
+    const { user } = useUserStore();
+
+    const finalItems = user?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: "/admin" }] : items;
+
+    const listItems = finalItems.map((item) => (
+        <Flex
+            as={Link}
+            to={item.path}
+            w="100%"
+            p={2}
+            key={item.title}
+            style={location.pathname === item.path ? {
+                background: bgActive,
+                borderRadius: "12px",
+            } : {}}
+            color={textColor}
+            onClick={onClose}
+        >
+            <Icon as={item.icon} alignSelf="center" />
+            <Text ml={2}>{item.title}</Text>
+        </Flex>
+    ));
+
+    return (
+        <>
+            <Box>
+                {listItems}
+            </Box>
+
+        </>
+    );
+};
+
+export default SidebarItems;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Box, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { FaUserAstronaut } from 'react-icons/fa';
+import { FiLogOut, FiUser } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+
+import useAuth from '../../hooks/useAuth';
+
+const UserMenu: React.FC = () => {
+    const { logout } = useAuth();
+
+    const handleLogout = async () => {
+        logout()
+    };
+
+    return (
+        <>
+            {/* 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' />}
+                        bg='ui.main'
+                        isRound
+                    />
+                    <MenuList>
+                        <MenuItem icon={<FiUser fontSize='18px' />} as={Link} to='settings'>
+                            My profile
+                        </MenuItem>
+                        <MenuItem icon={<FiLogOut fontSize='18px' />} onClick={handleLogout} color='ui.danger' fontWeight='bold'>
+                            Log out
+                        </MenuItem>
+                    </MenuList>
+                </Menu>
+            </Box>
+        </>
+    );
+};
+
+export default UserMenu;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Button, FormControl, FormErrorMessage, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import { ApiError, ItemCreate } from '../../client';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useItemsStore } from '../../store/items-store';
+
+interface AddItemProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<ItemCreate>({
+        mode: 'onBlur',
+        criteriaMode: 'all',
+        defaultValues: {
+            title: '',
+            description: '',
+        },
+    });
+    const { addItem } = useItemsStore();
+
+    const onSubmit: SubmitHandler<ItemCreate> = async (data) => {
+        try {
+            await addItem(data);
+            showToast('Success!', 'Item created successfully.', 'success');
+            reset();
+            onClose();
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+    };
+
+    return (
+        <>
+            <Modal
+                isOpen={isOpen}
+                onClose={onClose}
+                size={{ base: 'sm', md: 'md' }}
+                isCentered
+            >
+                <ModalOverlay />
+                <ModalContent as='form' onSubmit={handleSubmit(onSubmit)}>
+                    <ModalHeader>Add Item</ModalHeader>
+                    <ModalCloseButton />
+                    <ModalBody pb={6}>
+                        <FormControl isRequired isInvalid={!!errors.title}>
+                            <FormLabel htmlFor='title'>Title</FormLabel>
+                            <Input
+                                id='title'
+                                {...register('title', { required: 'Title is required.' })}
+                                placeholder='Title'
+                                type='text'
+                            />
+                            {errors.title && <FormErrorMessage>{errors.title.message}</FormErrorMessage>}
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='description'>Description</FormLabel>
+                            <Input
+                                id='description'
+                                {...register('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={onClose}>
+                            Cancel
+                        </Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    );
+};
+
+export default AddItem;

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

@@ -0,0 +1,73 @@
+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 { editItem, items } = useItemsStore();
+    const currentItem = items.find((item) => item.id === id);
+    const { register, handleSubmit, reset, formState: { isSubmitting }, } = useForm<ItemUpdate>({ defaultValues: { title: currentItem?.title, description: currentItem?.description } });
+
+    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')} type='text' />
+                        </FormControl>
+                        <FormControl mt={4}>
+                            <FormLabel htmlFor='description'>Description</FormLabel>
+                            <Input id='description' {...register('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;

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

@@ -0,0 +1,29 @@
+import React from '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'>
+                <Heading size='sm' py={4}>
+                    Appearance
+                </Heading>
+                <RadioGroup onChange={toggleColorMode} value={colorMode}>
+                    <Stack>
+                        {/* TODO: Add system default option */}
+                        <Radio value='light' colorScheme='teal'>
+                            Light mode<Badge ml='1' colorScheme='teal'>Default</Badge>
+                        </Radio>
+                        <Radio value='dark' colorScheme='teal'>
+                            Dark mode
+                        </Radio>
+                    </Stack>
+                </RadioGroup>
+            </Container>
+        </>
+    );
+}
+export default Appearance;

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;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Button, Container, Heading, Text, useDisclosure } from '@chakra-ui/react';
+
+import DeleteConfirmation from './DeleteConfirmation';
+
+const DeleteAccount: React.FC = () => {
+    const confirmationModal = useDisclosure();
+
+    return (
+        <>
+            <Container maxW='full'>
+                <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}>
+                    Delete
+                </Button>
+                <DeleteConfirmation isOpen={confirmationModal.isOpen} onClose={confirmationModal.onClose} />
+            </ Container>
+        </>
+    );
+}
+export default DeleteAccount;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { ApiError } from '../../client';
+import useAuth from '../../hooks/useAuth';
+import useCustomToast from '../../hooks/useCustomToast';
+import { useUserStore } from '../../store/user-store';
+
+interface DeleteProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
+    const showToast = useCustomToast();
+    const cancelRef = React.useRef<HTMLButtonElement | null>(null);
+    const { handleSubmit, formState: { isSubmitting } } = useForm();
+    const { user, deleteUser } = useUserStore();
+    const { logout } = useAuth();
+
+    const onSubmit = async () => {
+        try {
+            await deleteUser(user!.id);
+            logout();
+            onClose();
+            showToast('Success', 'Your account has been successfully deleted.', 'success');
+        } catch (err) {
+            const errDetail = (err as ApiError).body.detail;
+            showToast('Something went wrong.', `${errDetail}`, 'error');
+        }
+    }
+
+    return (
+        <>
+            <AlertDialog
+                isOpen={isOpen}
+                onClose={onClose}
+                leastDestructiveRef={cancelRef}
+                size={{ base: 'sm', md: 'md' }}
+                isCentered
+            >
+                <AlertDialogOverlay>
+                    <AlertDialogContent as='form' onSubmit={handleSubmit(onSubmit)}>
+                        <AlertDialogHeader>
+                            Confirmation Required
+                        </AlertDialogHeader>
+
+                        <AlertDialogBody>
+                            All your account data will be <strong>permanently deleted.</strong> If you are 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={isSubmitting}>
+                                Confirm
+                            </Button>
+                            <Button ref={cancelRef} onClick={onClose} isDisabled={isSubmitting}>
+                                Cancel
+                            </Button>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialogOverlay>
+            </AlertDialog >
+        </>
+    )
+}
+
+export default DeleteConfirmation;
+
+
+
+

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} isDisabled={isSubmitting}>
+                                Cancel
+                            </Button>}
+                    </Flex>
+                </Box>
+            </ Container>
+        </>
+    );
+}
+
+export default UserInformation;