🔧 Configure path alias for cleaner imports (#1497)

frontend/src/components/Admin/AddUser.tsx

@@ -1,6 +1,10 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { Controller, type SubmitHandler, useForm } from "react-hook-form"
 
+import { type UserCreate, UsersService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import {
   Button,
   DialogActionTrigger,
@@ -12,10 +16,6 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaPlus } from "react-icons/fa"
-import { type UserCreate, UsersService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
 import { Checkbox } from "../ui/checkbox"
 import {
   DialogBody,

frontend/src/components/Admin/DeleteUser.tsx

@@ -3,7 +3,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { FiTrash2 } from "react-icons/fi"
-import { UsersService } from "../../client"
+
+import { UsersService } from "@/client"
 import {
   DialogActionTrigger,
   DialogBody,
@@ -13,8 +14,8 @@ import {
   DialogHeader,
   DialogRoot,
   DialogTrigger,
-} from "../../components/ui/dialog"
-import useCustomToast from "../../hooks/useCustomToast"
+} from "@/components/ui/dialog"
+import useCustomToast from "@/hooks/useCustomToast"
 
 const DeleteUser = ({ id }: { id: string }) => {
   const [isOpen, setIsOpen] = useState(false)

frontend/src/components/Admin/EditUser.tsx

@@ -13,10 +13,11 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaExchangeAlt } from "react-icons/fa"
-import { type UserPublic, type UserUpdate, UsersService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
+
+import { type UserPublic, type UserUpdate, UsersService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import { Checkbox } from "../ui/checkbox"
 import {
   DialogBody,

frontend/src/components/Common/ItemActionsMenu.tsx

@@ -2,7 +2,7 @@ import { IconButton } from "@chakra-ui/react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"
 
-import type { ItemPublic } from "../../client"
+import type { ItemPublic } from "@/client"
 import DeleteItem from "../Items/DeleteItem"
 import EditItem from "../Items/EditItem"
 

frontend/src/components/Common/Navbar.tsx

@@ -1,5 +1,6 @@
 import { Flex, Image, useBreakpointValue } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
+
 import Logo from "/assets/images/fastapi-logo.svg"
 import UserMenu from "./UserMenu"
 

frontend/src/components/Common/Sidebar.tsx

@@ -2,10 +2,10 @@ import { Box, Flex, IconButton, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { FaBars } from "react-icons/fa"
-
 import { FiLogOut } from "react-icons/fi"
-import type { UserPublic } from "../../client"
-import useAuth from "../../hooks/useAuth"
+
+import type { UserPublic } from "@/client"
+import useAuth from "@/hooks/useAuth"
 import {
   DrawerBackdrop,
   DrawerBody,

frontend/src/components/Common/SidebarItems.tsx

@@ -1,10 +1,10 @@
 import { Box, Flex, Icon, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
 import { Link as RouterLink } from "@tanstack/react-router"
-
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
 import type { IconType } from "react-icons/lib"
-import type { UserPublic } from "../../client"
+
+import type { UserPublic } from "@/client"
 
 const items = [
   { icon: FiHome, title: "Dashboard", path: "/" },

frontend/src/components/Common/UserActionsMenu.tsx

@@ -2,7 +2,7 @@ import { IconButton } from "@chakra-ui/react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import { MenuContent, MenuRoot, MenuTrigger } from "../ui/menu"
 
-import type { UserPublic } from "../../client"
+import type { UserPublic } from "@/client"
 import DeleteUser from "../Admin/DeleteUser"
 import EditUser from "../Admin/EditUser"
 

frontend/src/components/Common/UserMenu.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, Flex, Text } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
 import { FaUserAstronaut } from "react-icons/fa"
-
 import { FiLogOut, FiUser } from "react-icons/fi"
-import useAuth from "../../hooks/useAuth"
+
+import useAuth from "@/hooks/useAuth"
 import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from "../ui/menu"
 
 const UserMenu = () => {

frontend/src/components/Items/AddItem.tsx

@@ -11,10 +11,11 @@ import {
 } from "@chakra-ui/react"
 import { useState } from "react"
 import { FaPlus } from "react-icons/fa"
-import { type ItemCreate, ItemsService } from "../../client"
-import type { ApiError } from "../../client/core/ApiError"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+
+import { type ItemCreate, ItemsService } from "@/client"
+import type { ApiError } from "@/client/core/ApiError"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 import {
   DialogBody,
   DialogCloseTrigger,

frontend/src/components/Items/DeleteItem.tsx

@@ -3,7 +3,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { FiTrash2 } from "react-icons/fi"
-import { ItemsService } from "../../client"
+
+import { ItemsService } from "@/client"
 import {
   DialogActionTrigger,
   DialogBody,
@@ -13,8 +14,8 @@ import {
   DialogHeader,
   DialogRoot,
   DialogTrigger,
-} from "../../components/ui/dialog"
-import useCustomToast from "../../hooks/useCustomToast"
+} from "@/components/ui/dialog"
+import useCustomToast from "@/hooks/useCustomToast"
 
 const DeleteItem = ({ id }: { id: string }) => {
   const [isOpen, setIsOpen] = useState(false)

frontend/src/components/Items/EditItem.tsx

@@ -10,9 +10,10 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { type SubmitHandler, useForm } from "react-hook-form"
 import { FaExchangeAlt } from "react-icons/fa"
-import { type ApiError, type ItemPublic, ItemsService } from "../../client"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+
+import { type ApiError, type ItemPublic, ItemsService } from "@/client"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 import {
   DialogBody,
   DialogCloseTrigger,

frontend/src/components/UserSettings/Appearance.tsx

@@ -1,6 +1,7 @@
 import { Container, Heading, Stack } from "@chakra-ui/react"
 import { useTheme } from "next-themes"
-import { Radio, RadioGroup } from "../../components/ui/radio"
+
+import { Radio, RadioGroup } from "@/components/ui/radio"
 
 const Appearance = () => {
   const { theme, setTheme } = useTheme()

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -1,11 +1,11 @@
 import { Box, Button, Container, Heading, VStack } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock } from "react-icons/fi"
-import { type ApiError, type UpdatePassword, UsersService } from "../../client"
-import useCustomToast from "../../hooks/useCustomToast"
-import { confirmPasswordRules, handleError, passwordRules } from "../../utils"
+
+import { type ApiError, type UpdatePassword, UsersService } from "@/client"
+import useCustomToast from "@/hooks/useCustomToast"
+import { confirmPasswordRules, handleError, passwordRules } from "@/utils"
 import { PasswordInput } from "../ui/password-input"
 
 interface UpdatePasswordForm extends UpdatePassword {

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -2,7 +2,8 @@ import { Button, ButtonGroup, Text } from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
-import { type ApiError, UsersService } from "../../client"
+
+import { type ApiError, UsersService } from "@/client"
 import {
   DialogActionTrigger,
   DialogBody,
@@ -13,10 +14,10 @@ import {
   DialogRoot,
   DialogTitle,
   DialogTrigger,
-} from "../../components/ui/dialog"
-import useAuth from "../../hooks/useAuth"
-import useCustomToast from "../../hooks/useCustomToast"
-import { handleError } from "../../utils"
+} from "@/components/ui/dialog"
+import useAuth from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { handleError } from "@/utils"
 
 const DeleteConfirmation = () => {
   const [isOpen, setIsOpen] = useState(false)

frontend/src/components/UserSettings/UserInformation.tsx

@@ -16,10 +16,10 @@ import {
   type UserPublic,
   type UserUpdateMe,
   UsersService,
-} from "../../client"
-import useAuth from "../../hooks/useAuth"
-import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern, handleError } from "../../utils"
+} from "@/client"
+import useAuth from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 import { Field } from "../ui/field"
 
 const UserInformation = () => {

frontend/src/hooks/useAuth.ts

@@ -9,8 +9,8 @@ import {
   type UserPublic,
   type UserRegister,
   UsersService,
-} from "../client"
-import { handleError } from "../utils"
+} from "@/client"
+import { handleError } from "@/utils"
 
 const isLoggedIn = () => {
   return localStorage.getItem("access_token") !== null

frontend/src/hooks/useCustomToast.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { toaster } from "../components/ui/toaster"
+import { toaster } from "@/components/ui/toaster"
 
 const useCustomToast = () => {
   const showSuccessToast = (description: string) => {

frontend/src/routes/__root.tsx

@@ -1,7 +1,7 @@
 import { Outlet, createRootRoute } from "@tanstack/react-router"
 import React, { Suspense } from "react"
 
-import NotFound from "../components/Common/NotFound"
+import NotFound from "@/components/Common/NotFound"
 
 const loadDevtools = () =>
   Promise.all([

frontend/src/routes/_layout.tsx

@@ -1,9 +1,9 @@
 import { Flex } from "@chakra-ui/react"
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
 
-import Navbar from "../components/Common/Navbar"
-import Sidebar from "../components/Common/Sidebar"
-import { isLoggedIn } from "../hooks/useAuth"
+import Navbar from "@/components/Common/Navbar"
+import Sidebar from "@/components/Common/Sidebar"
+import { isLoggedIn } from "@/hooks/useAuth"
 
 export const Route = createFileRoute("/_layout")({
   component: Layout,

frontend/src/routes/_layout/admin.tsx

@@ -3,16 +3,16 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { z } from "zod"
 
-import { type UserPublic, UsersService } from "../../client"
-import AddUser from "../../components/Admin/AddUser"
-import { UserActionsMenu } from "../../components/Common/UserActionsMenu"
-import PendingUsers from "../../components/Pending/PendingUsers"
+import { type UserPublic, UsersService } from "@/client"
+import AddUser from "@/components/Admin/AddUser"
+import { UserActionsMenu } from "@/components/Common/UserActionsMenu"
+import PendingUsers from "@/components/Pending/PendingUsers"
 import {
   PaginationItems,
   PaginationNextTrigger,
   PaginationPrevTrigger,
   PaginationRoot,
-} from "../../components/ui/pagination.tsx"
+} from "@/components/ui/pagination.tsx"
 
 const usersSearchSchema = z.object({
   page: z.number().catch(1),

frontend/src/routes/_layout/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Container, Text } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
 
-import useAuth from "../../hooks/useAuth"
+import useAuth from "@/hooks/useAuth"
 
 export const Route = createFileRoute("/_layout/")({
   component: Dashboard,

frontend/src/routes/_layout/items.tsx

@@ -6,21 +6,21 @@ import {
   Table,
   VStack,
 } from "@chakra-ui/react"
+import { useQuery } from "@tanstack/react-query"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { FiSearch } from "react-icons/fi"
 import { z } from "zod"
 
-import { useQuery } from "@tanstack/react-query"
-import { ItemsService } from "../../client"
-import { ItemActionsMenu } from "../../components/Common/ItemActionsMenu"
-import AddItem from "../../components/Items/AddItem"
-import PendingItems from "../../components/Pending/PendingItems"
+import { ItemsService } from "@/client"
+import { ItemActionsMenu } from "@/components/Common/ItemActionsMenu"
+import AddItem from "@/components/Items/AddItem"
+import PendingItems from "@/components/Pending/PendingItems"
 import {
   PaginationItems,
   PaginationNextTrigger,
   PaginationPrevTrigger,
   PaginationRoot,
-} from "../../components/ui/pagination.tsx"
+} from "@/components/ui/pagination.tsx"
 
 const itemsSearchSchema = z.object({
   page: z.number().catch(1),

frontend/src/routes/_layout/settings.tsx

@@ -1,11 +1,11 @@
 import { Container, Heading, Tabs } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
 
-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 useAuth from "../../hooks/useAuth"
+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 useAuth from "@/hooks/useAuth"
 
 const tabsConfig = [
   { value: "my-profile", title: "My profile", component: UserInformation },

frontend/src/routes/login.tsx

@@ -5,15 +5,15 @@ import {
   redirect,
 } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock, FiMail } from "react-icons/fi"
+
+import type { Body_login_login_access_token as AccessToken } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { PasswordInput } from "@/components/ui/password-input"
+import useAuth, { isLoggedIn } from "@/hooks/useAuth"
 import Logo from "/assets/images/fastapi-logo.svg"
-import type { Body_login_login_access_token as AccessToken } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { PasswordInput } from "../components/ui/password-input"
-import useAuth, { isLoggedIn } from "../hooks/useAuth"
 import { emailPattern, passwordRules } from "../utils"
 
 export const Route = createFileRoute("/login")({

frontend/src/routes/recover-password.tsx

@@ -2,15 +2,15 @@ import { Container, Heading, Input, Text } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiMail } from "react-icons/fi"
-import { type ApiError, LoginService } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { isLoggedIn } from "../hooks/useAuth"
-import useCustomToast from "../hooks/useCustomToast"
-import { emailPattern, handleError } from "../utils"
+
+import { type ApiError, LoginService } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { isLoggedIn } from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { emailPattern, handleError } from "@/utils"
 
 interface FormData {
   email: string

frontend/src/routes/reset-password.tsx

@@ -2,14 +2,14 @@ import { Container, Heading, Text } from "@chakra-ui/react"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock } from "react-icons/fi"
-import { type ApiError, LoginService, type NewPassword } from "../client"
-import { Button } from "../components/ui/button"
-import { PasswordInput } from "../components/ui/password-input"
-import { isLoggedIn } from "../hooks/useAuth"
-import useCustomToast from "../hooks/useCustomToast"
-import { confirmPasswordRules, handleError, passwordRules } from "../utils"
+
+import { type ApiError, LoginService, type NewPassword } from "@/client"
+import { Button } from "@/components/ui/button"
+import { PasswordInput } from "@/components/ui/password-input"
+import { isLoggedIn } from "@/hooks/useAuth"
+import useCustomToast from "@/hooks/useCustomToast"
+import { confirmPasswordRules, handleError, passwordRules } from "@/utils"
 
 interface NewPasswordForm extends NewPassword {
   confirm_password: string

frontend/src/routes/signup.tsx

@@ -5,16 +5,16 @@ import {
   redirect,
 } from "@tanstack/react-router"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { FiLock, FiUser } from "react-icons/fi"
+
+import type { UserRegister } from "@/client"
+import { Button } from "@/components/ui/button"
+import { Field } from "@/components/ui/field"
+import { InputGroup } from "@/components/ui/input-group"
+import { PasswordInput } from "@/components/ui/password-input"
+import useAuth, { isLoggedIn } from "@/hooks/useAuth"
+import { confirmPasswordRules, emailPattern, passwordRules } from "@/utils"
 import Logo from "/assets/images/fastapi-logo.svg"
-import type { UserRegister } from "../client"
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { InputGroup } from "../components/ui/input-group"
-import { PasswordInput } from "../components/ui/password-input"
-import useAuth, { isLoggedIn } from "../hooks/useAuth"
-import { confirmPasswordRules, emailPattern, passwordRules } from "../utils"
 
 export const Route = createFileRoute("/signup")({
   component: SignUp,

frontend/tsconfig.json

@@ -5,7 +5,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -13,13 +12,19 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "tests/**/*.ts", "playwright.config.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

frontend/vite.config.ts

@@ -1,8 +1,14 @@
+import path from "node:path"
 import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
 import react from "@vitejs/plugin-react-swc"
 import { defineConfig } from "vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   plugins: [react(), TanStackRouterVite()],
 })