wip 10

2026-03-16 11:00:16 -04:00
parent 7c47f2d2eb
commit b1b8eb297e
45 changed files with 3701 additions and 3736 deletions
--- a/frontend/eslint.config.js
+++ b/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: {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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/parser": "^8.57.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
-    "eslint": "^9.39.4",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.5",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "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"
--- a/frontend/src/auth/AuthContext.tsx
+++ b/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,27 +32,31 @@ export function AuthProvider({ children }: { children: ReactNode }) {

  // Update auth state based on /me endpoint response
  useEffect(() => {
+    setAuthState(prev => {
      if (meLoading) {
        // Still checking authentication
-      setAuthState((prev) => ({ ...prev, isCheckingAuth: true }));
+        return { ...prev, isCheckingAuth: true };
      } else if (meData?.data) {
        // User is authenticated
-      setAuthState({
+        return {
          isAuthenticated: true,
          user: meData.data,
          isCheckingAuth: false,
-      });
+        };
      } else if (meError) {
        // User is not authenticated or error occurred
-      setAuthState({
+        return {
          isAuthenticated: false,
          user: null,
          isCheckingAuth: false,
-      });
+        };
      }
+      return prev;
+    });
  }, [meData, meError, meLoading]);

-  const login = async (username: string, password: string) => {
+  const login = useCallback(
+    async (username: string, password: string) => {
      try {
        const response = await loginMutation.mutateAsync({
          data: {
@@ -70,12 +74,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
        });

        navigate('/');
-    } catch (err) {
+      } catch (_error) {
        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 }}>
-      {children}
-    </AuthContext.Provider>
+    <AuthContext.Provider value={{ ...authState, login, logout }}>{children}</AuthContext.Provider>
  );
 }

--- a/frontend/src/auth/authInterceptor.ts
+++ b/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);
--- a/frontend/src/components/Button.tsx
+++ b/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
-        ref={ref}
-        className={`${getVariantClasses(variant)} ${className}`.trim()}
-        {...props}
-      >
+      <button 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
-        ref={ref}
-        className={`${getVariantClasses(variant)} ${className}`.trim()}
-        {...props}
-      >
+      <a ref={ref} className={`${getVariantClasses(variant)} ${className}`.trim()} {...props}>
        {children}
      </a>
    );
--- a/frontend/src/components/HamburgerMenu.tsx
+++ b/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
+              className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
                hasPrefix(location.pathname, '/admin')
                  ? '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>
--- a/frontend/src/components/Layout.tsx
+++ b/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">
-          {currentPageTitle}
-        </h1>
+        <h1 className="px-6 text-xl font-bold lg:ml-44 dark:text-white">{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))' }}>
-        <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)' }}>
+      <main
+        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>
--- a/frontend/src/components/README.md
+++ b/frontend/src/components/README.md
@@ -183,12 +183,7 @@ function DocumentList() {
    return <SkeletonTable rows={10} columns={5} />;
  }

-  return (
-    <Table
-      columns={columns}
-      data={data?.documents || []}
-    />
-  );
+  return <Table columns={columns} data={data?.documents || []} />;
 }
 ```

--- a/frontend/src/components/Skeleton.tsx
+++ b/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(
-        baseClasses,
-        variantClasses[variant],
-        animationClasses[animation],
-        className
-      )}
+      className={cn(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(
-            lineClassName,
-            i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full'
-          )}
+          className={cn(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 (
-    <Skeleton
-      variant="circular"
-      width={pixelSize}
-      height={pixelSize}
-      className={className}
-    />
-  );
+  return <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 && (
-        <Skeleton variant="text" className="mb-4 h-6 w-1/2" />
-      )}
-      {showText && (
-        <SkeletonText lines={textLines} />
-      )}
+      {showTitle && <Skeleton variant="text" className="mb-4 h-6 w-1/2" />}
+      {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 };
-
--- a/frontend/src/components/Table.tsx
+++ b/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,25 +17,16 @@ export interface TableProps<T> {
  rowKey?: keyof T | ((row: T) => string);
 }

-export function Table<T extends Record<string, any>>({
-  columns,
-  data,
-  loading = false,
-  emptyMessage = 'No Results',
-  rowKey,
-}: TableProps<T>) {
-  const getRowKey = (row: T, index: number): string => {
-    if (typeof rowKey === 'function') {
-      return rowKey(row);
-    }
-    if (rowKey) {
-      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 }) {
+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">
@@ -53,7 +44,10 @@ export function Table<T extends Record<string, any>>({
            <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>
@@ -64,10 +58,25 @@ export function Table<T extends Record<string, any>>({
  );
 }

+export function Table<T extends Record<string, any>>({
+  columns,
+  data,
+  loading = false,
+  emptyMessage = 'No Results',
+  rowKey,
+}: TableProps<T>) {
+  const getRowKey = (_row: T, index: number): string => {
+    if (typeof rowKey === 'function') {
+      return rowKey(_row);
+    }
+    if (rowKey) {
+      return String(_row[rowKey] ?? index);
+    }
+    return `row-${index}`;
+  };
+
  if (loading) {
-    return (
-      <SkeletonTable rows={5} columns={columns.length} />
-    );
+    return <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
-                  key={getRowKey(row, index)}
-                  className="border-b dark:border-gray-600"
-                >
-                  {columns.map((column) => (
+                <tr key={getRowKey(row, index)} 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(row[column.key], row, index)
-                        : row[column.key]}
+                      {column.render ? column.render(row[column.key], row, index) : row[column.key]}
                    </td>
                  ))}
                </tr>
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -11,8 +11,9 @@ export interface ToastProps {
  onClose?: (id: string) => void;
 }

-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 getToastStyles = (_type: ToastType) => {
+  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 
-          ? 'translate-x-full opacity-0' 
-          : 'animate-slideInRight opacity-100'
+        isAnimatingOut ? 'translate-x-full opacity-0' : 'animate-slideInRight opacity-100'
      }`}
    >
      {icons[type]}
-      <p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>
-        {message}
-      </p>
+      <p className={`flex-1 text-sm font-medium ${textStyles[type]}`}>{message}</p>
      <button
        onClick={handleClose}
        className={`ml-2 opacity-70 transition-opacity hover:opacity-100 ${textStyles[type]}`}
--- a/frontend/src/components/ToastContext.tsx
+++ b/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(
+    (message: string, _type: ToastType = 'info', _duration?: number): string => {
      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    setToasts((prev) => [...prev, { id, type, message, duration, onClose: removeToast }]);
+      setToasts(prev => [
+        ...prev,
+        { id, type: _type, message, duration: _duration, onClose: removeToast },
+      ]);
      return id;
-  }, [removeToast]);
+    },
+    [removeToast]
+  );

-  const showInfo = useCallback((message: string, duration?: number) => {
-    return showToast(message, 'info', duration);
-  }, [showToast]);
+  const showInfo = useCallback(
+    (message: string, _duration?: number) => {
+      return showToast(message, 'info', _duration);
+    },
+    [showToast]
+  );

-  const showWarning = useCallback((message: string, duration?: number) => {
-    return showToast(message, 'warning', duration);
-  }, [showToast]);
+  const showWarning = useCallback(
+    (message: string, _duration?: number) => {
+      return showToast(message, 'warning', _duration);
+    },
+    [showToast]
+  );

-  const showError = useCallback((message: string, duration?: number) => {
-    return showToast(message, 'error', duration);
-  }, [showToast]);
+  const showError = useCallback(
+    (message: string, _duration?: number) => {
+      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>
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -12,5 +12,5 @@ export {
  SkeletonTable,
  SkeletonButton,
  PageLoader,
-  InlineLoader 
+  InlineLoader,
 } from './Skeleton';
--- a/frontend/src/generated/anthoLumeAPIV1.ts
+++ b/frontend/src/generated/anthoLumeAPIV1.ts
--- a/frontend/src/generated/model/backupType.ts
+++ b/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 = {
--- a/frontend/src/generated/model/getSearchSource.ts
+++ b/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 = {
--- a/frontend/src/generated/model/importResultStatus.ts
+++ b/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 = {
--- a/frontend/src/generated/model/importType.ts
+++ b/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 = {
--- a/frontend/src/generated/model/operationType.ts
+++ b/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 = {
--- a/frontend/src/generated/model/postAdminActionBodyAction.ts
+++ b/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 = {
--- a/frontend/src/index.css
+++ b/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
-    env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 }

 main {
--- a/frontend/src/pages/AdminImportPage.tsx
+++ b/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
-            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>
+          <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">
+            <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">
-                    {selectedDirectory}
-                  </p>
+                  <p className="break-all text-lg font-medium">{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
-          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
-        >
+        <table 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
-                className="w-12 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"
-              >
+              <th className="w-12 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
-                  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 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
-                    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">
                    <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                      <FolderOpen size={20} />
                    </button>
--- a/frontend/src/pages/AdminImportResultsPage.tsx
+++ b/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
-          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
-        >
+        <table 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
-                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">
                Document
              </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">
                Status
              </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">
                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) => (
--- a/frontend/src/pages/AdminLogsPage.tsx
+++ b/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(
-    filter ? { filter } : {}
-  );
+  const { data: logsData, isLoading, refetch } = useGetLogs(filter ? { filter } : {});

  const logs = logsData?.data?.logs || [];

@@ -24,28 +22,26 @@ export default function AdminLogsPage() {
  return (
    <div>
      {/* Filter Form */}
-      <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"
-      >
+      <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">
        <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
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
+              <span 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>
--- a/frontend/src/pages/AdminPage.tsx
+++ b/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
-        className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
+      <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">
        <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
-            onSubmit={handleRestoreSubmit}
-            className="flex grow justify-between"
-          >
+          <form 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
-        className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
+      <div 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>
--- a/frontend/src/pages/AdminUsersPage.tsx
+++ b/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}
-                className="flex flex-col gap-2 text-sm text-black dark:text-white">
+          <form
+            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">Password</th>
-              <th className="border-b border-gray-200 p-3 text-left text-center 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">
+                User
+              </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">
--- a/frontend/src/pages/ComponentDemoPage.tsx
+++ b/frontend/src/pages/ComponentDemoPage.tsx
@@ -8,7 +8,7 @@ import {
  SkeletonTable,
  SkeletonButton,
  PageLoader,
-  InlineLoader 
+  InlineLoader,
 } from '../components/Skeleton';

 export default function ComponentDemoPage() {
--- a/frontend/src/pages/DocumentPage.tsx
+++ b/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
-        className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white"
-      >
+      <div className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white">
        {/* Document Info - Left Column */}
-        <div
-          className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80"
-        >
+        <div 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">
-              {new Date(document.created_at).toLocaleDateString()}
-            </p>
+            <p className="font-medium">{new Date(document.created_at).toLocaleDateString()}</p>
          </div>
          <div>
            <p className="text-gray-500">Updated</p>
-            <p className="font-medium">
-              {new Date(document.updated_at).toLocaleDateString()}
-            </p>
+            <p className="font-medium">{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">
-                {niceSeconds(totalTimeLeftSeconds)}
-              </p>
+              <p className="whitespace-nowrap font-medium">{niceSeconds(totalTimeLeftSeconds)}</p>
            </div>
          </div>
        )}
--- a/frontend/src/pages/DocumentsPage.tsx
+++ b/frontend/src/pages/DocumentsPage.tsx
@@ -35,9 +35,7 @@ function DocumentCard({ doc }: DocumentCardProps) {

  return (
    <div className="relative w-full">
-      <div
-        className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700"
-      >
+      <div 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
-          className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400"
-        >
+        <div 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
-        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"
-      >
+      <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">
        <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
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
+              <span 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
-        className="fixed bottom-6 right-6 flex items-center justify-center rounded-full"
-      >
+      <div 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
-            method="POST"
-            encType="multipart/form-data"
-            className="flex flex-col gap-2"
-          >
+          <form 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);
              }}
--- a/frontend/src/pages/HomePage.tsx
+++ b/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
-          title="Documents"
-          size={dbInfo?.documents_size || 0}
-          link="./documents"
-        />
-        <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}
-        />
+        <InfoCard title="Documents" size={dbInfo?.documents_size || 0} link="./documents" />
+        <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 */}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/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
-            className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32"
-          >
+          <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">
            <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
--- a/frontend/src/pages/SearchPage.tsx
+++ b/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
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
+        <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">
          <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
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
+                <span 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
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
+              <span 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
-            className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700"
-          >
+          <table 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
-                  className="w-12 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"
-                >
+                <th className="w-12 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
-                  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">
                  Series
                </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">
                  Type
                </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">
                  Size
                </th>
-                <th
-                  className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800"
-                >
+                <th className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800">
                  Date
                </th>
              </tr>
@@ -101,23 +83,24 @@ 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 &&
+                results &&
+                results.map((item: any) => (
                  <tr key={item.id}>
-                  <td
-                    className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500"
-                  >
-                    <button
-                      className="hover:text-purple-600"
-                      title="Download"
-                    >
+                    <td className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500">
+                      <button className="hover:text-purple-600" title="Download">
                        <Download size={15} />
                      </button>
                    </td>
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/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
-          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"
-        >
+        <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">
          <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
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
+        <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">
          <p className="mb-2 text-lg font-semibold">Change Password</p>
-          <form
-            className="flex flex-col gap-4 lg:flex-row"
-            onSubmit={handlePasswordSubmit}
-          >
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handlePasswordSubmit}>
            <div className="flex grow flex-col">
              <div className="relative flex">
-                <span
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
+                <span 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
-                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-                >
+                <span 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
-          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
+        <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">
          <p className="mb-2 text-lg font-semibold">Change Timezone</p>
-          <form
-            className="flex flex-col gap-4 lg:flex-row"
-            onSubmit={handleTimezoneSubmit}
-          >
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleTimezoneSubmit}>
            <div className="relative flex grow">
-              <span
-                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
-              >
+              <span 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
-          className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
-        >
+        <div 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
-                  className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800"
-                >
+                <th className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800">
                  Name
                </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">
                  Last Sync
                </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">
                  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>
                ))