wip 10

frontend/eslint.config.js

@@ -9,10 +9,8 @@ import eslintConfigPrettier from "eslint-config-prettier";
 
 export default [
   js.configs.recommended,
-  reactPlugin.configs.flat.recommended,
-  reactHooksPlugin.configs.flat.recommended,
   {
-    files: ["**/*.ts", "**/*.tsx", "**/*.css"],
+    files: ["**/*.ts", "**/*.tsx"],
     ignores: ["**/generated/**"],
     languageOptions: {
       parser: typescriptParser,
@@ -22,10 +20,36 @@ export default [
         ecmaFeatures: {
           jsx: true,
         },
+        projectService: true,
+      },
+      globals: {
+        localStorage: "readonly",
+        sessionStorage: "readonly",
+        document: "readonly",
+        window: "readonly",
+        setTimeout: "readonly",
+        clearTimeout: "readonly",
+        setInterval: "readonly",
+        clearInterval: "readonly",
+        HTMLElement: "readonly",
+        HTMLDivElement: "readonly",
+        HTMLButtonElement: "readonly",
+        HTMLAnchorElement: "readonly",
+        MouseEvent: "readonly",
+        Node: "readonly",
+        File: "readonly",
+        Blob: "readonly",
+        FormData: "readonly",
+        alert: "readonly",
+        confirm: "readonly",
+        prompt: "readonly",
+        React: "readonly",
       },
     },
     plugins: {
       "@typescript-eslint": typescriptPlugin,
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
       tailwindcss,
       prettier,
     },
@@ -35,11 +59,19 @@ export default [
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off",
       "no-console": ["warn", { allow: ["warn", "error"] }],
+      "no-undef": "off",
       "@typescript-eslint/no-explicit-any": "warn",
+      "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": [
         "error",
-        { argsIgnorePattern: "^_" },
+        { 
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
       ],
+      "no-useless-catch": "off",
     },
     settings: {
       react: {

frontend/package.json

@@ -24,21 +24,22 @@
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.17.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.8",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@typescript-eslint/parser": "^8.57.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.39.4",
+    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-tailwindcss": "^3.18.2",
-    "orval": "^7.5.0",
+    "orval": "^8.5.3",
     "postcss": "^8.4.49",
-    "prettier": "^3.8.1",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "vite": "^6.0.5"

frontend/src/auth/AuthContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useLogin, useLogout, useGetMe } from '../generated/anthoLumeAPIV1';
 
@@ -9,7 +9,7 @@ interface AuthState {
 }
 
 interface AuthContextType extends AuthState {
-  login: (username: string, password: string) => Promise<void>;
+  login: (_username: string, _password: string) => Promise<void>;
   logout: () => void;
 }
 
@@ -32,50 +32,56 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // Update auth state based on /me endpoint response
   useEffect(() => {
-    if (meLoading) {
+    setAuthState(prev => {
-      // Still checking authentication
+      if (meLoading) {
-      setAuthState((prev) => ({ ...prev, isCheckingAuth: true }));
+        // Still checking authentication
-    } else if (meData?.data) {
+        return { ...prev, isCheckingAuth: true };
-      // User is authenticated
+      } else if (meData?.data) {
-      setAuthState({
+        // User is authenticated
-        isAuthenticated: true,
+        return {
-        user: meData.data,
+          isAuthenticated: true,
-        isCheckingAuth: false,
+          user: meData.data,
-      });
+          isCheckingAuth: false,
-    } else if (meError) {
+        };
-      // User is not authenticated or error occurred
+      } else if (meError) {
-      setAuthState({
+        // User is not authenticated or error occurred
-        isAuthenticated: false,
+        return {
-        user: null,
+          isAuthenticated: false,
-        isCheckingAuth: false,
+          user: null,
-      });
+          isCheckingAuth: false,
-    }
+        };
+      }
+      return prev;
+    });
   }, [meData, meError, meLoading]);
 
-  const login = async (username: string, password: string) => {
+  const login = useCallback(
-    try {
+    async (username: string, password: string) => {
-      const response = await loginMutation.mutateAsync({
+      try {
-        data: {
+        const response = await loginMutation.mutateAsync({
-          username,
+          data: {
-          password,
+            username,
-        },
+            password,
-      });
+          },
+        });
 
-      // The backend uses session-based authentication, so no token to store
+        // The backend uses session-based authentication, so no token to store
-      // The session cookie is automatically set by the browser
+        // The session cookie is automatically set by the browser
-      setAuthState({
+        setAuthState({
-        isAuthenticated: true,
+          isAuthenticated: true,
-        user: response.data,
+          user: response.data,
-        isCheckingAuth: false,
+          isCheckingAuth: false,
-      });
+        });
 
-      navigate('/');
+        navigate('/');
-    } catch (err) {
+      } catch (_error) {
-      throw new Error('Login failed');
+        throw new Error('Login failed');
-    }
+      }
-  };
+    },
+    [loginMutation, navigate]
+  );
 
-  const logout = () => {
+  const logout = useCallback(() => {
     logoutMutation.mutate(undefined, {
       onSuccess: () => {
         setAuthState({
@@ -86,12 +92,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         navigate('/login');
       },
     });
-  };
+  }, [logoutMutation, navigate]);
 
   return (
-    <AuthContext.Provider value={{ ...authState, login, logout }}>
+    <AuthContext.Provider value={{ ...authState, login, logout }}>{children}</AuthContext.Provider>
-      {children}
-    </AuthContext.Provider>
   );
 }
 

frontend/src/auth/authInterceptor.ts

@@ -4,24 +4,24 @@ const TOKEN_KEY = 'antholume_token';
 
 // Request interceptor to add auth token to requests
 axios.interceptors.request.use(
-  (config) => {
+  config => {
     const token = localStorage.getItem(TOKEN_KEY);
     if (token && config.headers) {
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
   },
-  (error) => {
+  error => {
     return Promise.reject(error);
   }
 );
 
 // Response interceptor to handle auth errors
 axios.interceptors.response.use(
-  (response) => {
+  response => {
     return response;
   },
-  (error) => {
+  error => {
     if (error.response?.status === 401) {
       // Clear token on auth failure
       localStorage.removeItem(TOKEN_KEY);

frontend/src/components/Button.tsx

@@ -10,7 +10,8 @@ type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 type LinkProps = BaseButtonProps & AnchorHTMLAttributes<HTMLAnchorElement> & { href: string };
 
 const getVariantClasses = (variant: 'default' | 'secondary' = 'default'): string => {
-  const baseClass = 'transition duration-100 ease-in font-medium w-full h-full px-2 py-1 text-white';
+  const baseClass =
+    'transition duration-100 ease-in font-medium w-full h-full px-2 py-1 text-white';
 
   if (variant === 'secondary') {
     return `${baseClass} bg-black shadow-md hover:text-black hover:bg-white`;
@@ -22,11 +23,7 @@ const getVariantClasses = (variant: 'default' | 'secondary' = 'default'): string
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = 'default', children, className = '', ...props }, ref) => {
     return (
-      <button
+      <button ref={ref} className={`${getVariantClasses(variant)} ${className}`.trim()} {...props}>
-        ref={ref}
-        className={`${getVariantClasses(variant)} ${className}`.trim()}
-        {...props}
-      >
         {children}
       </button>
     );
@@ -38,11 +35,7 @@ Button.displayName = 'Button';
 export const ButtonLink = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ variant = 'default', children, className = '', ...props }, ref) => {
     return (
-      <a
+      <a ref={ref} className={`${getVariantClasses(variant)} ${className}`.trim()} {...props}>
-        ref={ref}
-        className={`${getVariantClasses(variant)} ${className}`.trim()}
-        {...props}
-      >
         {children}
       </a>
     );

frontend/src/components/HamburgerMenu.tsx

@@ -44,32 +44,35 @@ export default function HamburgerMenu() {
         className="absolute -top-2 z-50 flex size-7 cursor-pointer opacity-0 lg:hidden"
         id="mobile-nav-checkbox"
         checked={isOpen}
-        onChange={(e) => setIsOpen(e.target.checked)}
+        onChange={e => setIsOpen(e.target.checked)}
       />
 
       {/* Hamburger icon lines with CSS animations - hidden on desktop */}
       <span
-        className="transition-background z-40 mt-0.5 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
+        className="z-40 mt-0.5 h-0.5 w-7 bg-black transition-opacity duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '5px 0px',
-          transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
+          transition:
+            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
           transform: isOpen ? 'rotate(45deg) translate(2px, -2px)' : 'none',
         }}
       />
       <span
-        className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
+        className="z-40 mt-1 h-0.5 w-7 bg-black transition-opacity duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '0% 100%',
-          transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
+          transition:
+            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
           opacity: isOpen ? 0 : 1,
           transform: isOpen ? 'rotate(0deg) scale(0.2, 0.2)' : 'none',
         }}
       />
       <span
-        className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
+        className="z-40 mt-1 h-0.5 w-7 bg-black transition-opacity duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '0% 0%',
-          transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
+          transition:
+            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
           transform: isOpen ? 'rotate(-45deg) translate(0, 6px)' : 'none',
         }}
       />
@@ -102,7 +105,7 @@ export default function HamburgerMenu() {
           </p>
         </div>
         <nav>
-          {navItems.map((item) => (
+          {navItems.map(item => (
             <Link
               key={item.path}
               to={item.path}
@@ -120,11 +123,13 @@ export default function HamburgerMenu() {
 
           {/* Admin section - only visible for admins */}
           {isAdmin && (
-            <div className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
+            <div
-              hasPrefix(location.pathname, '/admin')
+              className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
-                ? 'border-purple-500 dark:text-white'
+                hasPrefix(location.pathname, '/admin')
-                : 'border-transparent text-gray-400'
+                  ? 'border-purple-500 dark:text-white'
-            }`}>
+                  : 'border-transparent text-gray-400'
+              }`}
+            >
               {/* Admin header - always shown */}
               <Link
                 to="/admin"
@@ -141,7 +146,7 @@ export default function HamburgerMenu() {
 
               {hasPrefix(location.pathname, '/admin') && (
                 <div className="flex flex-col gap-4">
-                  {adminSubItems.map((item) => (
+                  {adminSubItems.map(item => (
                     <Link
                       key={item.path}
                       to={item.path}
@@ -164,7 +169,8 @@ export default function HamburgerMenu() {
         <a
           className="absolute bottom-0 flex w-full flex-col items-center justify-center gap-2 p-6 text-black dark:text-white"
           target="_blank"
-          href="https://gitea.va.reichard.io/evan/AnthoLume" rel="noreferrer"
+          href="https://gitea.va.reichard.io/evan/AnthoLume"
+          rel="noreferrer"
         >
           <span className="text-xs">v1.0.0</span>
         </a>

frontend/src/components/Layout.tsx

@@ -41,7 +41,8 @@ export default function Layout() {
     { path: '/search', title: 'Search' },
     { path: '/settings', title: 'Settings' },
   ];
-  const currentPageTitle = navItems.find(item => location.pathname === item.path)?.title || 'Documents';
+  const currentPageTitle =
+    navItems.find(item => location.pathname === item.path)?.title || 'Documents';
 
   // Show loading while checking authentication status
   if (isCheckingAuth) {
@@ -61,12 +62,13 @@ export default function Layout() {
         <HamburgerMenu />
 
         {/* Header Title */}
-        <h1 className="px-6 text-xl font-bold lg:ml-44 dark:text-white">
+        <h1 className="px-6 text-xl font-bold lg:ml-44 dark:text-white">{currentPageTitle}</h1>
-          {currentPageTitle}
-        </h1>
 
         {/* User Dropdown */}
-        <div className="relative flex w-full items-center justify-end space-x-4 p-4" ref={dropdownRef}>
+        <div
+          className="relative flex w-full items-center justify-end space-x-4 p-4"
+          ref={dropdownRef}
+        >
           <button
             onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
             className="relative block text-gray-800 dark:text-gray-200"
@@ -86,7 +88,7 @@ export default function Layout() {
                   <Link
                     to="/settings"
                     onClick={() => setIsUserDropdownOpen(false)}
-                    className="text-md block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                     role="menuitem"
                   >
                     <span className="flex flex-col">
@@ -95,7 +97,7 @@ export default function Layout() {
                   </Link>
                   <button
                     onClick={handleLogout}
-                    className="text-md block w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                     role="menuitem"
                   >
                     <span className="flex flex-col">
@@ -109,10 +111,13 @@ export default function Layout() {
 
           <button
             onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
-            className="text-md flex cursor-pointer items-center gap-2 py-4 text-gray-500 dark:text-white"
+            className="flex cursor-pointer items-center gap-2 py-4 text-gray-500 dark:text-white"
           >
             <span>{userData?.username || 'User'}</span>
-            <span className="text-gray-800 transition-transform duration-200 dark:text-gray-200" style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
+            <span
+              className="text-gray-800 transition-transform duration-200 dark:text-gray-200"
+              style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
+            >
               <ChevronDown size={20} />
             </span>
           </button>
@@ -120,8 +125,15 @@ export default function Layout() {
       </div>
 
       {/* Main Content */}
-      <main className="relative overflow-hidden" style={{ height: 'calc(100dvh - 4rem - env(safe-area-inset-top))' }}>
+      <main
-        <div id="container" className="h-dvh overflow-auto px-4 md:px-6 lg:ml-48" style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}>
+        className="relative overflow-hidden"
+        style={{ height: 'calc(100dvh - 4rem - env(safe-area-inset-top))' }}
+      >
+        <div
+          id="container"
+          className="h-dvh overflow-auto px-4 md:px-6 lg:ml-48"
+          style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}
+        >
           <Outlet />
         </div>
       </main>

frontend/src/components/README.md

@@ -183,12 +183,7 @@ function DocumentList() {
     return <SkeletonTable rows={10} columns={5} />;
   }
 
-  return (
+  return <Table columns={columns} data={data?.documents || []} />;
-    <Table
-      columns={columns}
-      data={data?.documents || []}
-    />
-  );
 }
 ```
 

frontend/src/components/Skeleton.tsx

@@ -32,17 +32,13 @@ export function Skeleton({
 
   const style = {
     width: width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : undefined,
-    height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+    height:
+      height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
   };
 
   return (
     <div
-      className={cn(
+      className={cn(baseClasses, variantClasses[variant], animationClasses[animation], className)}
-        baseClasses,
-        variantClasses[variant],
-        animationClasses[animation],
-        className
-      )}
       style={style}
     />
   );
@@ -61,10 +57,7 @@ export function SkeletonText({ lines = 3, className = '', lineClassName = '' }:
         <Skeleton
           key={i}
           variant="text"
-          className={cn(
+          className={cn(lineClassName, i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full')}
-            lineClassName,
-            i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full'
-          )}
         />
       ))}
     </div>
@@ -85,14 +78,7 @@ export function SkeletonAvatar({ size = 'md', className = '' }: SkeletonAvatarPr
 
   const pixelSize = typeof size === 'number' ? size : sizeMap[size];
 
-  return (
+  return <Skeleton variant="circular" width={pixelSize} height={pixelSize} className={className} />;
-    <Skeleton
-      variant="circular"
-      width={pixelSize}
-      height={pixelSize}
-      className={className}
-    />
-  );
 }
 
 interface SkeletonCardProps {
@@ -111,7 +97,12 @@ export function SkeletonCard({
   textLines = 3,
 }: SkeletonCardProps) {
   return (
-    <div className={cn('bg-white dark:bg-gray-700 rounded-lg p-4 border dark:border-gray-600', className)}>
+    <div
+      className={cn(
+        'bg-white dark:bg-gray-700 rounded-lg p-4 border dark:border-gray-600',
+        className
+      )}
+    >
       {showAvatar && (
         <div className="mb-4 flex items-start gap-4">
           <SkeletonAvatar />
@@ -121,12 +112,8 @@ export function SkeletonCard({
           </div>
         </div>
       )}
-      {showTitle && (
+      {showTitle && <Skeleton variant="text" className="mb-4 h-6 w-1/2" />}
-        <Skeleton variant="text" className="mb-4 h-6 w-1/2" />
+      {showText && <SkeletonText lines={textLines} />}
-      )}
-      {showText && (
-        <SkeletonText lines={textLines} />
-      )}
     </div>
   );
 }
@@ -163,7 +150,10 @@ export function SkeletonTable({
             <tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
               {Array.from({ length: columns }).map((_, colIndex) => (
                 <td key={colIndex} className="p-3">
-                  <Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
+                  <Skeleton
+                    variant="text"
+                    className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'}
+                  />
                 </td>
               ))}
             </tr>
@@ -220,11 +210,12 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
 
   return (
     <div className={cn('flex items-center justify-center', className)}>
-      <div className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-blue-500 dark:border-gray-600`} />
+      <div
+        className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-blue-500 dark:border-gray-600`}
+      />
     </div>
   );
 }
 
 // Re-export SkeletonTable for backward compatibility
 export { SkeletonTable as SkeletonTableExport };
-

frontend/src/components/Table.tsx

@@ -5,7 +5,7 @@ import { cn } from '../utils/cn';
 export interface Column<T> {
   key: keyof T;
   header: string;
-  render?: (value: any, row: T, index: number) => React.ReactNode;
+  render?: (value: any, _row: T, _index: number) => React.ReactNode;
   className?: string;
 }
 
@@ -17,6 +17,47 @@ export interface TableProps<T> {
   rowKey?: keyof T | ((row: T) => string);
 }
 
+// Skeleton table component for loading state
+function SkeletonTable({
+  rows = 5,
+  columns = 4,
+  className = '',
+}: {
+  rows?: number;
+  columns?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn('bg-white dark:bg-gray-700 rounded-lg overflow-hidden', className)}>
+      <table className="min-w-full">
+        <thead>
+          <tr className="border-b dark:border-gray-600">
+            {Array.from({ length: columns }).map((_, i) => (
+              <th key={i} className="p-3">
+                <Skeleton variant="text" className="h-5 w-3/4" />
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
+              {Array.from({ length: columns }).map((_, colIndex) => (
+                <td key={colIndex} className="p-3">
+                  <Skeleton
+                    variant="text"
+                    className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export function Table<T extends Record<string, any>>({
   columns,
   data,
@@ -24,50 +65,18 @@ export function Table<T extends Record<string, any>>({
   emptyMessage = 'No Results',
   rowKey,
 }: TableProps<T>) {
-  const getRowKey = (row: T, index: number): string => {
+  const getRowKey = (_row: T, index: number): string => {
     if (typeof rowKey === 'function') {
-      return rowKey(row);
+      return rowKey(_row);
     }
     if (rowKey) {
-      return String(row[rowKey] ?? index);
+      return String(_row[rowKey] ?? index);
     }
     return `row-${index}`;
   };
 
-  // Skeleton table component for loading state
-  function SkeletonTable({ rows = 5, columns = 4, className = '' }: { rows?: number; columns?: number; className?: string }) {
-    return (
-      <div className={cn('bg-white dark:bg-gray-700 rounded-lg overflow-hidden', className)}>
-        <table className="min-w-full">
-          <thead>
-            <tr className="border-b dark:border-gray-600">
-              {Array.from({ length: columns }).map((_, i) => (
-                <th key={i} className="p-3">
-                  <Skeleton variant="text" className="h-5 w-3/4" />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {Array.from({ length: rows }).map((_, rowIndex) => (
-              <tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
-                {Array.from({ length: columns }).map((_, colIndex) => (
-                  <td key={colIndex} className="p-3">
-                    <Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-
   if (loading) {
-    return (
+    return <SkeletonTable rows={5} columns={columns.length} />;
-      <SkeletonTable rows={5} columns={columns.length} />
-    );
   }
 
   return (
@@ -76,7 +85,7 @@ export function Table<T extends Record<string, any>>({
         <table className="min-w-full bg-white dark:bg-gray-700">
           <thead>
             <tr className="border-b dark:border-gray-600">
-              {columns.map((column) => (
+              {columns.map(column => (
                 <th
                   key={String(column.key)}
                   className={`p-3 text-left text-gray-500 dark:text-white ${column.className || ''}`}
@@ -98,18 +107,13 @@ export function Table<T extends Record<string, any>>({
               </tr>
             ) : (
               data.map((row, index) => (
-                <tr
+                <tr key={getRowKey(row, index)} className="border-b dark:border-gray-600">
-                  key={getRowKey(row, index)}
+                  {columns.map(column => (
-                  className="border-b dark:border-gray-600"
-                >
-                  {columns.map((column) => (
                     <td
                       key={`${getRowKey(row, index)}-${String(column.key)}`}
                       className={`p-3 text-gray-700 dark:text-gray-300 ${column.className || ''}`}
                     >
-                      {column.render
+                      {column.render ? column.render(row[column.key], row, index) : row[column.key]}
-                        ? column.render(row[column.key], row, index)
-                        : row[column.key]}
                     </td>
                   ))}
                 </tr>

frontend/src/components/Toast.tsx

@@ -11,8 +11,9 @@ export interface ToastProps {
   onClose?: (id: string) => void;
 }
 
-const getToastStyles = (type: ToastType) => {
+const getToastStyles = (_type: ToastType) => {
-  const baseStyles = 'flex items-center gap-3 p-4 rounded-lg shadow-lg border-l-4 transition-all duration-300';
+  const baseStyles =
+    'flex items-center gap-3 p-4 rounded-lg shadow-lg border-l-4 transition-all duration-300';
 
   const typeStyles = {
     info: 'bg-blue-50 dark:bg-blue-900/30 border-blue-500 dark:border-blue-400',
@@ -69,15 +70,11 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
   return (
     <div
       className={`${baseStyles} ${typeStyles[type]} ${
-        isAnimatingOut 
+        isAnimatingOut ? 'translate-x-full opacity-0' : 'animate-slideInRight opacity-100'
-          ? 'translate-x-full opacity-0' 
-          : 'animate-slideInRight opacity-100'
       }`}
     >
       {icons[type]}
-      <p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>
+      <p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>{message}</p>
-        {message}
-      </p>
       <button
         onClick={handleClose}
         className={`ml-2 opacity-70 transition-opacity hover:opacity-100 ${textStyles[type]}`}

frontend/src/components/ToastContext.tsx

@@ -16,33 +16,50 @@ export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<(ToastProps & { id: string })[]>([]);
 
   const removeToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    setToasts(prev => prev.filter(toast => toast.id !== id));
   }, []);
 
-  const showToast = useCallback((message: string, type: ToastType = 'info', duration?: number): string => {
+  const showToast = useCallback(
-    const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    (message: string, _type: ToastType = 'info', _duration?: number): string => {
-    setToasts((prev) => [...prev, { id, type, message, duration, onClose: removeToast }]);
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    return id;
+      setToasts(prev => [
-  }, [removeToast]);
+        ...prev,
+        { id, type: _type, message, duration: _duration, onClose: removeToast },
+      ]);
+      return id;
+    },
+    [removeToast]
+  );
 
-  const showInfo = useCallback((message: string, duration?: number) => {
+  const showInfo = useCallback(
-    return showToast(message, 'info', duration);
+    (message: string, _duration?: number) => {
-  }, [showToast]);
+      return showToast(message, 'info', _duration);
+    },
+    [showToast]
+  );
 
-  const showWarning = useCallback((message: string, duration?: number) => {
+  const showWarning = useCallback(
-    return showToast(message, 'warning', duration);
+    (message: string, _duration?: number) => {
-  }, [showToast]);
+      return showToast(message, 'warning', _duration);
+    },
+    [showToast]
+  );
 
-  const showError = useCallback((message: string, duration?: number) => {
+  const showError = useCallback(
-    return showToast(message, 'error', duration);
+    (message: string, _duration?: number) => {
-  }, [showToast]);
+      return showToast(message, 'error', _duration);
+    },
+    [showToast]
+  );
 
   const clearToasts = useCallback(() => {
     setToasts([]);
   }, []);
 
   return (
-    <ToastContext.Provider value={{ showToast, showInfo, showWarning, showError, removeToast, clearToasts }}>
+    <ToastContext.Provider
+      value={{ showToast, showInfo, showWarning, showError, removeToast, clearToasts }}
+    >
       {children}
       <ToastContainer toasts={toasts} />
     </ToastContext.Provider>
@@ -61,7 +78,7 @@ function ToastContainer({ toasts }: ToastContainerProps) {
   return (
     <div className="pointer-events-none fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2">
       <div className="pointer-events-auto">
-        {toasts.map((toast) => (
+        {toasts.map(toast => (
           <Toast key={toast.id} {...toast} />
         ))}
       </div>

frontend/src/components/index.ts

@@ -12,5 +12,5 @@ export {
   SkeletonTable,
   SkeletonButton,
   PageLoader,
-  InlineLoader 
+  InlineLoader,
 } from './Skeleton';

frontend/src/generated/model/backupType.ts

@@ -6,8 +6,7 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type BackupType = typeof BackupType[keyof typeof BackupType];
+export type BackupType = (typeof BackupType)[keyof typeof BackupType];
-
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const BackupType = {

frontend/src/generated/model/getActivityParams.ts

@@ -7,8 +7,8 @@
  */
 
 export type GetActivityParams = {
-doc_filter?: boolean;
+  doc_filter?: boolean;
-document_id?: string;
+  document_id?: string;
-offset?: number;
+  offset?: number;
-limit?: number;
+  limit?: number;
 };

frontend/src/generated/model/getDocumentsParams.ts

@@ -7,7 +7,7 @@
  */
 
 export type GetDocumentsParams = {
-page?: number;
+  page?: number;
-limit?: number;
+  limit?: number;
-search?: string;
+  search?: string;
 };

frontend/src/generated/model/getImportDirectoryParams.ts

@@ -7,6 +7,6 @@
  */
 
 export type GetImportDirectoryParams = {
-directory?: string;
+  directory?: string;
-select?: string;
+  select?: string;
 };

frontend/src/generated/model/getLogsParams.ts

@@ -7,5 +7,5 @@
  */
 
 export type GetLogsParams = {
-filter?: string;
+  filter?: string;
 };

frontend/src/generated/model/getProgressListParams.ts

@@ -7,7 +7,7 @@
  */
 
 export type GetProgressListParams = {
-page?: number;
+  page?: number;
-limit?: number;
+  limit?: number;
-document?: string;
+  document?: string;
 };

frontend/src/generated/model/getSearchParams.ts

@@ -8,6 +8,6 @@
 import type { GetSearchSource } from './getSearchSource';
 
 export type GetSearchParams = {
-query: string;
+  query: string;
-source: GetSearchSource;
+  source: GetSearchSource;
 };

frontend/src/generated/model/getSearchSource.ts

@@ -6,8 +6,7 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type GetSearchSource = typeof GetSearchSource[keyof typeof GetSearchSource];
+export type GetSearchSource = (typeof GetSearchSource)[keyof typeof GetSearchSource];
-
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const GetSearchSource = {

frontend/src/generated/model/importResultStatus.ts

@@ -6,8 +6,7 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type ImportResultStatus = typeof ImportResultStatus[keyof typeof ImportResultStatus];
+export type ImportResultStatus = (typeof ImportResultStatus)[keyof typeof ImportResultStatus];
-
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const ImportResultStatus = {

frontend/src/generated/model/importType.ts

@@ -6,8 +6,7 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type ImportType = typeof ImportType[keyof typeof ImportType];
+export type ImportType = (typeof ImportType)[keyof typeof ImportType];
-
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const ImportType = {

frontend/src/generated/model/operationType.ts

@@ -6,8 +6,7 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type OperationType = typeof OperationType[keyof typeof OperationType];
+export type OperationType = (typeof OperationType)[keyof typeof OperationType];
-
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const OperationType = {

frontend/src/generated/model/postAdminActionBodyAction.ts

@@ -6,8 +6,8 @@
  * OpenAPI spec version: 1.0.0
  */
 
-export type PostAdminActionBodyAction = typeof PostAdminActionBodyAction[keyof typeof PostAdminActionBodyAction];
+export type PostAdminActionBodyAction =
-
+  (typeof PostAdminActionBodyAction)[keyof typeof PostAdminActionBodyAction];
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const PostAdminActionBodyAction = {

frontend/src/index.css

@@ -11,8 +11,7 @@ body {
 
 html {
   height: calc(100% + env(safe-area-inset-bottom));
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
-    env(safe-area-inset-left);
 }
 
 main {

frontend/src/pages/AdminImportPage.tsx

@@ -42,14 +42,14 @@ export default function AdminImportPage() {
         },
       },
       {
-        onSuccess: (response) => {
+        onSuccess: _response => {
           showInfo('Import completed successfully');
           // Redirect to import results page after a short delay
           setTimeout(() => {
             window.location.href = '/admin/import-results';
           }, 1500);
         },
-        onError: (error) => {
+        onError: error => {
           showError('Import failed: ' + (error as any).message);
         },
       }
@@ -68,19 +68,13 @@ export default function AdminImportPage() {
     return (
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
-          <div
+          <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-            className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
+            <p className="text-lg font-semibold text-gray-500">Selected Import Directory</p>
-          >
-            <p className="text-lg font-semibold text-gray-500">
-              Selected Import Directory
-            </p>
             <form className="flex flex-col gap-4" onSubmit={handleImport}>
               <div className="flex w-full justify-between gap-4">
                 <div className="flex items-center gap-4">
                   <FolderOpen size={20} />
-                  <p className="break-all text-lg font-medium">
+                  <p className="break-all text-lg font-medium">{selectedDirectory}</p>
-                    {selectedDirectory}
-                  </p>
                 </div>
                 <div className="mr-4 flex flex-col justify-around gap-2">
                   <div className="inline-flex items-center gap-2">
@@ -126,17 +120,11 @@ export default function AdminImportPage() {
   return (
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
-        <table
+        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
-          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
-        >
           <thead className="text-gray-800 dark:text-gray-400">
             <tr>
-              <th
+              <th className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"></th>
-                className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
+              <th className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800">
-              ></th>
-              <th
-                className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
-              >
                 {currentPath}
               </th>
             </tr>
@@ -144,9 +132,7 @@ export default function AdminImportPage() {
           <tbody className="text-black dark:text-white">
             {currentPath !== '/' && (
               <tr>
-                <td
+                <td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"></td>
-                  className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
-                ></td>
                 <td className="border-b border-gray-200 p-3">
                   <button onClick={handleNavigateUp}>
                     <p>../</p>
@@ -156,14 +142,14 @@ export default function AdminImportPage() {
             )}
             {directories.length === 0 ? (
               <tr>
-                <td className="p-3 text-center" colSpan={2}>No Folders</td>
+                <td className="p-3 text-center" colSpan={2}>
+                  No Folders
+                </td>
               </tr>
             ) : (
-              directories.map((item) => (
+              directories.map(item => (
                 <tr key={item.name}>
-                  <td
+                  <td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
-                    className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
-                  >
                     <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                       <FolderOpen size={20} />
                     </button>

frontend/src/pages/AdminImportResultsPage.tsx

@@ -13,24 +13,16 @@ export default function AdminImportResultsPage() {
   return (
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
-        <table
+        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
-          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
-        >
           <thead className="text-gray-800 dark:text-gray-400">
             <tr>
-              <th
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-              >
                 Document
               </th>
-              <th
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-              >
                 Status
               </th>
-              <th
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-              >
                 Error
               </th>
             </tr>
@@ -38,7 +30,9 @@ export default function AdminImportResultsPage() {
           <tbody className="text-black dark:text-white">
             {results.length === 0 ? (
               <tr>
-                <td className="p-3 text-center" colSpan={3}>No Results</td>
+                <td className="p-3 text-center" colSpan={3}>
+                  No Results
+                </td>
               </tr>
             ) : (
               results.map((result: ImportResult, index: number) => (

frontend/src/pages/AdminLogsPage.tsx

@@ -6,9 +6,7 @@ import { Search } from 'lucide-react';
 export default function AdminLogsPage() {
   const [filter, setFilter] = useState('');
 
-  const { data: logsData, isLoading, refetch } = useGetLogs(
+  const { data: logsData, isLoading, refetch } = useGetLogs(filter ? { filter } : {});
-    filter ? { filter } : {}
-  );
 
   const logs = logsData?.data?.logs || [];
 
@@ -24,28 +22,26 @@ export default function AdminLogsPage() {
   return (
     <div>
       {/* Filter Form */}
-      <div
+      <div className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
         <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
           <div className="flex w-full grow flex-col">
             <div className="relative flex">
-              <span
+              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
                 <Search size={15} />
               </span>
               <input
                 type="text"
                 value={filter}
-                onChange={(e) => setFilter(e.target.value)}
+                onChange={e => setFilter(e.target.value)}
                 className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                 placeholder="JQ Filter"
               />
             </div>
           </div>
           <div className="lg:w-60">
-            <Button variant="secondary" type="submit">Filter</Button>
+            <Button variant="secondary" type="submit">
+              Filter
+            </Button>
           </div>
         </form>
       </div>

frontend/src/pages/AdminPage.tsx

@@ -33,18 +33,21 @@ export default function AdminPage() {
         },
       },
       {
-        onSuccess: (response) => {
+        onSuccess: response => {
           // Handle file download
           const url = window.URL.createObjectURL(new Blob([response.data]));
           const link = document.createElement('a');
           link.href = url;
-          link.setAttribute('download', `AnthoLumeBackup_${new Date().toISOString().replace(/[:.]/g, '')}.zip`);
+          link.setAttribute(
+            'download',
+            `AnthoLumeBackup_${new Date().toISOString().replace(/[:.]/g, '')}.zip`
+          );
           document.body.appendChild(link);
           link.click();
           link.remove();
           showInfo('Backup completed successfully');
         },
-        onError: (error) => {
+        onError: error => {
           showError('Backup failed: ' + (error as any).message);
         },
       }
@@ -67,7 +70,7 @@ export default function AdminPage() {
         onSuccess: () => {
           showInfo('Restore completed successfully');
         },
-        onError: (error) => {
+        onError: error => {
           showError('Restore failed: ' + (error as any).message);
         },
       }
@@ -85,7 +88,7 @@ export default function AdminPage() {
         onSuccess: () => {
           showInfo('Metadata matching started');
         },
-        onError: (error) => {
+        onError: error => {
           showError('Metadata matching failed: ' + (error as any).message);
         },
       }
@@ -103,7 +106,7 @@ export default function AdminPage() {
         onSuccess: () => {
           showInfo('Cache tables started');
         },
-        onError: (error) => {
+        onError: error => {
           showError('Cache tables failed: ' + (error as any).message);
         },
       }
@@ -117,9 +120,7 @@ export default function AdminPage() {
   return (
     <div className="flex w-full grow flex-col gap-4">
       {/* Backup & Restore Card */}
-      <div
+      <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
         <p className="mb-2 text-lg font-semibold">Backup & Restore</p>
         <div className="flex flex-col gap-4">
           {/* Backup Form */}
@@ -130,7 +131,7 @@ export default function AdminPage() {
                   type="checkbox"
                   id="backup_covers"
                   checked={backupTypes.covers}
-                  onChange={(e) => setBackupTypes({ ...backupTypes, covers: e.target.checked })}
+                  onChange={e => setBackupTypes({ ...backupTypes, covers: e.target.checked })}
                 />
                 <label htmlFor="backup_covers">Covers</label>
               </div>
@@ -139,40 +140,39 @@ export default function AdminPage() {
                   type="checkbox"
                   id="backup_documents"
                   checked={backupTypes.documents}
-                  onChange={(e) => setBackupTypes({ ...backupTypes, documents: e.target.checked })}
+                  onChange={e => setBackupTypes({ ...backupTypes, documents: e.target.checked })}
                 />
                 <label htmlFor="backup_documents">Documents</label>
               </div>
             </div>
             <div className="h-10 w-40">
-              <Button variant="secondary" type="submit">Backup</Button>
+              <Button variant="secondary" type="submit">
+                Backup
+              </Button>
             </div>
           </form>
 
           {/* Restore Form */}
-          <form
+          <form onSubmit={handleRestoreSubmit} className="flex grow justify-between">
-            onSubmit={handleRestoreSubmit}
-            className="flex grow justify-between"
-          >
             <div className="flex w-1/2 items-center">
               <input
                 type="file"
                 accept=".zip"
-                onChange={(e) => setRestoreFile(e.target.files?.[0] || null)}
+                onChange={e => setRestoreFile(e.target.files?.[0] || null)}
                 className="w-full"
               />
             </div>
             <div className="h-10 w-40">
-              <Button variant="secondary" type="submit">Restore</Button>
+              <Button variant="secondary" type="submit">
+                Restore
+              </Button>
             </div>
           </form>
         </div>
       </div>
 
       {/* Tasks Card */}
-      <div
+      <div className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
         <p className="text-lg font-semibold">Tasks</p>
         <table className="min-w-full bg-white text-sm dark:bg-gray-700">
           <tbody className="text-black dark:text-white">
@@ -182,7 +182,9 @@ export default function AdminPage() {
               </td>
               <td className="float-right py-2">
                 <div className="h-10 w-40 text-base">
-                  <Button variant="secondary" onClick={handleMetadataMatch}>Run</Button>
+                  <Button variant="secondary" onClick={handleMetadataMatch}>
+                    Run
+                  </Button>
                 </div>
               </td>
             </tr>
@@ -192,7 +194,9 @@ export default function AdminPage() {
               </td>
               <td className="float-right py-2">
                 <div className="h-10 w-40 text-base">
-                  <Button variant="secondary" onClick={handleCacheTables}>Run</Button>
+                  <Button variant="secondary" onClick={handleCacheTables}>
+                    Run
+                  </Button>
                 </div>
               </td>
             </tr>

frontend/src/pages/AdminUsersPage.tsx

@@ -118,19 +118,21 @@ export default function AdminUsersPage() {
       {/* Add User Form */}
       {showAddForm && (
         <div className="absolute left-10 top-10 rounded bg-gray-200 p-3 shadow-lg shadow-gray-500 transition-all duration-200 dark:bg-gray-600 dark:shadow-gray-900">
-          <form onSubmit={handleCreateUser}
+          <form
-                className="flex flex-col gap-2 text-sm text-black dark:text-white">
+            onSubmit={handleCreateUser}
+            className="flex flex-col gap-2 text-sm text-black dark:text-white"
+          >
             <input
               type="text"
               value={newUsername}
-              onChange={(e) => setNewUsername(e.target.value)}
+              onChange={e => setNewUsername(e.target.value)}
               placeholder="Username"
               className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
             />
             <input
               type="password"
               value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
+              onChange={e => setNewPassword(e.target.value)}
               placeholder="Password"
               className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
             />
@@ -139,7 +141,7 @@ export default function AdminUsersPage() {
                 type="checkbox"
                 id="new_is_admin"
                 checked={newIsAdmin}
-                onChange={(e) => setNewIsAdmin(e.target.checked)}
+                onChange={e => setNewIsAdmin(e.target.checked)}
               />
               <label htmlFor="new_is_admin">Admin</label>
             </div>
@@ -163,21 +165,29 @@ export default function AdminUsersPage() {
                   <Plus size={20} />
                 </button>
               </th>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">User</th>
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Password</th>
+                User
-              <th className="border-b border-gray-200 p-3 text-left text-center font-normal uppercase dark:border-gray-800">
+              </th>
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                Password
+              </th>
+              <th className="border-b border-gray-200 p-3 text-center font-normal uppercase dark:border-gray-800">
                 Permissions
               </th>
-              <th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Created</th>
+              <th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                Created
+              </th>
             </tr>
           </thead>
           <tbody className="text-black dark:text-white">
             {users.length === 0 ? (
               <tr>
-                <td className="p-3 text-center" colSpan={5}>No Results</td>
+                <td className="p-3 text-center" colSpan={5}>
+                  No Results
+                </td>
               </tr>
             ) : (
-              users.map((user) => (
+              users.map(user => (
                 <tr key={user.id}>
                   {/* Delete Button */}
                   <td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">

frontend/src/pages/ComponentDemoPage.tsx

@@ -8,7 +8,7 @@ import {
   SkeletonTable,
   SkeletonButton,
   PageLoader,
-  InlineLoader 
+  InlineLoader,
 } from '../components/Skeleton';
 
 export default function ComponentDemoPage() {

frontend/src/pages/DocumentPage.tsx

@@ -62,7 +62,9 @@ export default function DocumentPage() {
 
   const document = docData?.data?.document as Document;
   const progressDataArray = progressData?.data?.progress;
-  const progress = Array.isArray(progressDataArray) ? progressDataArray[0] as Progress : undefined;
+  const progress = Array.isArray(progressDataArray)
+    ? (progressDataArray[0] as Progress)
+    : undefined;
 
   if (!document) {
     return <div className="text-gray-500 dark:text-white">Document not found</div>;
@@ -75,13 +77,9 @@ export default function DocumentPage() {
 
   return (
     <div className="relative size-full">
-      <div
+      <div className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white">
-        className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
         {/* Document Info - Left Column */}
-        <div
+        <div className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80">
-          className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80"
-        >
           {/* Cover Image */}
           {document.filepath && (
             <div className="h-60 w-full rounded bg-gray-200 object-fill dark:bg-gray-600">
@@ -124,7 +122,12 @@ export default function DocumentPage() {
                 title="Download"
               >
                 <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003-3h4a3 3 0 003 3v1m0-3l-3 3m0 0L4 20" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 16v1a3 3 0 003-3h4a3 3 0 003 3v1m0-3l-3 3m0 0L4 20"
+                  />
                 </svg>
               </a>
             )}
@@ -192,15 +195,11 @@ export default function DocumentPage() {
           </div>
           <div>
             <p className="text-gray-500">Created</p>
-            <p className="font-medium">
+            <p className="font-medium">{new Date(document.created_at).toLocaleDateString()}</p>
-              {new Date(document.created_at).toLocaleDateString()}
-            </p>
           </div>
           <div>
             <p className="text-gray-500">Updated</p>
-            <p className="font-medium">
+            <p className="font-medium">{new Date(document.updated_at).toLocaleDateString()}</p>
-              {new Date(document.updated_at).toLocaleDateString()}
-            </p>
           </div>
         </div>
 
@@ -213,9 +212,7 @@ export default function DocumentPage() {
             </div>
             <div className="flex items-center gap-2">
               <p className="text-gray-500">Est. Time Left:</p>
-              <p className="whitespace-nowrap font-medium">
+              <p className="whitespace-nowrap font-medium">{niceSeconds(totalTimeLeftSeconds)}</p>
-                {niceSeconds(totalTimeLeftSeconds)}
-              </p>
             </div>
           </div>
         )}

frontend/src/pages/DocumentsPage.tsx

@@ -35,9 +35,7 @@ function DocumentCard({ doc }: DocumentCardProps) {
 
   return (
     <div className="relative w-full">
-      <div
+      <div className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
-        className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700"
-      >
         <div className="relative my-auto h-48 min-w-fit">
           <Link to={`/documents/${doc.id}`}>
             <img
@@ -51,13 +49,13 @@ function DocumentCard({ doc }: DocumentCardProps) {
           <div className="inline-flex shrink-0 items-center">
             <div>
               <p className="text-gray-400">Title</p>
-              <p className="font-medium">{doc.title || "Unknown"}</p>
+              <p className="font-medium">{doc.title || 'Unknown'}</p>
             </div>
           </div>
           <div className="inline-flex shrink-0 items-center">
             <div>
               <p className="text-gray-400">Author</p>
-              <p className="font-medium">{doc.author || "Unknown"}</p>
+              <p className="font-medium">{doc.author || 'Unknown'}</p>
             </div>
           </div>
           <div className="inline-flex shrink-0 items-center">
@@ -73,9 +71,7 @@ function DocumentCard({ doc }: DocumentCardProps) {
             </div>
           </div>
         </div>
-        <div
+        <div className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400">
-          className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400"
-        >
           <Link to={`/activity?document=${doc.id}`}>
             <Activity size={20} />
           </Link>
@@ -92,10 +88,6 @@ function DocumentCard({ doc }: DocumentCardProps) {
   );
 }
 
-
-
-
-
 export default function DocumentsPage() {
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
@@ -152,21 +144,17 @@ export default function DocumentsPage() {
   return (
     <div className="flex flex-col gap-4">
       {/* Search Form */}
-      <div
+      <div className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
         <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
           <div className="flex w-full grow flex-col">
             <div className="relative flex">
-              <span
+              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
                 <Search size={15} />
               </span>
               <input
                 type="text"
                 value={search}
-                onChange={(e) => setSearch(e.target.value)}
+                onChange={e => setSearch(e.target.value)}
                 className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                 placeholder="Search Author / Title"
                 name="search"
@@ -174,7 +162,9 @@ export default function DocumentsPage() {
             </div>
           </div>
           <div className="lg:w-60">
-            <Button variant="secondary" type="submit">Search</Button>
+            <Button variant="secondary" type="submit">
+              Search
+            </Button>
           </div>
         </form>
       </div>
@@ -207,9 +197,7 @@ export default function DocumentsPage() {
       </div>
 
       {/* Upload Button */}
-      <div
+      <div className="fixed bottom-6 right-6 flex items-center justify-center rounded-full">
-        className="fixed bottom-6 right-6 flex items-center justify-center rounded-full"
-      >
         <input
           type="checkbox"
           id="upload-file-button"
@@ -220,11 +208,7 @@ export default function DocumentsPage() {
         <div
           className={`absolute bottom-0 right-0 z-10 flex w-72 flex-col gap-2 rounded bg-gray-800 p-4 text-sm text-white transition-opacity duration-200 dark:bg-gray-200 dark:text-black ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
         >
-          <form
+          <form method="POST" encType="multipart/form-data" className="flex flex-col gap-2">
-            method="POST"
-            encType="multipart/form-data"
-            className="flex flex-col gap-2"
-          >
             <input
               type="file"
               accept=".epub"
@@ -236,7 +220,7 @@ export default function DocumentsPage() {
             <button
               className="bg-gray-500 px-2 py-1 font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
               type="submit"
-              onClick={(e) => {
+              onClick={e => {
                 e.preventDefault();
                 handleFileChange({ target: { files: fileInputRef.current?.files } } as any);
               }}

frontend/src/pages/HomePage.tsx

@@ -44,7 +44,15 @@ interface StreakCardProps {
   maxStreakEndDate: string;
 }
 
-function StreakCard({ window, currentStreak, currentStreakStartDate, currentStreakEndDate, maxStreak, maxStreakStartDate, maxStreakEndDate }: StreakCardProps) {
+function StreakCard({
+  window,
+  currentStreak,
+  currentStreakStartDate,
+  currentStreakEndDate,
+  maxStreak,
+  maxStreakStartDate,
+  maxStreakEndDate,
+}: StreakCardProps) {
   return (
     <div className="w-full">
       <div className="relative w-full rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
@@ -107,7 +115,9 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
           {data.all.length === 0 ? (
             <p className="text-5xl font-bold text-black dark:text-white">N/A</p>
           ) : (
-            <p className="text-5xl font-bold text-black dark:text-white">{data.all[0]?.user_id || 'N/A'}</p>
+            <p className="text-5xl font-bold text-black dark:text-white">
+              {data.all[0]?.user_id || 'N/A'}
+            </p>
           )}
         </div>
 
@@ -186,25 +196,10 @@ export default function HomePage() {
 
       {/* Info Cards */}
       <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
-        <InfoCard
+        <InfoCard title="Documents" size={dbInfo?.documents_size || 0} link="./documents" />
-          title="Documents"
+        <InfoCard title="Activity Records" size={dbInfo?.activity_size || 0} link="./activity" />
-          size={dbInfo?.documents_size || 0}
+        <InfoCard title="Progress Records" size={dbInfo?.progress_size || 0} link="./progress" />
-          link="./documents"
+        <InfoCard title="Devices" size={dbInfo?.devices_size || 0} />
-        />
-        <InfoCard
-          title="Activity Records"
-          size={dbInfo?.activity_size || 0}
-          link="./activity"
-        />
-        <InfoCard
-          title="Progress Records"
-          size={dbInfo?.progress_size || 0}
-          link="./progress"
-        />
-        <InfoCard
-          title="Devices"
-          size={dbInfo?.devices_size || 0}
-        />
       </div>
 
       {/* Streak Cards */}
@@ -227,15 +222,15 @@ export default function HomePage() {
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <LeaderboardCard
           name="WPM"
-          data={userStats?.wpm || { all: [], year: [], month: [], week: []}} 
+          data={userStats?.wpm || { all: [], year: [], month: [], week: [] }}
         />
         <LeaderboardCard
           name="Duration"
-          data={userStats?.duration || { all: [], year: [], month: [], week: []}} 
+          data={userStats?.duration || { all: [], year: [], month: [], week: [] }}
         />
         <LeaderboardCard
           name="Words"
-          data={userStats?.words || { all: [], year: [], month: [], week: []}} 
+          data={userStats?.words || { all: [], year: [], month: [], week: [] }}
         />
       </div>
 

frontend/src/pages/LoginPage.tsx

@@ -26,7 +26,7 @@ export default function LoginPage() {
 
     try {
       await login(username, password);
-    } catch (err) {
+    } catch (_err) {
       showError('Invalid credentials');
     } finally {
       setIsLoading(false);
@@ -37,9 +37,7 @@ export default function LoginPage() {
     <div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
       <div className="flex w-full flex-wrap">
         <div className="flex w-full flex-col md:w-1/2">
-          <div
+          <div className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32">
-            className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32"
-          >
             <p className="text-center text-3xl">Welcome.</p>
             <form className="flex flex-col pt-3 md:pt-8" onSubmit={handleSubmit}>
               <div className="flex flex-col pt-4">
@@ -47,7 +45,7 @@ export default function LoginPage() {
                   <input
                     type="text"
                     value={username}
-                    onChange={(e) => setUsername(e.target.value)}
+                    onChange={e => setUsername(e.target.value)}
                     className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Username"
                     required
@@ -60,7 +58,7 @@ export default function LoginPage() {
                   <input
                     type="password"
                     value={password}
-                    onChange={(e) => setPassword(e.target.value)}
+                    onChange={e => setPassword(e.target.value)}
                     className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Password"
                     required

frontend/src/pages/SearchPage.tsx

@@ -20,35 +20,29 @@ export default function SearchPage() {
     <div className="flex w-full flex-col gap-4 md:flex-row">
       <div className="flex grow flex-col gap-4">
         {/* Search Form */}
-        <div
+        <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
           <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
             <div className="flex w-full grow flex-col">
               <div className="relative flex">
-                <span
+                <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
                   <Search size={15} />
                 </span>
                 <input
                   type="text"
                   value={query}
-                  onChange={(e) => setQuery(e.target.value)}
+                  onChange={e => setQuery(e.target.value)}
                   className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="Query"
                 />
               </div>
             </div>
             <div className="relative flex min-w-[12em]">
-              <span
+              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
                 <Book size={15} />
               </span>
               <select
                 value={source}
-                onChange={(e) => setSource(e.target.value as GetSearchSource)}
+                onChange={e => setSource(e.target.value as GetSearchSource)}
                 className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
               >
                 <option value="LibGen">Library Genesis</option>
@@ -56,44 +50,32 @@ export default function SearchPage() {
               </select>
             </div>
             <div className="lg:w-60">
-              <Button variant="secondary" type="submit">Search</Button>
+              <Button variant="secondary" type="submit">
+                Search
+              </Button>
             </div>
           </form>
         </div>
 
         {/* Search Results Table */}
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
-          <table
+          <table className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700">
-            className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700"
-          >
             <thead className="text-gray-800 dark:text-gray-400">
               <tr>
-                <th
+                <th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"></th>
-                  className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                ></th>
-                <th
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Document
                 </th>
-                <th
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Series
                 </th>
-                <th
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Type
                 </th>
-                <th
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Size
                 </th>
-                <th
+                <th className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800">
-                  className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800"
-                >
                   Date
                 </th>
               </tr>
@@ -101,43 +83,44 @@ export default function SearchPage() {
             <tbody className="text-black dark:text-white">
               {isLoading && (
                 <tr>
-                  <td className="p-3 text-center" colSpan={6}>Loading...</td>
+                  <td className="p-3 text-center" colSpan={6}>
+                    Loading...
+                  </td>
                 </tr>
               )}
               {!isLoading && !results && (
                 <tr>
-                  <td className="p-3 text-center" colSpan={6}>No Results</td>
+                  <td className="p-3 text-center" colSpan={6}>
+                    No Results
+                  </td>
                 </tr>
               )}
-              {!isLoading && results && results.map((item: any) => (
+              {!isLoading &&
-                <tr key={item.id}>
+                results &&
-                  <td
+                results.map((item: any) => (
-                    className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500"
+                  <tr key={item.id}>
-                  >
+                    <td className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500">
-                    <button
+                      <button className="hover:text-purple-600" title="Download">
-                      className="hover:text-purple-600"
+                        <Download size={15} />
-                      title="Download"
+                      </button>
-                    >
+                    </td>
-                      <Download size={15} />
+                    <td className="border-b border-gray-200 p-3">
-                    </button>
+                      {item.author || 'N/A'} - {item.title || 'N/A'}
-                  </td>
+                    </td>
-                  <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-gray-200 p-3">
-                    {item.author || 'N/A'} - {item.title || 'N/A'}
+                      <p>{item.series || 'N/A'}</p>
-                  </td>
+                    </td>
-                  <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-gray-200 p-3">
-                    <p>{item.series || 'N/A'}</p>
+                      <p>{item.file_type || 'N/A'}</p>
-                  </td>
+                    </td>
-                  <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-gray-200 p-3">
-                    <p>{item.file_type || 'N/A'}</p>
+                      <p>{item.file_size || 'N/A'}</p>
-                  </td>
+                    </td>
-                  <td className="border-b border-gray-200 p-3">
+                    <td className="hidden border-b border-gray-200 p-3 md:table-cell">
-                    <p>{item.file_size || 'N/A'}</p>
+                      <p>{item.upload_date || 'N/A'}</p>
-                  </td>
+                    </td>
-                  <td className="hidden border-b border-gray-200 p-3 md:table-cell">
+                  </tr>
-                    <p>{item.upload_date || 'N/A'}</p>
+                ))}
-                  </td>
-                </tr>
-              ))}
             </tbody>
           </table>
         </div>

frontend/src/pages/SettingsPage.tsx

@@ -39,7 +39,10 @@ export default function SettingsPage() {
       setPassword('');
       setNewPassword('');
     } catch (error: any) {
-      showError('Failed to update password: ' + (error.response?.data?.message || error.message || 'Unknown error'));
+      showError(
+        'Failed to update password: ' +
+          (error.response?.data?.message || error.message || 'Unknown error')
+      );
     }
   };
 
@@ -54,7 +57,10 @@ export default function SettingsPage() {
       });
       showInfo('Timezone updated successfully');
     } catch (error: any) {
-      showError('Failed to update timezone: ' + (error.response?.data?.message || error.message || 'Unknown error'));
+      showError(
+        'Failed to update timezone: ' +
+          (error.response?.data?.message || error.message || 'Unknown error')
+      );
     }
   };
 
@@ -101,35 +107,26 @@ export default function SettingsPage() {
     <div className="flex w-full flex-col gap-4 md:flex-row">
       {/* User Profile Card */}
       <div>
-        <div
+        <div className="flex flex-col items-center rounded bg-white p-4 text-gray-500 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700 dark:text-white">
-          className="flex flex-col items-center rounded bg-white p-4 text-gray-500 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700 dark:text-white"
-        >
           <User size={60} />
-          <p className="text-lg">{settingsData?.data.user.username || "N/A"}</p>
+          <p className="text-lg">{settingsData?.data.user.username || 'N/A'}</p>
         </div>
       </div>
 
       <div className="flex grow flex-col gap-4">
         {/* Change Password Form */}
-        <div
+        <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
           <p className="mb-2 text-lg font-semibold">Change Password</p>
-          <form
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handlePasswordSubmit}>
-            className="flex flex-col gap-4 lg:flex-row"
-            onSubmit={handlePasswordSubmit}
-          >
             <div className="flex grow flex-col">
               <div className="relative flex">
-                <span
+                <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
                   <Lock size={15} />
                 </span>
                 <input
                   type="password"
                   value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  onChange={e => setPassword(e.target.value)}
                   className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="Password"
                 />
@@ -137,44 +134,37 @@ export default function SettingsPage() {
             </div>
             <div className="flex grow flex-col">
               <div className="relative flex">
-                <span
+                <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
                   <Lock size={15} />
                 </span>
                 <input
                   type="password"
                   value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
+                  onChange={e => setNewPassword(e.target.value)}
                   className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="New Password"
                 />
               </div>
             </div>
             <div className="lg:w-60">
-              <Button variant="secondary" type="submit">Submit</Button>
+              <Button variant="secondary" type="submit">
+                Submit
+              </Button>
             </div>
           </form>
         </div>
 
         {/* Change Timezone Form */}
-        <div
+        <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
           <p className="mb-2 text-lg font-semibold">Change Timezone</p>
-          <form
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleTimezoneSubmit}>
-            className="flex flex-col gap-4 lg:flex-row"
-            onSubmit={handleTimezoneSubmit}
-          >
             <div className="relative flex grow">
-              <span
+              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
                 <Clock size={15} />
               </span>
               <select
                 value={timezone || 'UTC'}
-                onChange={(e) => setTimezone(e.target.value)}
+                onChange={e => setTimezone(e.target.value)}
                 className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
               >
                 <option value="UTC">UTC</option>
@@ -190,32 +180,26 @@ export default function SettingsPage() {
               </select>
             </div>
             <div className="lg:w-60">
-              <Button variant="secondary" type="submit">Submit</Button>
+              <Button variant="secondary" type="submit">
+                Submit
+              </Button>
             </div>
           </form>
         </div>
 
         {/* Devices Table */}
-        <div
+        <div className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-          className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
           <p className="text-lg font-semibold">Devices</p>
           <table className="min-w-full bg-white text-sm dark:bg-gray-700">
             <thead className="text-gray-800 dark:text-gray-400">
               <tr>
-                <th
+                <th className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Name
                 </th>
-                <th
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Last Sync
                 </th>
-                <th
+                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
-                >
                   Created
                 </th>
               </tr>
@@ -223,7 +207,9 @@ export default function SettingsPage() {
             <tbody className="text-black dark:text-white">
               {!settingsData?.data.devices || settingsData.data.devices.length === 0 ? (
                 <tr>
-                  <td className="p-3 text-center" colSpan={3}>No Results</td>
+                  <td className="p-3 text-center" colSpan={3}>
+                    No Results
+                  </td>
                 </tr>
               ) : (
                 settingsData.data.devices.map((device: any) => (
@@ -232,10 +218,14 @@ export default function SettingsPage() {
                       <p>{device.device_name || 'Unknown'}</p>
                     </td>
                     <td className="p-3">
-                      <p>{device.last_synced ? new Date(device.last_synced).toLocaleString() : 'N/A'}</p>
+                      <p>
+                        {device.last_synced ? new Date(device.last_synced).toLocaleString() : 'N/A'}
+                      </p>
                     </td>
                     <td className="p-3">
-                      <p>{device.created_at ? new Date(device.created_at).toLocaleString() : 'N/A'}</p>
+                      <p>
+                        {device.created_at ? new Date(device.created_at).toLocaleString() : 'N/A'}
+                      </p>
                     </td>
                   </tr>
                 ))