🎨 Format with Biome (#1097)

frontend/src/components/Common/ActionsMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Button,
   Menu,
@@ -6,14 +5,15 @@ import {
   MenuItem,
   MenuList,
   useDisclosure,
-} from '@chakra-ui/react'
-import { BsThreeDotsVertical } from 'react-icons/bs'
-import { FiEdit, FiTrash } from 'react-icons/fi'
+} from "@chakra-ui/react"
+import type React from "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'
-import { ItemOut, UserOut } from '../../client'
+import type { ItemOut, UserOut } from "../../client"
+import EditUser from "../Admin/EditUser"
+import EditItem from "../Items/EditItem"
+import Delete from "./DeleteAlert"
 
 interface ActionsMenuProps {
   type: string
@@ -49,7 +49,7 @@ const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
             Delete {type}
           </MenuItem>
         </MenuList>
-        {type === 'User' ? (
+        {type === "User" ? (
           <EditUser
             user={value as UserOut}
             isOpen={editUserModal.isOpen}

frontend/src/components/Common/DeleteAlert.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   AlertDialog,
   AlertDialogBody,
@@ -7,12 +6,13 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
-} from '@chakra-ui/react'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import React from "react"
+import { useForm } from "react-hook-form"
+import { useMutation, useQueryClient } from "react-query"
 
-import { ItemsService, UsersService } from '../../client'
-import useCustomToast from '../../hooks/useCustomToast'
+import { ItemsService, UsersService } from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
 
 interface DeleteProps {
   type: string
@@ -31,9 +31,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
   } = useForm()
 
   const deleteEntity = async (id: number) => {
-    if (type === 'Item') {
+    if (type === "Item") {
       await ItemsService.deleteItem({ id: id })
-    } else if (type === 'User') {
+    } else if (type === "User") {
       await UsersService.deleteUser({ userId: id })
     } else {
       throw new Error(`Unexpected type: ${type}`)
@@ -43,21 +43,21 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
   const mutation = useMutation(deleteEntity, {
     onSuccess: () => {
       showToast(
-        'Success',
+        "Success",
         `The ${type.toLowerCase()} was deleted successfully.`,
-        'success',
+        "success",
       )
       onClose()
     },
     onError: () => {
       showToast(
-        'An error occurred.',
+        "An error occurred.",
         `An error occurred while deleting the ${type.toLowerCase()}.`,
-        'error',
+        "error",
       )
     },
     onSettled: () => {
-      queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users')
+      queryClient.invalidateQueries(type === "Item" ? "items" : "users")
     },
   })
 
@@ -71,7 +71,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
         isOpen={isOpen}
         onClose={onClose}
         leastDestructiveRef={cancelRef}
-        size={{ base: 'sm', md: 'md' }}
+        size={{ base: "sm", md: "md" }}
         isCentered
       >
         <AlertDialogOverlay>
@@ -79,9 +79,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
             <AlertDialogHeader>Delete {type}</AlertDialogHeader>
 
             <AlertDialogBody>
-              {type === 'User' && (
+              {type === "User" && (
                 <span>
-                  All items associated with this user will also be{' '}
+                  All items associated with this user will also be{" "}
                   <strong>permantly deleted. </strong>
                 </span>
               )}

frontend/src/components/Common/Navbar.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
-import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react'
-import { FaPlus } from 'react-icons/fa'
+import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
+import type React from "react"
+import { FaPlus } from "react-icons/fa"
 
-import AddUser from '../Admin/AddUser'
-import AddItem from '../Items/AddItem'
+import AddUser from "../Admin/AddUser"
+import AddItem from "../Items/AddItem"
 
 interface NavbarProps {
   type: string
@@ -26,8 +26,8 @@ const Navbar: React.FC<NavbarProps> = ({ type }) => {
         <Button
           variant="primary"
           gap={1}
-          fontSize={{ base: 'sm', md: 'inherit' }}
-          onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}
+          fontSize={{ base: "sm", md: "inherit" }}
+          onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
         >
           <Icon as={FaPlus} /> Add {type}
         </Button>

frontend/src/components/Common/NotFound.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Button, Container, Text } from '@chakra-ui/react'
-import { Link } from '@tanstack/react-router'
+import { Button, Container, Text } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
+import type React from "react"
 
 const NotFound: React.FC = () => {
   return (

frontend/src/components/Common/Sidebar.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   Drawer,
@@ -12,21 +11,22 @@ import {
   Text,
   useColorModeValue,
   useDisclosure,
-} from '@chakra-ui/react'
-import { FiLogOut, FiMenu } from 'react-icons/fi'
-import { useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { FiLogOut, FiMenu } from "react-icons/fi"
+import { useQueryClient } from "react-query"
 
-import Logo from '../../assets/images/fastapi-logo.svg'
-import { UserOut } from '../../client'
-import useAuth from '../../hooks/useAuth'
-import SidebarItems from './SidebarItems'
+import Logo from "../../assets/images/fastapi-logo.svg"
+import type { UserOut } from "../../client"
+import useAuth from "../../hooks/useAuth"
+import SidebarItems from "./SidebarItems"
 
 const Sidebar: React.FC = () => {
   const queryClient = useQueryClient()
-  const bgColor = useColorModeValue('ui.white', 'ui.dark')
-  const textColor = useColorModeValue('ui.dark', 'ui.white')
-  const secBgColor = useColorModeValue('ui.secondary', 'ui.darkSlate')
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const bgColor = useColorModeValue("ui.white", "ui.dark")
+  const textColor = useColorModeValue("ui.dark", "ui.white")
+  const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { logout } = useAuth()
 
@@ -39,7 +39,7 @@ const Sidebar: React.FC = () => {
       {/* Mobile */}
       <IconButton
         onClick={onOpen}
-        display={{ base: 'flex', md: 'none' }}
+        display={{ base: "flex", md: "none" }}
         aria-label="Open Menu"
         position="absolute"
         fontSize="20px"
@@ -84,7 +84,7 @@ const Sidebar: React.FC = () => {
         h="100vh"
         position="sticky"
         top="0"
-        display={{ base: 'none', md: 'flex' }}
+        display={{ base: "none", md: "flex" }}
       >
         <Flex
           flexDir="column"

frontend/src/components/Common/SidebarItems.tsx

@@ -1,15 +1,15 @@
-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 } from '@tanstack/react-router'
-import { useQueryClient } from 'react-query'
+import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
+import type React from "react"
+import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
+import { useQueryClient } from "react-query"
 
-import { UserOut } from '../../client'
+import type { UserOut } from "../../client"
 
 const items = [
-  { icon: FiHome, title: 'Dashboard', path: '/' },
-  { icon: FiBriefcase, title: 'Items', path: '/items' },
-  { icon: FiSettings, title: 'User Settings', path: '/settings' },
+  { icon: FiHome, title: "Dashboard", path: "/" },
+  { icon: FiBriefcase, title: "Items", path: "/items" },
+  { icon: FiSettings, title: "User Settings", path: "/settings" },
 ]
 
 interface SidebarItemsProps {
@@ -18,12 +18,12 @@ interface SidebarItemsProps {
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
   const queryClient = useQueryClient()
-  const textColor = useColorModeValue('ui.main', 'ui.white')
-  const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
-  const currentUser = queryClient.getQueryData<UserOut>('currentUser')
+  const textColor = useColorModeValue("ui.main", "ui.white")
+  const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
+  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
 
   const finalItems = currentUser?.is_superuser
-    ? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }]
+    ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
     : items
 
   const listItems = finalItems.map((item) => (
@@ -36,7 +36,7 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
       activeProps={{
         style: {
           background: bgActive,
-          borderRadius: '12px',
+          borderRadius: "12px",
         },
       }}
       color={textColor}

frontend/src/components/Common/UserMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Box,
   IconButton,
@@ -6,12 +5,13 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-} from '@chakra-ui/react'
-import { FaUserAstronaut } from 'react-icons/fa'
-import { FiLogOut, FiUser } from 'react-icons/fi'
+} from "@chakra-ui/react"
+import type React from "react"
+import { FaUserAstronaut } from "react-icons/fa"
+import { FiLogOut, FiUser } from "react-icons/fi"
 
-import useAuth from '../../hooks/useAuth'
-import { Link } from '@tanstack/react-router'
+import { Link } from "@tanstack/react-router"
+import useAuth from "../../hooks/useAuth"
 
 const UserMenu: React.FC = () => {
   const { logout } = useAuth()
@@ -24,7 +24,7 @@ const UserMenu: React.FC = () => {
     <>
       {/* Desktop */}
       <Box
-        display={{ base: 'none', md: 'block' }}
+        display={{ base: "none", md: "block" }}
         position="fixed"
         top={4}
         right={4}