feat: add administration page and account role management

- Implemented `AdministrationContent` component for managing account roles.
- Created `AdministrationPage` to serve as the main entry point for administration tasks.
- Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation.
- Introduced `InputColor` component for advanced color selection with various formats.
- Established color conversion utilities in `color-converter.ts` for handling color formats.
- Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.

README.md

@@ -44,22 +44,26 @@ A modern, professional invoicing application built for freelancers and small bus
 ### Quick Start
 
 1. **Clone the repository**
+
    ```bash
    git clone https://github.com/yourusername/beenvoice.git
    cd beenvoice
    ```
 
 2. **Install dependencies**
+
    ```bash
    bun install
    ```
 
 3. **Set up environment variables**
+
    ```bash
    cp .env.example .env.local
    ```
 
    Edit `.env.local` and add your configuration:
+
    ```env
    # Database
    DATABASE_URL="postgresql://postgres:password@localhost:5432/beenvoice"
@@ -78,17 +82,20 @@ A modern, professional invoicing application built for freelancers and small bus
    RESEND_DOMAIN="yourdomain.com"
    ```
 
-4. **Start the database**
+4. **Start the development database**
+
    ```bash
-   docker-compose up -d
+   docker compose -f docker-compose.dev.yml up -d db
    ```
 
 5. **Push the database schema**
+
    ```bash
    bun run db:push
    ```
 
 6. **Start the development server**
+
    ```bash
    bun run dev
    ```
@@ -123,7 +130,8 @@ beenvoice/
 ├── drizzle/                  # Database migrations
 ├── public/                   # Static assets
 ├── docs/                     # Documentation
-└── docker-compose.yml        # Local PostgreSQL setup
+├── docker-compose.yml        # Deployment compose stack
+└── docker-compose.dev.yml    # Development overrides with exposed PostgreSQL
 ```
 
 ## 🎯 Usage
@@ -155,12 +163,14 @@ beenvoice/
 ### Features Overview
 
 #### Client Management
+
 - Create and edit client profiles
 - Store contact information and addresses
 - Set default hourly rates per client
 - Search and filter client list
 
 #### Invoice Creation
+
 - Select from existing clients and business profiles
 - Add multiple line items with drag-and-drop reordering
 - Set custom rates per item
@@ -169,12 +179,14 @@ beenvoice/
 - Professional invoice formatting
 
 #### Invoice Delivery
+
 - Send invoices via email directly from the app
 - Rich text email composer with preview
 - Resend and re-deliver sent invoices
 - Track invoice status: Draft → Sent → Paid (+ Overdue)
 
 #### User Interface
+
 - Clean, modern design
 - Fully responsive — desktop, tablet, and mobile
 - Intuitive navigation with breadcrumbs
@@ -198,7 +210,8 @@ bun run db:studio    # Open Drizzle Studio
 bun run db:generate  # Generate new migration
 
 # Docker
-bun run docker:up    # Start local PostgreSQL via Docker
+bun run docker:up    # Start deployment compose stack
+bun run docker:dev:up # Start development compose stack with exposed PostgreSQL
 bun run docker:down  # Stop Docker services
 
 # Code Quality
@@ -208,6 +221,24 @@ bun run format:write # Format code with Prettier
 bun run typecheck    # Run TypeScript type checking
 ```
 
+### Docker Compose
+
+Use the base compose file for deployment. It keeps PostgreSQL internal to the
+compose network:
+
+```bash
+docker compose up -d
+```
+
+For local development, use the dev compose file to expose PostgreSQL on
+`${POSTGRES_PORT:-5432}`:
+
+```bash
+docker compose -f docker-compose.dev.yml up -d
+```
+
+Set `DISABLE_SIGNUPS=true` to block new email/password account registration.
+
 ### Database Schema
 
 The application uses the following core tables:
@@ -243,6 +274,7 @@ The app uses Tailwind CSS v4 with a custom design system:
 ### Branding
 
 Update the logo and colors in:
+
 - `src/components/logo.tsx` - Main logo component
 - `src/styles/globals.css` - Color variables
 - `src/app/layout.tsx` - Font configuration
@@ -252,6 +284,7 @@ Update the logo and colors in:
 You can deploy this application to any platform that supports Next.js and PostgreSQL (Docker, Coolify, Railway, etc.).
 
 1. **Build the application:**
+
    ```bash
    bun run build
    ```
@@ -259,6 +292,7 @@ You can deploy this application to any platform that supports Next.js and Postgr
 2. **Set up production environment variables** (see `.env.local` example above, adjusting URLs and secrets for production)
 
 3. **Run database migrations:**
+
    ```bash
    bun run db:push
    ```

bun.lock

@@ -10,6 +10,7 @@
         "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
+        "@fontsource-variable/playfair-display": "^5.2.8",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -50,11 +51,12 @@
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.26",
         "lucide-react": "^0.525.0",
-        "next": "^16.2.2",
+        "next": "^16.2.4",
         "pg": "8.13.1",
-        "react": "^19.2.4",
+        "react": "^19.2.5",
+        "react-colorful": "^5.6.1",
         "react-day-picker": "^9.12.0",
-        "react-dom": "^19.2.4",
+        "react-dom": "^19.2.5",
         "react-dropzone": "^14.3.8",
         "recharts": "^3.5.1",
         "resend": "^4.8.0",
@@ -71,12 +73,13 @@
         "@types/node": "^20.19.26",
         "@types/pg": "^8.16.0",
         "@types/raf": "^3.4.3",
-        "@types/react": "^19.2.7",
+        "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
-        "baseline-browser-mapping": "^2.9.6",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "baseline-browser-mapping": "^2.10.24",
         "drizzle-kit": "^0.30.6",
         "eslint": "^9.39.1",
-        "eslint-config-next": "^16.0.10",
+        "eslint-config-next": "^16.2.4",
         "eslint-plugin-drizzle": "^0.2.3",
         "postcss": "^8.5.6",
         "prettier": "3.6.2",
@@ -250,6 +253,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
 
+    "@fontsource-variable/playfair-display": ["@fontsource-variable/playfair-display@5.2.8", "", {}, "sha512-ZzVIXPOrL85yyOvZYoBzUszIJM+xKkHqni4IYn2CVLaGQQdJR8sBeC8yFNgjxSJ7ludTwta8qpULeOFuk5X75A=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.2", "", { "dependencies": { "@humanfs/types": "^0.15.0" } }, "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.8", "", { "dependencies": { "@humanfs/core": "^0.19.2", "@humanfs/types": "^0.15.0", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ=="],
@@ -750,11 +755,13 @@
 
     "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
 
+    "babel-plugin-react-compiler": ["babel-plugin-react-compiler@1.0.0", "", { "dependencies": { "@babel/types": "^7.26.0" } }, "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw=="],
+
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
     "base64-js": ["base64-js@0.0.8", "", {}, "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw=="],
 
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.23", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-xwVXGqevyKPsiuQdLj+dZMVjidjJV508TBqexND5HrF89cGdCYCJFB3qhcxRHSeMctdCfbR1jrxBajhDy7o29g=="],
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.24", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-I2NkZOOrj2XuguvWCK6OVh9GavsNjZjK908Rq3mIBK25+GD8vPX5w2WdxVqnQ7xx3SrZJiCiZFu+/Oz50oSYSA=="],
 
     "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
 
@@ -1376,6 +1383,8 @@
 
     "react": ["react@19.2.5", "", {}, "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="],
 
+    "react-colorful": ["react-colorful@5.6.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw=="],
+
     "react-day-picker": ["react-day-picker@9.14.0", "", { "dependencies": { "@date-fns/tz": "^1.4.1", "@tabby_ai/hijri-converter": "1.0.5", "date-fns": "^4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA=="],
 
     "react-dom": ["react-dom@19.2.5", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.5" } }, "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag=="],
@@ -1692,6 +1701,8 @@
 
     "brotli/base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
+    "browserslist/baseline-browser-mapping": ["baseline-browser-mapping@2.10.23", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-xwVXGqevyKPsiuQdLj+dZMVjidjJV508TBqexND5HrF89cGdCYCJFB3qhcxRHSeMctdCfbR1jrxBajhDy7o29g=="],
+
     "color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
 
     "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
@@ -1714,6 +1725,8 @@
 
     "micromatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
+    "next/baseline-browser-mapping": ["baseline-browser-mapping@2.10.23", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-xwVXGqevyKPsiuQdLj+dZMVjidjJV508TBqexND5HrF89cGdCYCJFB3qhcxRHSeMctdCfbR1jrxBajhDy7o29g=="],
+
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
     "node-exports-info/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],

docker-compose.dev.yml

@@ -0,0 +1,21 @@
+services:
+  db:
+    image: postgres:17-alpine
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-postgres}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+      POSTGRES_DB: ${POSTGRES_DB:-postgres}
+    volumes:
+      - beenvoice_dev_pg_data:/var/lib/postgresql/data
+    healthcheck:
+      test:
+        ["CMD-SHELL", 'pg_isready -U "$${POSTGRES_USER}" -d "$${POSTGRES_DB}"']
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    restart: unless-stopped
+
+volumes:
+  beenvoice_dev_pg_data:

docker-compose.yml

@@ -15,6 +15,7 @@ services:
       NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${NEXT_PUBLIC_UMAMI_WEBSITE_ID:-}
       NEXT_PUBLIC_UMAMI_SCRIPT_URL: ${NEXT_PUBLIC_UMAMI_SCRIPT_URL:-https://analytics.umami.is/script.js}
       NEXT_PUBLIC_AUTHENTIK_ENABLED: ${NEXT_PUBLIC_AUTHENTIK_ENABLED:-false}
+      DISABLE_SIGNUPS: ${DISABLE_SIGNUPS:-false}
       AUTHENTIK_ISSUER: ${AUTHENTIK_ISSUER:-}
       AUTHENTIK_CLIENT_ID: ${AUTHENTIK_CLIENT_ID:-}
       AUTHENTIK_CLIENT_SECRET: ${AUTHENTIK_CLIENT_SECRET:-}
@@ -35,7 +36,8 @@ services:
     volumes:
       - beenvoice_pg_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U \"$${POSTGRES_USER}\" -d \"$${POSTGRES_DB}\""]
+      test:
+        ["CMD-SHELL", 'pg_isready -U "$${POSTGRES_USER}" -d "$${POSTGRES_DB}"']
       interval: 5s
       timeout: 5s
       retries: 10

next.config.js

@@ -7,6 +7,7 @@ import "./src/env.js";
 /** @type {import("next").NextConfig} */
 const config = {
   output: "standalone",
+  reactCompiler: true,
   serverExternalPackages: ["pg"],
 };
 

package.json

@@ -11,8 +11,9 @@
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "db:clone": "./scripts/clone-local.sh",
-    "docker:up": "colima start && docker compose up -d",
-    "docker:down": "docker compose down && colima stop",
+    "docker:up": "colima start && docker compose -f docker-compose.dev.yml up -d",
+    "docker:down": "docker compose -f docker-compose.dev.yml down && colima stop",
+    "docker:dev:down": "docker compose -f docker-compose.dev.yml down && colima stop",
     "deploy": "drizzle-kit push && next build",
     "dev": "next dev --turbo",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
@@ -29,6 +30,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource-variable/playfair-display": "^5.2.8",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -69,11 +71,12 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^12.23.26",
     "lucide-react": "^0.525.0",
-    "next": "^16.2.2",
+    "next": "^16.2.4",
     "pg": "8.13.1",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^9.12.0",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
     "react-dropzone": "^14.3.8",
     "recharts": "^3.5.1",
     "resend": "^4.8.0",
@@ -90,12 +93,13 @@
     "@types/node": "^20.19.26",
     "@types/pg": "^8.16.0",
     "@types/raf": "^3.4.3",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "baseline-browser-mapping": "^2.9.6",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "baseline-browser-mapping": "^2.10.24",
     "drizzle-kit": "^0.30.6",
     "eslint": "^9.39.1",
-    "eslint-config-next": "^16.0.10",
+    "eslint-config-next": "^16.2.4",
     "eslint-plugin-drizzle": "^0.2.3",
     "postcss": "^8.5.6",
     "prettier": "3.6.2",

src/app/(legal)/terms/page.tsx

@@ -35,9 +35,10 @@ export default function TermsOfServicePage() {
             </CardHeader>
             <CardContent className="prose prose-sm max-w-none">
               <p>
-                These Terms of Service (&quot;Terms&quot;) govern your use of the
-                beenvoice platform and services (the &quot;Service&quot;) operated by
-                beenvoice (&quot;us&quot;, &quot;we&quot;, or &quot;our&quot;).
+                These Terms of Service (&quot;Terms&quot;) govern your use of
+                the beenvoice platform and services (the &quot;Service&quot;)
+                operated by beenvoice (&quot;us&quot;, &quot;we&quot;, or
+                &quot;our&quot;).
               </p>
               <p>
                 By accessing or using our Service, you agree to be bound by

src/app/api/auth/register/route.ts

@@ -2,59 +2,97 @@ import bcrypt from "bcryptjs";
 import { eq } from "drizzle-orm";
 import { type NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
+import { env } from "~/env";
 import { db } from "~/server/db";
-import { users } from "~/server/db/schema";
+import { accounts, users } from "~/server/db/schema";
 
 const registerSchema = z.object({
-  firstName: z.string().min(1, "First name is required"),
-  lastName: z.string().min(1, "Last name is required"),
+  firstName: z.string().trim().min(1, "First name is required"),
+  lastName: z.string().trim().min(1, "Last name is required"),
   email: z.string().email("Invalid email address"),
-  password: z.string().min(6, "Password must be at least 6 characters"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
 });
 
+const fieldLabels: Record<string, string> = {
+  firstName: "First name",
+  lastName: "Last name",
+  email: "Email address",
+  password: "Password",
+};
+
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json() as z.infer<typeof registerSchema>;
+    if (env.DISABLE_SIGNUPS === true) {
+      return NextResponse.json(
+        { error: "New account registration is currently disabled" },
+        { status: 403 },
+      );
+    }
+
+    const body = (await request.json()) as unknown;
     const { firstName, lastName, email, password } = registerSchema.parse(body);
+    const normalizedEmail = email.toLowerCase();
 
     // Check if user already exists
     const existingUser = await db.query.users.findFirst({
-      where: eq(users.email, email),
+      where: eq(users.email, normalizedEmail),
     });
 
     if (existingUser) {
       return NextResponse.json(
         { error: "User with this email already exists" },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
     // Hash password
     const hashedPassword = await bcrypt.hash(password, 12);
 
-    // Create user
-    await db.insert(users).values({
-      name: `${firstName} ${lastName}`,
-      email,
-      password: hashedPassword,
+    await db.transaction(async (tx) => {
+      const [user] = await tx
+        .insert(users)
+        .values({
+          name: `${firstName} ${lastName}`,
+          email: normalizedEmail,
+          password: hashedPassword,
+        })
+        .returning({ id: users.id });
+
+      if (!user) {
+        throw new Error("Failed to create user");
+      }
+
+      await tx.insert(accounts).values({
+        userId: user.id,
+        accountId: user.id,
+        providerId: "credential",
+        password: hashedPassword,
+      });
     });
 
     return NextResponse.json(
       { message: "User created successfully" },
-      { status: 201 }
+      { status: 201 },
     );
   } catch (error) {
     if (error instanceof z.ZodError) {
+      const issue = error.errors[0];
+      const field = issue?.path[0];
+      const fallback =
+        typeof field === "string"
+          ? `${fieldLabels[field] ?? field} is required`
+          : "Please check the registration form";
+
       return NextResponse.json(
-        { error: error.errors[0]?.message ?? "Validation error" },
-        { status: 400 }
+        { error: issue?.message === "Required" ? fallback : issue?.message },
+        { status: 400 },
       );
     }
 
     console.error("Registration error:", error);
     return NextResponse.json(
       { error: "Internal server error" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

src/app/api/auth/reset-password/route.ts

@@ -2,7 +2,7 @@ import { type NextRequest, NextResponse } from "next/server";
 import { eq, and, gt } from "drizzle-orm";
 import bcrypt from "bcryptjs";
 import { db } from "~/server/db";
-import { users } from "~/server/db/schema";
+import { accounts, users } from "~/server/db/schema";
 
 export async function POST(request: NextRequest) {
   try {
@@ -47,15 +47,40 @@ export async function POST(request: NextRequest) {
     // Hash the new password
     const hashedPassword = await bcrypt.hash(password, 12);
 
-    // Update user with new password and clear reset token
-    await db
-      .update(users)
-      .set({
-        password: hashedPassword,
-        resetToken: null,
-        resetTokenExpiry: null,
-      })
-      .where(eq(users.id, user.id));
+    await db.transaction(async (tx) => {
+      await tx
+        .update(users)
+        .set({
+          password: hashedPassword,
+          resetToken: null,
+          resetTokenExpiry: null,
+        })
+        .where(eq(users.id, user.id));
+
+      const credentialAccount = await tx.query.accounts.findFirst({
+        where: and(
+          eq(accounts.userId, user.id),
+          eq(accounts.providerId, "credential"),
+        ),
+      });
+
+      if (credentialAccount) {
+        await tx
+          .update(accounts)
+          .set({
+            password: hashedPassword,
+            updatedAt: new Date(),
+          })
+          .where(eq(accounts.id, credentialAccount.id));
+      } else {
+        await tx.insert(accounts).values({
+          userId: user.id,
+          accountId: user.id,
+          providerId: "credential",
+          password: hashedPassword,
+        });
+      }
+    });
 
     return NextResponse.json(
       {

src/app/auth/register/page.tsx

@@ -28,7 +28,8 @@ function RegisterForm() {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        name: `${firstName} ${lastName}`,
+        firstName,
+        lastName,
         email,
         password,
       }),

src/app/auth/reset-password/page.tsx

@@ -29,11 +29,12 @@ function ResetPasswordForm() {
   const [success, setSuccess] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [tokenValid, setTokenValid] = useState<boolean | null>(null);
+  const [tokenValid, setTokenValid] = useState<boolean | null>(() =>
+    token ? null : false,
+  );
 
   useEffect(() => {
     if (!token) {
-      setTokenValid(false);
       return;
     }
 

src/app/auth/signin/page.tsx

@@ -1,290 +1,11 @@
-"use client";
-
-import { useState, Suspense } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { authClient } from "~/lib/auth-client";
-import { Card, CardContent } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import { toast } from "sonner";
-import { Logo } from "~/components/branding/logo";
-import { LegalModal } from "~/components/ui/legal-modal";
+import { Suspense } from "react";
 import { env } from "~/env";
-import {
-  Mail,
-  Lock,
-  ArrowRight,
-  Users,
-  FileText,
-  TrendingUp,
-  Shield,
-} from "lucide-react";
-
-function SignInForm() {
-  const authentikEnabled = env.NEXT_PUBLIC_AUTHENTIK_ENABLED === true;
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  async function handleSignIn(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-
-    const { error } = await authClient.signIn.email({
-      email,
-      password,
-    });
-
-    setLoading(false);
-
-    if (error) {
-      toast.error(error.message ?? "Invalid email or password");
-    } else {
-      toast.success("Signed in successfully!");
-      router.push(callbackUrl);
-      router.refresh();
-    }
-  }
-
-  async function handleSocialSignIn() {
-    setLoading(true);
-    try {
-      await authClient.signIn.oauth2({
-        providerId: "authentik",
-        callbackURL: callbackUrl,
-      });
-      // The signIn.sso method will automatically redirect to the SSO provider
-    } catch (error) {
-      console.error("[SSO Error]", error);
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
-      {/* Blob Background */}
-      <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
-        <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
-      </div>
-
-      <Card className="md:bg-background/80 md:border-border/50 mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:rounded-3xl md:border md:shadow-2xl md:backdrop-blur-xl">
-        <CardContent className="grid h-full p-0 md:grid-cols-2">
-          {/* Hero Section - Hidden on mobile */}
-          <div className="bg-primary/5 border-border/50 relative hidden border-r md:flex md:flex-col md:justify-center md:p-12">
-            <div className="space-y-8">
-              <div className="space-y-4">
-                <Logo size="xl" />
-                <div className="space-y-3">
-                  <h1 className="font-heading text-3xl font-bold lg:text-4xl">
-                    Welcome back to your
-                    <span className="text-primary italic">
-                      {" "}
-                      invoicing workspace
-                    </span>
-                  </h1>
-                  <p className="text-muted-foreground text-lg">
-                    Continue managing your clients and creating professional
-                    invoices that get you paid faster.
-                  </p>
-                </div>
-              </div>
-
-              <div className="grid gap-6">
-                <div className="flex items-start space-x-4">
-                  <div className="bg-primary/10 rounded-xl p-3">
-                    <Users className="text-primary h-5 w-5" />
-                  </div>
-                  <div className="space-y-1">
-                    <h3 className="text-foreground font-semibold">
-                      Client Management
-                    </h3>
-                    <p className="text-muted-foreground text-sm">
-                      Organize and track all your clients in one place
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-4">
-                  <div className="bg-primary/10 rounded-xl p-3">
-                    <FileText className="text-primary h-5 w-5" />
-                  </div>
-                  <div className="space-y-1">
-                    <h3 className="text-foreground font-semibold">
-                      Professional Invoices
-                    </h3>
-                    <p className="text-muted-foreground text-sm">
-                      Beautiful templates that get you paid faster
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-start space-x-4">
-                  <div className="bg-primary/10 rounded-xl p-3">
-                    <TrendingUp className="text-primary h-5 w-5" />
-                  </div>
-                  <div className="space-y-1">
-                    <h3 className="text-foreground font-semibold">
-                      Payment Tracking
-                    </h3>
-                    <p className="text-muted-foreground text-sm">
-                      Monitor your income with real-time insights
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Sign In Form */}
-          <div className="flex flex-col justify-center p-6 md:p-12">
-            <div className="mx-auto w-full max-w-sm space-y-6">
-              {/* Mobile Logo */}
-              <div className="flex justify-center md:hidden">
-                <Logo size="lg" />
-              </div>
-
-              <div className="space-y-2 text-center md:text-left">
-                <h1 className="font-heading text-3xl font-bold">Sign In</h1>
-                <p className="text-muted-foreground">
-                  Enter your credentials to access your account
-                </p>
-              </div>
-
-              {authentikEnabled && (
-                <div className="space-y-4">
-                  <Button
-                    variant="outline"
-                    type="button"
-                    className="relative h-11 w-full rounded-xl"
-                    onClick={handleSocialSignIn}
-                    disabled={loading}
-                  >
-                    <Shield className="mr-2 h-4 w-4" />
-                    Sign in with Authentik
-                  </Button>
-
-                  <div className="relative">
-                    <div className="absolute inset-0 flex items-center">
-                      <span className="border-border/50 w-full border-t" />
-                    </div>
-                    <div className="relative flex justify-center text-xs uppercase">
-                      <span className="bg-background text-muted-foreground px-2">
-                        Or continue with
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              <form onSubmit={handleSignIn} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email Address</Label>
-                  <div className="relative">
-                    <Mail className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
-                    <Input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      required
-                      autoFocus
-                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
-                      placeholder="m@example.com"
-                    />
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="password">Password</Label>
-                    <a
-                      href="/auth/forgot-password"
-                      className="text-primary text-sm hover:underline"
-                    >
-                      Forgot password?
-                    </a>
-                  </div>
-                  <div className="relative">
-                    <Lock className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
-                    <Input
-                      id="password"
-                      type="password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      required
-                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
-                      placeholder="Enter your password"
-                    />
-                  </div>
-                </div>
-
-                <Button
-                  type="submit"
-                  className="shadow-primary/20 hover:shadow-primary/30 h-11 w-full rounded-xl text-base shadow-lg"
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <div className="flex items-center space-x-2">
-                      <div className="border-primary-foreground/30 border-t-primary-foreground h-4 w-4 animate-spin rounded-full border-2"></div>
-                      <span>Signing in...</span>
-                    </div>
-                  ) : (
-                    <div className="flex items-center space-x-2">
-                      <span>Sign In</span>
-                      <ArrowRight className="h-4 w-4" />
-                    </div>
-                  )}
-                </Button>
-              </form>
-
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a
-                  href="/auth/register"
-                  className="text-primary font-medium hover:underline"
-                >
-                  Sign up
-                </a>
-              </div>
-
-              <div className="text-muted-foreground text-center text-xs leading-relaxed">
-                By signing in, you agree to our{" "}
-                <LegalModal
-                  type="terms"
-                  trigger={
-                    <span className="text-primary inline cursor-pointer hover:underline">
-                      Terms of Service
-                    </span>
-                  }
-                />{" "}
-                and{" "}
-                <LegalModal
-                  type="privacy"
-                  trigger={
-                    <span className="text-primary inline cursor-pointer hover:underline">
-                      Privacy Policy
-                    </span>
-                  }
-                />
-                .
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
+import { SignInForm } from "./signin-form";
 
 export default function SignInPage() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <SignInForm />
+      <SignInForm allowRegistration={env.DISABLE_SIGNUPS !== true} />
     </Suspense>
   );
 }

src/app/auth/signin/signin-form.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { authClient } from "~/lib/auth-client";
+import { Card, CardContent } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import { toast } from "sonner";
+import { Logo } from "~/components/branding/logo";
+import { LegalModal } from "~/components/ui/legal-modal";
+import { env } from "~/env";
+import {
+  Mail,
+  Lock,
+  ArrowRight,
+  Users,
+  FileText,
+  TrendingUp,
+  Shield,
+} from "lucide-react";
+
+interface SignInFormProps {
+  allowRegistration: boolean;
+}
+
+export function SignInForm({ allowRegistration }: SignInFormProps) {
+  const authentikEnabled = env.NEXT_PUBLIC_AUTHENTIK_ENABLED === true;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
+  const signupDisabled = searchParams.get("signup") === "disabled";
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSignIn(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+
+    const { error } = await authClient.signIn.email({
+      email,
+      password,
+    });
+
+    setLoading(false);
+
+    if (error) {
+      toast.error(error.message ?? "Invalid email or password");
+    } else {
+      toast.success("Signed in successfully!");
+      router.push(callbackUrl);
+      router.refresh();
+    }
+  }
+
+  async function handleSocialSignIn() {
+    setLoading(true);
+    try {
+      await authClient.signIn.oauth2({
+        providerId: "authentik",
+        callbackURL: callbackUrl,
+      });
+      // The signIn.sso method will automatically redirect to the SSO provider
+    } catch (error) {
+      console.error("[SSO Error]", error);
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
+      {/* Blob Background */}
+      <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+        <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
+      </div>
+
+      <Card className="md:bg-background/80 md:border-border/50 mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:rounded-3xl md:border md:shadow-2xl md:backdrop-blur-xl">
+        <CardContent className="grid h-full p-0 md:grid-cols-2">
+          {/* Hero Section - Hidden on mobile */}
+          <div className="bg-primary/5 border-border/50 relative hidden border-r md:flex md:flex-col md:justify-center md:p-12">
+            <div className="space-y-8">
+              <div className="space-y-4">
+                <Logo size="xl" />
+                <div className="space-y-3">
+                  <h1 className="font-heading text-3xl font-bold lg:text-4xl">
+                    Welcome back to your
+                    <span className="text-primary italic">
+                      {" "}
+                      invoicing workspace
+                    </span>
+                  </h1>
+                  <p className="text-muted-foreground text-lg">
+                    Continue managing your clients and creating professional
+                    invoices that get you paid faster.
+                  </p>
+                </div>
+              </div>
+
+              <div className="grid gap-6">
+                <div className="flex items-start space-x-4">
+                  <div className="bg-primary/10 rounded-xl p-3">
+                    <Users className="text-primary h-5 w-5" />
+                  </div>
+                  <div className="space-y-1">
+                    <h3 className="text-foreground font-semibold">
+                      Client Management
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      Organize and track all your clients in one place
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start space-x-4">
+                  <div className="bg-primary/10 rounded-xl p-3">
+                    <FileText className="text-primary h-5 w-5" />
+                  </div>
+                  <div className="space-y-1">
+                    <h3 className="text-foreground font-semibold">
+                      Professional Invoices
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      Beautiful templates that get you paid faster
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start space-x-4">
+                  <div className="bg-primary/10 rounded-xl p-3">
+                    <TrendingUp className="text-primary h-5 w-5" />
+                  </div>
+                  <div className="space-y-1">
+                    <h3 className="text-foreground font-semibold">
+                      Payment Tracking
+                    </h3>
+                    <p className="text-muted-foreground text-sm">
+                      Monitor your income with real-time insights
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Sign In Form */}
+          <div className="flex flex-col justify-center p-6 md:p-12">
+            <div className="mx-auto w-full max-w-sm space-y-6">
+              {/* Mobile Logo */}
+              <div className="flex justify-center md:hidden">
+                <Logo size="lg" />
+              </div>
+
+              <div className="space-y-2 text-center md:text-left">
+                <h1 className="font-heading text-3xl font-bold">Sign In</h1>
+                <p className="text-muted-foreground">
+                  Enter your credentials to access your account
+                </p>
+              </div>
+
+              {signupDisabled && (
+                <div className="border-border bg-muted/50 text-muted-foreground rounded-lg border px-3 py-2 text-sm">
+                  New account registration is currently disabled.
+                </div>
+              )}
+
+              {authentikEnabled && (
+                <div className="space-y-4">
+                  <Button
+                    variant="outline"
+                    type="button"
+                    className="relative h-11 w-full rounded-xl"
+                    onClick={handleSocialSignIn}
+                    disabled={loading}
+                  >
+                    <Shield className="mr-2 h-4 w-4" />
+                    Sign in with Authentik
+                  </Button>
+
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                      <span className="border-border/50 w-full border-t" />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                      <span className="bg-background text-muted-foreground px-2">
+                        Or continue with
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <form onSubmit={handleSignIn} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email">Email Address</Label>
+                  <div className="relative">
+                    <Mail className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      autoFocus
+                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
+                      placeholder="m@example.com"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="password">Password</Label>
+                    <a
+                      href="/auth/forgot-password"
+                      className="text-primary text-sm hover:underline"
+                    >
+                      Forgot password?
+                    </a>
+                  </div>
+                  <div className="relative">
+                    <Lock className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
+                    <Input
+                      id="password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
+                      placeholder="Enter your password"
+                    />
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  className="shadow-primary/20 hover:shadow-primary/30 h-11 w-full rounded-xl text-base shadow-lg"
+                  disabled={loading}
+                >
+                  {loading ? (
+                    <div className="flex items-center space-x-2">
+                      <div className="border-primary-foreground/30 border-t-primary-foreground h-4 w-4 animate-spin rounded-full border-2"></div>
+                      <span>Signing in...</span>
+                    </div>
+                  ) : (
+                    <div className="flex items-center space-x-2">
+                      <span>Sign In</span>
+                      <ArrowRight className="h-4 w-4" />
+                    </div>
+                  )}
+                </Button>
+              </form>
+
+              {allowRegistration && (
+                <div className="text-center text-sm">
+                  Don&apos;t have an account?{" "}
+                  <a
+                    href="/auth/register"
+                    className="text-primary font-medium hover:underline"
+                  >
+                    Sign up
+                  </a>
+                </div>
+              )}
+
+              <div className="text-muted-foreground text-center text-xs leading-relaxed">
+                By signing in, you agree to our{" "}
+                <LegalModal
+                  type="terms"
+                  trigger={
+                    <span className="text-primary inline cursor-pointer hover:underline">
+                      Terms of Service
+                    </span>
+                  }
+                />{" "}
+                and{" "}
+                <LegalModal
+                  type="privacy"
+                  trigger={
+                    <span className="text-primary inline cursor-pointer hover:underline">
+                      Privacy Policy
+                    </span>
+                  }
+                />
+                .
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function SignInPageClient() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SignInForm allowRegistration />
+    </Suspense>
+  );
+}

src/app/dashboard/_components/invoice-status-chart.tsx

@@ -16,6 +16,47 @@ interface InvoiceStatusChartProps {
   invoices: Invoice[];
 }
 
+const STATUS_COLORS = {
+  draft: "hsl(0, 0%, 60%)",
+  sent: "hsl(217, 91%, 60%)",
+  pending: "hsl(217, 91%, 60%)",
+  paid: "hsl(142, 71%, 45%)",
+  overdue: "hsl(var(--destructive))",
+} as const;
+
+const formatChartCurrency = (value: number) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+};
+
+function StatusTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    payload: { name: string; count: number; value: number };
+  }>;
+}) {
+  if (active && payload?.length) {
+    const data = payload[0]!.payload;
+    return (
+      <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
+        <p className="font-medium">{data.name}</p>
+        <p className="text-sm">
+          {data.count} invoice{data.count !== 1 ? "s" : ""}
+        </p>
+        <p className="text-sm">{formatChartCurrency(data.value)}</p>
+      </div>
+    );
+  }
+  return null;
+}
+
 export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
   // Process invoice data to create status breakdown
   const statusData = invoices.reduce(
@@ -44,14 +85,6 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
     name: item.status.charAt(0).toUpperCase() + item.status.slice(1),
   }));
 
-  // Use theme-aware colors
-  const COLORS = {
-    draft: "hsl(0, 0%, 60%)", // neutral grey - matches monthly metrics chart
-    sent: "hsl(217, 91%, 60%)", // vibrant blue
-    pending: "hsl(217, 91%, 60%)", // blue
-    paid: "hsl(142, 71%, 45%)", // vibrant green
-    overdue: "hsl(var(--destructive))", // red
-  };
   // Animation / motion preferences
   const { prefersReducedMotion, animationSpeedMultiplier } =
     useAnimationPreferences();
@@ -59,39 +92,6 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
     600 / (animationSpeedMultiplier || 1),
   );
 
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(value);
-  };
-
-  const CustomTooltip = ({
-    active,
-    payload,
-  }: {
-    active?: boolean;
-    payload?: Array<{
-      payload: { name: string; count: number; value: number };
-    }>;
-  }) => {
-    if (active && payload?.length) {
-      const data = payload[0]!.payload;
-      return (
-        <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
-          <p className="font-medium">{data.name}</p>
-          <p className="text-sm">
-            {data.count} invoice{data.count !== 1 ? "s" : ""}
-          </p>
-          <p className="text-sm">{formatCurrency(data.value)}</p>
-        </div>
-      );
-    }
-    return null;
-  };
-
   if (chartData.length === 0) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -127,11 +127,13 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
               {chartData.map((entry, index) => (
                 <Cell
                   key={`cell-${index}`}
-                  fill={COLORS[entry.status as keyof typeof COLORS]}
+                  fill={
+                    STATUS_COLORS[entry.status as keyof typeof STATUS_COLORS]
+                  }
                 />
               ))}
             </Pie>
-            <Tooltip content={<CustomTooltip />} />
+            <Tooltip content={<StatusTooltip />} />
           </PieChart>
         </ResponsiveContainer>
       </div>
@@ -144,7 +146,8 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
               <div
                 className="h-3 w-3 rounded-full"
                 style={{
-                  backgroundColor: COLORS[item.status as keyof typeof COLORS],
+                  backgroundColor:
+                    STATUS_COLORS[item.status as keyof typeof STATUS_COLORS],
                 }}
               />
               <span className="text-sm font-medium">{item.name}</span>
@@ -152,7 +155,7 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
             <div className="text-right">
               <p className="text-sm font-medium">{item.count}</p>
               <p className="text-muted-foreground text-xs">
-                {formatCurrency(item.value)}
+                {formatChartCurrency(item.value)}
               </p>
             </div>
           </div>

src/app/dashboard/_components/monthly-metrics-chart.tsx

@@ -24,6 +24,43 @@ interface MonthlyMetricsChartProps {
   invoices: Invoice[];
 }
 
+function MonthlyMetricsTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    payload: {
+      paidInvoices: number;
+      pendingInvoices: number;
+      overdueInvoices: number;
+      draftInvoices: number;
+      totalInvoices: number;
+    };
+  }>;
+  label?: string;
+}) {
+  if (active && payload?.length) {
+    const data = payload[0]!.payload;
+    return (
+      <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
+        <p className="font-medium">{label}</p>
+        <div className="space-y-1 text-sm">
+          <p className="text-primary font-medium">Paid: {data.paidInvoices}</p>
+          <p className="text-primary/80">Pending: {data.pendingInvoices}</p>
+          <p className="text-destructive">Overdue: {data.overdueInvoices}</p>
+          <p className="text-muted-foreground">Draft: {data.draftInvoices}</p>
+          <p className="text-foreground border-t pt-1 font-medium">
+            Total: {data.totalInvoices}
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return null;
+}
+
 export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
   // Process invoice data to create monthly metrics
   const monthlyData = invoices.reduce(
@@ -95,49 +132,6 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
     500 / (animationSpeedMultiplier || 1),
   );
 
-  const CustomTooltip = ({
-    active,
-    payload,
-    label,
-  }: {
-    active?: boolean;
-    payload?: Array<{
-      payload: {
-        paidInvoices: number;
-        pendingInvoices: number;
-        overdueInvoices: number;
-        draftInvoices: number;
-        totalInvoices: number;
-      };
-    }>;
-    label?: string;
-  }) => {
-    if (active && payload?.length) {
-      const data = payload[0]!.payload;
-      return (
-        <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
-          <p className="font-medium">{label}</p>
-          <div className="space-y-1 text-sm">
-            <p className="text-primary font-medium">Paid: {data.paidInvoices}</p>
-            <p className="text-primary/80">
-              Pending: {data.pendingInvoices}
-            </p>
-            <p className="text-destructive">
-              Overdue: {data.overdueInvoices}
-            </p>
-            <p className="text-muted-foreground">
-              Draft: {data.draftInvoices}
-            </p>
-            <p className="text-foreground font-medium border-t pt-1">
-              Total: {data.totalInvoices}
-            </p>
-          </div>
-        </div>
-      );
-    }
-    return null;
-  };
-
   if (chartData.length === 0) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -169,7 +163,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
               tickLine={false}
               tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
             />
-            <Tooltip content={<CustomTooltip />} />
+            <Tooltip content={<MonthlyMetricsTooltip />} />
             <Bar
               dataKey="draftInvoices"
               stackId="a"
@@ -235,9 +229,7 @@ export function MonthlyMetricsChart({ invoices }: MonthlyMetricsChartProps) {
           <span className="text-xs">Pending</span>
         </div>
         <div className="flex items-center space-x-2">
-          <div
-            className="h-3 w-3 rounded-full bg-destructive"
-          />
+          <div className="bg-destructive h-3 w-3 rounded-full" />
           <span className="text-xs">Overdue</span>
         </div>
       </div>

src/app/dashboard/_components/revenue-chart.tsx

@@ -10,8 +10,6 @@ import {
 } from "recharts";
 import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";
 
-
-
 interface RevenueChartProps {
   data: {
     month: string;
@@ -91,7 +89,11 @@ export function RevenueChart({ data }: RevenueChartProps) {
         <AreaChart data={chartData}>
           <defs>
             <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="hsl(217, 91%, 60%)" stopOpacity={0.4} />
+              <stop
+                offset="5%"
+                stopColor="hsl(217, 91%, 60%)"
+                stopOpacity={0.4}
+              />
               <stop
                 offset="95%"
                 stopColor="hsl(217, 91%, 60%)"

src/app/dashboard/_components/status-manager.tsx

@@ -229,7 +229,7 @@ export function StatusManager({
 
         {/* Overdue Warning */}
         {isOverdue && (
-          <div className="bg-destructive/10 text-destructive flex items-center gap-2  p-3">
+          <div className="bg-destructive/10 text-destructive flex items-center gap-2 p-3">
             <AlertCircle className="h-4 w-4" />
             <span className="text-sm font-medium">
               {daysPastDue} day{daysPastDue !== 1 ? "s" : ""} overdue
@@ -325,7 +325,7 @@ export function StatusManager({
 
         {/* No Email Warning */}
         {!clientEmail && effectiveStatus !== "paid" && (
-          <div className="bg-muted text-muted-foreground  p-3">
+          <div className="bg-muted text-muted-foreground p-3">
             <div className="flex items-center gap-2">
               <AlertCircle className="h-4 w-4" />
               <span className="text-sm font-medium">

src/app/dashboard/administration/_components/administration-content.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { Shield } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { api } from "~/trpc/react";
+
+export function AdministrationContent() {
+  const {
+    data: accounts = [],
+    refetch,
+    error,
+  } = api.settings.listAccounts.useQuery();
+  const updateAccountRoleMutation = api.settings.updateAccountRole.useMutation({
+    onSuccess: () => {
+      toast.success("Account role updated");
+      void refetch();
+    },
+    onError: (mutationError: { message: string }) => {
+      toast.error(`Failed to update role: ${mutationError.message}`);
+    },
+  });
+
+  if (error) {
+    return (
+      <Card className="bg-card border-border border">
+        <CardHeader>
+          <CardTitle className="text-foreground flex items-center gap-2">
+            <Shield className="text-primary h-5 w-5" />
+            Administration
+          </CardTitle>
+          <CardDescription>
+            Administrative access is required for this page.
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-card border-border border">
+      <CardHeader>
+        <CardTitle className="text-foreground flex items-center gap-2">
+          <Shield className="text-primary h-5 w-5" />
+          Accounts
+        </CardTitle>
+        <CardDescription>
+          Manage account access and roles without opening customer data.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {accounts.map((account) => (
+          <div
+            key={account.id}
+            className="border-border flex flex-col gap-3 border p-4 sm:flex-row sm:items-center sm:justify-between"
+          >
+            <div className="min-w-0">
+              <p className="text-sm font-medium">{account.name}</p>
+              <p className="text-muted-foreground truncate text-xs">
+                {account.email}
+              </p>
+              <p className="text-muted-foreground mt-1 text-xs">
+                Created {new Date(account.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+            <Select
+              value={account.role}
+              onValueChange={(role) =>
+                updateAccountRoleMutation.mutate({
+                  userId: account.id,
+                  role: role as "user" | "admin",
+                })
+              }
+            >
+              <SelectTrigger className="w-full sm:w-36">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="user">User</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

src/app/dashboard/administration/page.tsx

@@ -0,0 +1,23 @@
+import { Suspense } from "react";
+import { DataTableSkeleton } from "~/components/data/data-table";
+import { PageHeader } from "~/components/layout/page-header";
+import { HydrateClient } from "~/trpc/server";
+import { AdministrationContent } from "./_components/administration-content";
+
+export default async function AdministrationPage() {
+  return (
+    <div className="page-enter space-y-6">
+      <PageHeader
+        title="Administration"
+        description="Manage account access and platform administration"
+        variant="gradient"
+      />
+
+      <HydrateClient>
+        <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
+          <AdministrationContent />
+        </Suspense>
+      </HydrateClient>
+    </div>
+  );
+}

src/app/dashboard/expenses/page.tsx

@@ -68,20 +68,39 @@ export default function ExpensesPage() {
   const { data: clients = [] } = api.clients.getAll.useQuery();
 
   const create = api.expenses.create.useMutation({
-    onSuccess: () => { toast.success("Expense added"); void utils.expenses.getAll.invalidate(); setOpen(false); setForm(defaultForm); },
+    onSuccess: () => {
+      toast.success("Expense added");
+      void utils.expenses.getAll.invalidate();
+      setOpen(false);
+      setForm(defaultForm);
+    },
     onError: (e) => toast.error(e.message),
   });
   const update = api.expenses.update.useMutation({
-    onSuccess: () => { toast.success("Expense updated"); void utils.expenses.getAll.invalidate(); setOpen(false); setEditId(null); setForm(defaultForm); },
+    onSuccess: () => {
+      toast.success("Expense updated");
+      void utils.expenses.getAll.invalidate();
+      setOpen(false);
+      setEditId(null);
+      setForm(defaultForm);
+    },
     onError: (e) => toast.error(e.message),
   });
   const del = api.expenses.delete.useMutation({
-    onSuccess: () => { toast.success("Expense deleted"); void utils.expenses.getAll.invalidate(); setDeleteId(null); },
+    onSuccess: () => {
+      toast.success("Expense deleted");
+      void utils.expenses.getAll.invalidate();
+      setDeleteId(null);
+    },
     onError: (e) => toast.error(e.message),
   });
 
-  const handleOpen = () => { setEditId(null); setForm(defaultForm); setOpen(true); };
-  const handleEdit = (expense: typeof expenses[0]) => {
+  const handleOpen = () => {
+    setEditId(null);
+    setForm(defaultForm);
+    setOpen(true);
+  };
+  const handleEdit = (expense: (typeof expenses)[0]) => {
     setEditId(expense.id);
     setForm({
       date: new Date(expense.date),
@@ -98,21 +117,45 @@ export default function ExpensesPage() {
     setOpen(true);
   };
   const handleSubmit = () => {
-    if (!form.description.trim()) { toast.error("Description is required"); return; }
-    if (form.amount <= 0) { toast.error("Amount must be greater than 0"); return; }
-    const payload = { ...form, clientId: form.clientId || undefined, category: form.category || undefined, notes: form.notes || undefined, taxDeductible: form.taxDeductible };
+    if (!form.description.trim()) {
+      toast.error("Description is required");
+      return;
+    }
+    if (form.amount <= 0) {
+      toast.error("Amount must be greater than 0");
+      return;
+    }
+    const payload = {
+      ...form,
+      clientId: form.clientId || undefined,
+      category: form.category || undefined,
+      notes: form.notes || undefined,
+      taxDeductible: form.taxDeductible,
+    };
     if (editId) update.mutate({ id: editId, ...payload });
     else create.mutate(payload);
   };
 
   const totalExpenses = expenses.reduce((s, e) => s + e.amount, 0);
-  const billableTotal = expenses.filter((e) => e.billable).reduce((s, e) => s + e.amount, 0);
-  const deductibleTotal = expenses.filter((e) => e.taxDeductible).reduce((s, e) => s + e.amount, 0);
+  const billableTotal = expenses
+    .filter((e) => e.billable)
+    .reduce((s, e) => s + e.amount, 0);
+  const deductibleTotal = expenses
+    .filter((e) => e.taxDeductible)
+    .reduce((s, e) => s + e.amount, 0);
 
   return (
     <div className="page-enter space-y-6 pb-6">
-      <PageHeader title="Expenses" description="Track billable and non-billable expenses" variant="gradient">
-        <Button onClick={handleOpen} variant="default" className="hover-lift shadow-md">
+      <PageHeader
+        title="Expenses"
+        description="Track billable and non-billable expenses"
+        variant="gradient"
+      >
+        <Button
+          onClick={handleOpen}
+          variant="default"
+          className="hover-lift shadow-md"
+        >
           <Plus className="mr-2 h-5 w-5" /> Add Expense
         </Button>
       </PageHeader>
@@ -121,25 +164,39 @@ export default function ExpensesPage() {
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         <Card>
           <CardContent className="p-4">
-            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">Total</p>
-            <p className="mt-1 text-2xl font-bold">{formatCurrency(totalExpenses)}</p>
+            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+              Total
+            </p>
+            <p className="mt-1 text-2xl font-bold">
+              {formatCurrency(totalExpenses)}
+            </p>
           </CardContent>
         </Card>
         <Card>
           <CardContent className="p-4">
-            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">Billable</p>
-            <p className="text-primary mt-1 text-2xl font-bold">{formatCurrency(billableTotal)}</p>
+            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+              Billable
+            </p>
+            <p className="text-primary mt-1 text-2xl font-bold">
+              {formatCurrency(billableTotal)}
+            </p>
           </CardContent>
         </Card>
         <Card>
           <CardContent className="p-4">
-            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">Deductible</p>
-            <p className="mt-1 text-2xl font-bold text-green-600">{formatCurrency(deductibleTotal)}</p>
+            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+              Deductible
+            </p>
+            <p className="mt-1 text-2xl font-bold text-green-600">
+              {formatCurrency(deductibleTotal)}
+            </p>
           </CardContent>
         </Card>
         <Card>
           <CardContent className="p-4">
-            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wide">Count</p>
+            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+              Count
+            </p>
             <p className="mt-1 text-2xl font-bold">{expenses.length}</p>
           </CardContent>
         </Card>
@@ -154,34 +211,84 @@ export default function ExpensesPage() {
         </CardHeader>
         <CardContent className="p-0">
           {isLoading ? (
-            <div className="p-6 text-center text-sm text-muted-foreground">Loading…</div>
+            <div className="text-muted-foreground p-6 text-center text-sm">
+              Loading…
+            </div>
           ) : expenses.length === 0 ? (
             <div className="p-8 text-center">
               <Receipt className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-              <p className="text-muted-foreground text-sm">No expenses yet. Add your first expense.</p>
+              <p className="text-muted-foreground text-sm">
+                No expenses yet. Add your first expense.
+              </p>
             </div>
           ) : (
             <div className="divide-y">
               {expenses.map((expense) => (
-                <div key={expense.id} className="flex items-start justify-between gap-3 p-4">
+                <div
+                  key={expense.id}
+                  className="flex items-start justify-between gap-3 p-4"
+                >
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
                       <p className="font-medium">{expense.description}</p>
-                      {expense.billable && <Badge variant="secondary" className="text-xs">Billable</Badge>}
-                      {expense.reimbursable && <Badge variant="outline" className="text-xs">Reimbursable</Badge>}
-                      {expense.taxDeductible && <Badge variant="outline" className="text-xs text-green-600 border-green-300">Tax Deductible</Badge>}
-                      {expense.category && <Badge variant="outline" className="text-xs">{expense.category}</Badge>}
+                      {expense.billable && (
+                        <Badge variant="secondary" className="text-xs">
+                          Billable
+                        </Badge>
+                      )}
+                      {expense.reimbursable && (
+                        <Badge variant="outline" className="text-xs">
+                          Reimbursable
+                        </Badge>
+                      )}
+                      {expense.taxDeductible && (
+                        <Badge
+                          variant="outline"
+                          className="border-green-300 text-xs text-green-600"
+                        >
+                          Tax Deductible
+                        </Badge>
+                      )}
+                      {expense.category && (
+                        <Badge variant="outline" className="text-xs">
+                          {expense.category}
+                        </Badge>
+                      )}
                     </div>
                     <p className="text-muted-foreground mt-0.5 text-xs">
-                      {new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(expense.date))}
+                      {new Intl.DateTimeFormat("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      }).format(new Date(expense.date))}
                       {expense.client ? ` · ${expense.client.name}` : ""}
                     </p>
-                    {expense.notes && <p className="text-muted-foreground mt-1 text-xs">{expense.notes}</p>}
+                    {expense.notes && (
+                      <p className="text-muted-foreground mt-1 text-xs">
+                        {expense.notes}
+                      </p>
+                    )}
                   </div>
                   <div className="flex flex-shrink-0 items-center gap-2">
-                    <p className="font-semibold">{formatCurrency(expense.amount, expense.currency)}</p>
-                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleEdit(expense)}><Pencil className="h-3.5 w-3.5" /></Button>
-                    <Button variant="ghost" size="sm" className="text-destructive h-8 w-8 p-0" onClick={() => setDeleteId(expense.id)}><Trash2 className="h-3.5 w-3.5" /></Button>
+                    <p className="font-semibold">
+                      {formatCurrency(expense.amount, expense.currency)}
+                    </p>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => handleEdit(expense)}
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-destructive h-8 w-8 p-0"
+                      onClick={() => setDeleteId(expense.id)}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
                   </div>
                 </div>
               ))}
@@ -199,70 +306,150 @@ export default function ExpensesPage() {
           <div className="space-y-4 py-2">
             <div className="space-y-2">
               <Label>Description *</Label>
-              <Input value={form.description} onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))} placeholder="e.g. Laptop charger" />
+              <Input
+                value={form.description}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, description: e.target.value }))
+                }
+                placeholder="e.g. Laptop charger"
+              />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-2">
                 <Label>Amount *</Label>
-                <NumberInput value={form.amount} onChange={(v) => setForm((p) => ({ ...p, amount: v }))} min={0} step={0.01} />
+                <NumberInput
+                  value={form.amount}
+                  onChange={(v) => setForm((p) => ({ ...p, amount: v }))}
+                  min={0}
+                  step={0.01}
+                />
               </div>
               <div className="space-y-2">
                 <Label>Currency</Label>
-                <Select value={form.currency} onValueChange={(v) => setForm((p) => ({ ...p, currency: v }))}>
-                  <SelectTrigger><SelectValue /></SelectTrigger>
-                  <SelectContent>{SUPPORTED_CURRENCIES.map((c) => <SelectItem key={c.code} value={c.code}>{c.code}</SelectItem>)}</SelectContent>
+                <Select
+                  value={form.currency}
+                  onValueChange={(v) => setForm((p) => ({ ...p, currency: v }))}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {SUPPORTED_CURRENCIES.map((c) => (
+                      <SelectItem key={c.code} value={c.code}>
+                        {c.code}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
                 </Select>
               </div>
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-2">
                 <Label>Date</Label>
-                <DatePicker date={form.date} onDateChange={(d) => setForm((p) => ({ ...p, date: d ?? new Date() }))} className="w-full" />
+                <DatePicker
+                  date={form.date}
+                  onDateChange={(d) =>
+                    setForm((p) => ({ ...p, date: d ?? new Date() }))
+                  }
+                  className="w-full"
+                />
               </div>
               <div className="space-y-2">
                 <Label>Category</Label>
-                <Select value={form.category || "none"} onValueChange={(v) => setForm((p) => ({ ...p, category: v === "none" ? "" : v }))}>
-                  <SelectTrigger><SelectValue placeholder="Select…" /></SelectTrigger>
+                <Select
+                  value={form.category || "none"}
+                  onValueChange={(v) =>
+                    setForm((p) => ({ ...p, category: v === "none" ? "" : v }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select…" />
+                  </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="none">None</SelectItem>
-                    {EXPENSE_CATEGORIES.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}
+                    {EXPENSE_CATEGORIES.map((c) => (
+                      <SelectItem key={c} value={c}>
+                        {c}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
             </div>
             <div className="space-y-2">
               <Label>Client (optional)</Label>
-              <Select value={form.clientId || "none"} onValueChange={(v) => setForm((p) => ({ ...p, clientId: v === "none" ? "" : v }))}>
-                <SelectTrigger><SelectValue placeholder="No client" /></SelectTrigger>
+              <Select
+                value={form.clientId || "none"}
+                onValueChange={(v) =>
+                  setForm((p) => ({ ...p, clientId: v === "none" ? "" : v }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="No client" />
+                </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="none">No client</SelectItem>
-                  {clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
+                  {clients.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.name}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
             <div className="flex flex-wrap gap-6">
               <label className="flex cursor-pointer items-center gap-2">
-                <Checkbox checked={form.billable} onCheckedChange={(v) => setForm((p) => ({ ...p, billable: !!v }))} />
+                <Checkbox
+                  checked={form.billable}
+                  onCheckedChange={(v) =>
+                    setForm((p) => ({ ...p, billable: !!v }))
+                  }
+                />
                 <span className="text-sm">Billable</span>
               </label>
               <label className="flex cursor-pointer items-center gap-2">
-                <Checkbox checked={form.reimbursable} onCheckedChange={(v) => setForm((p) => ({ ...p, reimbursable: !!v }))} />
+                <Checkbox
+                  checked={form.reimbursable}
+                  onCheckedChange={(v) =>
+                    setForm((p) => ({ ...p, reimbursable: !!v }))
+                  }
+                />
                 <span className="text-sm">Reimbursable</span>
               </label>
               <label className="flex cursor-pointer items-center gap-2">
-                <Checkbox checked={form.taxDeductible} onCheckedChange={(v) => setForm((p) => ({ ...p, taxDeductible: !!v }))} />
+                <Checkbox
+                  checked={form.taxDeductible}
+                  onCheckedChange={(v) =>
+                    setForm((p) => ({ ...p, taxDeductible: !!v }))
+                  }
+                />
                 <span className="text-sm">Tax Deductible</span>
               </label>
             </div>
             <div className="space-y-2">
               <Label>Notes (optional)</Label>
-              <Input value={form.notes} onChange={(e) => setForm((p) => ({ ...p, notes: e.target.value }))} placeholder="Additional details…" />
+              <Input
+                value={form.notes}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, notes: e.target.value }))
+                }
+                placeholder="Additional details…"
+              />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={handleSubmit} disabled={create.isPending || update.isPending}>
-              {create.isPending || update.isPending ? "Saving…" : editId ? "Update" : "Add Expense"}
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={create.isPending || update.isPending}
+            >
+              {create.isPending || update.isPending
+                ? "Saving…"
+                : editId
+                  ? "Update"
+                  : "Add Expense"}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -276,8 +463,14 @@ export default function ExpensesPage() {
             <DialogDescription>This action cannot be undone.</DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteId(null)}>Cancel</Button>
-            <Button variant="destructive" onClick={() => deleteId && del.mutate({ id: deleteId })} disabled={del.isPending}>
+            <Button variant="outline" onClick={() => setDeleteId(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteId && del.mutate({ id: deleteId })}
+              disabled={del.isPending}
+            >
               {del.isPending ? "Deleting…" : "Delete"}
             </Button>
           </DialogFooter>

src/app/dashboard/invoices/[id]/_components/invoice-items-table.tsx

@@ -53,14 +53,13 @@ const columns: ColumnDef<InvoiceItem>[] = [
       return (
         <>
           {/* Desktop: plain description */}
-          <div className="hidden font-medium sm:block">
-            {item.description}
-          </div>
+          <div className="hidden font-medium sm:block">{item.description}</div>
           {/* Mobile: description + date + hours @ rate stacked */}
           <div className="sm:hidden">
             <p className="font-medium">{item.description}</p>
             <p className="text-muted-foreground mt-0.5 text-xs">
-              {formatDate(item.date)} &middot; {item.hours}h @ {formatCurrency(item.rate)}/hr
+              {formatDate(item.date)} &middot; {item.hours}h @{" "}
+              {formatCurrency(item.rate)}/hr
             </p>
           </div>
         </>

src/app/dashboard/invoices/[id]/page.tsx

@@ -75,7 +75,7 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
   const handleMarkAsPaid = () => {
     updateStatus.mutate({
       id: invoiceId,
-      status: "paid" as StoredInvoiceStatus,
+      status: "paid",
     });
   };
 
@@ -109,17 +109,15 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
   const subtotal = invoice.items.reduce((sum, item) => sum + item.amount, 0);
   const taxAmount = (subtotal * invoice.taxRate) / 100;
   const total = subtotal + taxAmount;
+  const storedStatus = invoice.status as StoredInvoiceStatus;
   const effectiveStatus = getEffectiveInvoiceStatus(
-    invoice.status as StoredInvoiceStatus,
-    invoice.dueDate,
-  );
-  const isOverdue = isInvoiceOverdue(
-    invoice.status as StoredInvoiceStatus,
+    storedStatus,
     invoice.dueDate,
   );
+  const isOverdue = isInvoiceOverdue(storedStatus, invoice.dueDate);
 
   const getStatusType = (): StatusType => {
-    return effectiveStatus as StatusType;
+    return effectiveStatus;
   };
 
   return (

src/app/dashboard/invoices/[id]/send/page.tsx

@@ -292,7 +292,7 @@ export default function SendEmailPage() {
 
   if (!invoice) {
     return (
-      <div className="container mx-auto max-w-4xl p-6">
+      <div className="page-enter space-y-6">
         <Alert variant="destructive">
           <AlertTriangle className="h-4 w-4" />
           <AlertDescription>Invoice not found.</AlertDescription>
@@ -302,7 +302,7 @@ export default function SendEmailPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-6xl space-y-6 pb-32">
+    <div className="page-enter space-y-6 pb-32">
       <PageHeader
         title={`Send Invoice ${invoice.invoiceNumber}`}
         description={`Compose and send invoice email to ${invoice.client?.name ?? "client"} • ${new Intl.DateTimeFormat(

src/app/dashboard/invoices/_components/invoices-data-table.tsx

@@ -23,7 +23,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-import { Eye, Edit, Trash2, FileText, CheckCircle, Send, ChevronDown } from "lucide-react";
+import {
+  Eye,
+  Edit,
+  Trash2,
+  FileText,
+  CheckCircle,
+  Send,
+  ChevronDown,
+} from "lucide-react";
 import { api } from "~/trpc/react";
 import { toast } from "sonner";
 import { getEffectiveInvoiceStatus } from "~/lib/invoice-status";
@@ -45,11 +53,28 @@ interface Invoice {
   createdById: string;
   createdAt: Date;
   updatedAt: Date | null;
-  client?: { id: string; name: string; email: string | null; phone: string | null } | null;
-  business?: { id: string; name: string; email: string | null; phone: string | null } | null;
+  client?: {
+    id: string;
+    name: string;
+    email: string | null;
+    phone: string | null;
+  } | null;
+  business?: {
+    id: string;
+    name: string;
+    email: string | null;
+    phone: string | null;
+  } | null;
   items?: Array<{
-    id: string; invoiceId: string; date: Date; description: string;
-    hours: number; rate: number; amount: number; position: number; createdAt: Date;
+    id: string;
+    invoiceId: string;
+    date: Date;
+    description: string;
+    hours: number;
+    rate: number;
+    amount: number;
+    position: number;
+    createdAt: Date;
   }> | null;
 }
 
@@ -58,10 +83,17 @@ interface InvoicesDataTableProps {
 }
 
 const getStatusType = (invoice: Invoice): StatusType =>
-  getEffectiveInvoiceStatus(invoice.status as StoredInvoiceStatus, invoice.dueDate) as StatusType;
+  getEffectiveInvoiceStatus(
+    invoice.status as StoredInvoiceStatus,
+    invoice.dueDate,
+  );
 
 const formatDate = (date: Date) =>
-  new Intl.DateTimeFormat("en-US", { month: "short", day: "2-digit", year: "numeric" }).format(new Date(date));
+  new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  }).format(new Date(date));
 
 export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
   const router = useRouter();
@@ -84,7 +116,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
 
   const bulkDelete = api.invoices.bulkDelete.useMutation({
     onSuccess: (data) => {
-      toast.success(`${data.deleted} invoice${data.deleted !== 1 ? "s" : ""} deleted`);
+      toast.success(
+        `${data.deleted} invoice${data.deleted !== 1 ? "s" : ""} deleted`,
+      );
       void utils.invoices.getAll.invalidate();
       setBulkDeleteDialogOpen(false);
       setPendingBulkDelete([]);
@@ -94,7 +128,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
 
   const bulkUpdateStatus = api.invoices.bulkUpdateStatus.useMutation({
     onSuccess: (data) => {
-      toast.success(`${data.updated} invoice${data.updated !== 1 ? "s" : ""} updated`);
+      toast.success(
+        `${data.updated} invoice${data.updated !== 1 ? "s" : ""} updated`,
+      );
       void utils.invoices.getAll.invalidate();
     },
     onError: (e) => toast.error(e.message ?? "Failed to update invoices"),
@@ -105,7 +141,10 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
       id: "select",
       header: ({ table }) => (
         <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
           onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
           aria-label="Select all"
           data-action-button="true"
@@ -124,7 +163,9 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
     },
     {
       accessorKey: "client.name",
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Client" />,
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Client" />
+      ),
       cell: ({ row }) => {
         const invoice = row.original;
         return (
@@ -133,10 +174,17 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
               <FileText className="text-primary h-4 w-4" />
             </div>
             <div className="min-w-0 flex-1">
-              <p className="truncate font-medium">{invoice.client?.name ?? "—"}</p>
-              <p className="text-muted-foreground truncate text-xs sm:text-sm">{invoice.invoiceNumber}</p>
+              <p className="truncate font-medium">
+                {invoice.client?.name ?? "—"}
+              </p>
+              <p className="text-muted-foreground truncate text-xs sm:text-sm">
+                {invoice.invoiceNumber}
+              </p>
               <div className="mt-1 flex items-center gap-2 sm:hidden">
-                <StatusBadge status={getStatusType(invoice)} className="text-xs" />
+                <StatusBadge
+                  status={getStatusType(invoice)}
+                  className="text-xs"
+                />
                 <span className="text-foreground text-xs font-semibold">
                   {formatCurrency(invoice.totalAmount, invoice.currency)}
                 </span>
@@ -148,38 +196,59 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
     },
     {
       accessorKey: "issueDate",
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Date" />,
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Date" />
+      ),
       cell: ({ row }) => (
         <div className="min-w-0">
-          <p className="truncate text-sm">{formatDate(row.getValue("issueDate") as Date)}</p>
-          <p className="text-muted-foreground truncate text-xs">Due {formatDate(new Date(row.original.dueDate))}</p>
+          <p className="truncate text-sm">
+            {formatDate(row.getValue("issueDate"))}
+          </p>
+          <p className="text-muted-foreground truncate text-xs">
+            Due {formatDate(new Date(row.original.dueDate))}
+          </p>
         </div>
       ),
     },
     {
       accessorKey: "status",
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
       cell: ({ row }) => (
         <StatusBadge
           status={getStatusType(row.original)}
-          className={getStatusType(row.original) === "sent" ? "status-pending" : ""}
+          className={
+            getStatusType(row.original) === "sent" ? "status-pending" : ""
+          }
         />
       ),
-      filterFn: (row, _id, value: string[]) => value.includes(getStatusType(row.original)),
-      meta: { headerClassName: "hidden sm:table-cell", cellClassName: "hidden sm:table-cell" },
+      filterFn: (row, _id, value: string[]) =>
+        value.includes(getStatusType(row.original)),
+      meta: {
+        headerClassName: "hidden sm:table-cell",
+        cellClassName: "hidden sm:table-cell",
+      },
     },
     {
       accessorKey: "totalAmount",
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Amount" />
+      ),
       cell: ({ row }) => (
         <div className="text-right">
           <p className="text-sm font-semibold">
-            {formatCurrency(row.getValue("totalAmount") as number, row.original.currency)}
+            {formatCurrency(row.getValue("totalAmount"), row.original.currency)}
+          </p>
+          <p className="text-muted-foreground text-xs">
+            {row.original.items?.length ?? 0} items
           </p>
-          <p className="text-muted-foreground text-xs">{row.original.items?.length ?? 0} items</p>
         </div>
       ),
-      meta: { headerClassName: "hidden sm:table-cell", cellClassName: "hidden sm:table-cell" },
+      meta: {
+        headerClassName: "hidden sm:table-cell",
+        cellClassName: "hidden sm:table-cell",
+      },
     },
     {
       id: "actions",
@@ -188,19 +257,34 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
         return (
           <div className="flex items-center justify-end gap-1">
             <Link href={`/dashboard/invoices/${invoice.id}`}>
-              <Button variant="ghost" size="sm" className="hover-scale h-8 w-8 p-0" data-action-button="true">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="hover-scale h-8 w-8 p-0"
+                data-action-button="true"
+              >
                 <Eye className="h-3.5 w-3.5" />
               </Button>
             </Link>
             <Link href={`/dashboard/invoices/${invoice.id}/edit`}>
-              <Button variant="ghost" size="sm" className="hover-scale h-8 w-8 p-0" data-action-button="true">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="hover-scale h-8 w-8 p-0"
+                data-action-button="true"
+              >
                 <Edit className="h-3.5 w-3.5" />
               </Button>
             </Link>
             <Button
-              variant="ghost" size="sm"
+              variant="ghost"
+              size="sm"
               className="hover-scale text-destructive hover:text-destructive/80 h-8 w-8 p-0"
-              onClick={(e) => { e.stopPropagation(); setInvoiceToDelete(invoice); setDeleteDialogOpen(true); }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setInvoiceToDelete(invoice);
+                setDeleteDialogOpen(true);
+              }}
               data-action-button="true"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -237,12 +321,18 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
         searchKey="invoiceNumber"
         searchPlaceholder="Search invoices..."
         filterableColumns={filterableColumns}
-        onRowClick={(invoice) => router.push(`/dashboard/invoices/${invoice.id}`)}
+        onRowClick={(invoice) =>
+          router.push(`/dashboard/invoices/${invoice.id}`)
+        }
         selectionActions={(selected, clear) => (
           <>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" disabled={bulkUpdateStatus.isPending}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={bulkUpdateStatus.isPending}
+                >
                   <Send className="mr-1.5 h-3.5 w-3.5" />
                   Mark as
                   <ChevronDown className="ml-1.5 h-3.5 w-3.5" />
@@ -306,16 +396,24 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
             <DialogDescription>
               Are you sure you want to delete invoice{" "}
               <strong>{invoiceToDelete?.invoiceNumber}</strong> for{" "}
-              <strong>{invoiceToDelete?.client?.name}</strong>? This action cannot be undone.
+              <strong>{invoiceToDelete?.client?.name}</strong>? This action
+              cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={deleteInvoice.isPending}>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteDialogOpen(false)}
+              disabled={deleteInvoice.isPending}
+            >
               Cancel
             </Button>
             <Button
               variant="destructive"
-              onClick={() => invoiceToDelete && deleteInvoice.mutate({ id: invoiceToDelete.id })}
+              onClick={() =>
+                invoiceToDelete &&
+                deleteInvoice.mutate({ id: invoiceToDelete.id })
+              }
               disabled={deleteInvoice.isPending}
             >
               {deleteInvoice.isPending ? "Deleting..." : "Delete Invoice"}
@@ -325,25 +423,40 @@ export function InvoicesDataTable({ invoices }: InvoicesDataTableProps) {
       </Dialog>
 
       {/* Bulk delete dialog */}
-      <Dialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
+      <Dialog
+        open={bulkDeleteDialogOpen}
+        onOpenChange={setBulkDeleteDialogOpen}
+      >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Delete {pendingBulkDelete.length} Invoice{pendingBulkDelete.length !== 1 ? "s" : ""}</DialogTitle>
+            <DialogTitle>
+              Delete {pendingBulkDelete.length} Invoice
+              {pendingBulkDelete.length !== 1 ? "s" : ""}
+            </DialogTitle>
             <DialogDescription>
-              This will permanently delete {pendingBulkDelete.length} invoice{pendingBulkDelete.length !== 1 ? "s" : ""}.
-              This action cannot be undone.
+              This will permanently delete {pendingBulkDelete.length} invoice
+              {pendingBulkDelete.length !== 1 ? "s" : ""}. This action cannot be
+              undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setBulkDeleteDialogOpen(false)} disabled={bulkDelete.isPending}>
+            <Button
+              variant="outline"
+              onClick={() => setBulkDeleteDialogOpen(false)}
+              disabled={bulkDelete.isPending}
+            >
               Cancel
             </Button>
             <Button
               variant="destructive"
-              onClick={() => bulkDelete.mutate({ ids: pendingBulkDelete.map((i) => i.id) })}
+              onClick={() =>
+                bulkDelete.mutate({ ids: pendingBulkDelete.map((i) => i.id) })
+              }
               disabled={bulkDelete.isPending}
             >
-              {bulkDelete.isPending ? "Deleting..." : `Delete ${pendingBulkDelete.length} Invoice${pendingBulkDelete.length !== 1 ? "s" : ""}`}
+              {bulkDelete.isPending
+                ? "Deleting..."
+                : `Delete ${pendingBulkDelete.length} Invoice${pendingBulkDelete.length !== 1 ? "s" : ""}`}
             </Button>
           </DialogFooter>
         </DialogContent>

src/app/dashboard/invoices/import/page.tsx

@@ -29,7 +29,7 @@ function FormatInstructions() {
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="bg-muted/50  p-4">
+          <div className="bg-muted/50 p-4">
             <p className="text-muted-foreground font-mono text-sm">
               DATE,DESCRIPTION,HOURS,RATE,AMOUNT
             </p>
@@ -85,7 +85,7 @@ function FormatInstructions() {
             for importing time entries.
           </p>
 
-          <div className="bg-primary/10  p-4">
+          <div className="bg-primary/10 p-4">
             <div className="flex items-start gap-3">
               <Info className="text-primary mt-0.5 h-5 w-5" />
               <div>
@@ -100,7 +100,7 @@ function FormatInstructions() {
 
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Sample Row:</h4>
-            <div className="bg-muted/50  p-3">
+            <div className="bg-muted/50 p-3">
               <p className="text-muted font-mono text-xs break-all">
                 1/15/24,&quot;Web development work&quot;,8,75.00,600.00
               </p>
@@ -109,7 +109,7 @@ function FormatInstructions() {
 
           <div className="space-y-2">
             <h4 className="text-sm font-semibold">Sample Filename:</h4>
-            <div className="bg-muted/50  p-3">
+            <div className="bg-muted/50 p-3">
               <p className="text-muted font-mono text-xs">2024-01-15.csv</p>
             </div>
           </div>
@@ -168,7 +168,7 @@ function FileFormatHelp() {
       <CardContent className="space-y-4">
         <div className="grid gap-6 md:grid-cols-3">
           <div className="space-y-2 text-center">
-            <div className="bg-accent mx-auto w-fit  p-3">
+            <div className="bg-accent mx-auto w-fit p-3">
               <FileSpreadsheet className="text-foreground-foreground h-6 w-6" />
             </div>
             <h4 className="font-semibold">CSV Files</h4>
@@ -178,7 +178,7 @@ function FileFormatHelp() {
             </p>
           </div>
           <div className="space-y-2 text-center">
-            <div className="bg-primary/10 mx-auto w-fit  p-3">
+            <div className="bg-primary/10 mx-auto w-fit p-3">
               <Upload className="text-primary h-6 w-6" />
             </div>
             <h4 className="font-semibold">Max Size</h4>
@@ -187,7 +187,7 @@ function FileFormatHelp() {
             </p>
           </div>
           <div className="space-y-2 text-center">
-            <div className="bg-secondary mx-auto w-fit  p-3">
+            <div className="bg-secondary mx-auto w-fit p-3">
               <CheckCircle className="text-muted-foreground-foreground h-6 w-6" />
             </div>
             <h4 className="font-semibold">Validation</h4>

src/app/dashboard/invoices/templates/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { api } from "~/trpc/react";
+import { api, type RouterOutputs } from "~/trpc/react";
 import { PageHeader } from "~/components/layout/page-header";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
@@ -18,12 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog";
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "~/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
 import { toast } from "sonner";
 import { Plus, Pencil, Trash2, FileText, Star } from "lucide-react";
 
@@ -34,87 +29,81 @@ interface TemplateForm {
   isDefault: boolean;
 }
 
-const defaultForm: TemplateForm = { name: "", type: "notes", content: "", isDefault: false };
+const defaultForm: TemplateForm = {
+  name: "",
+  type: "notes",
+  content: "",
+  isDefault: false,
+};
 
-export default function TemplatesPage() {
-  const [open, setOpen] = useState(false);
-  const [editId, setEditId] = useState<string | null>(null);
-  const [form, setForm] = useState<TemplateForm>(defaultForm);
-  const [deleteId, setDeleteId] = useState<string | null>(null);
-  const [tab, setTab] = useState<"notes" | "terms">("notes");
+type InvoiceTemplate = RouterOutputs["invoiceTemplates"]["getAll"][number];
 
-  const utils = api.useUtils();
-  const { data: templates = [], isLoading } = api.invoiceTemplates.getAll.useQuery();
+interface TemplateListProps {
+  items: InvoiceTemplate[];
+  type: "notes" | "terms";
+  isLoading: boolean;
+  onCreate: (type: "notes" | "terms") => void;
+  onEdit: (template: InvoiceTemplate) => void;
+  onDelete: (id: string) => void;
+}
 
-  const create = api.invoiceTemplates.create.useMutation({
-    onSuccess: () => { toast.success("Template created"); void utils.invoiceTemplates.getAll.invalidate(); setOpen(false); setForm(defaultForm); },
-    onError: (e) => toast.error(e.message),
-  });
-  const update = api.invoiceTemplates.update.useMutation({
-    onSuccess: () => { toast.success("Template updated"); void utils.invoiceTemplates.getAll.invalidate(); setOpen(false); setEditId(null); setForm(defaultForm); },
-    onError: (e) => toast.error(e.message),
-  });
-  const del = api.invoiceTemplates.delete.useMutation({
-    onSuccess: () => { toast.success("Template deleted"); void utils.invoiceTemplates.getAll.invalidate(); setDeleteId(null); },
-    onError: (e) => toast.error(e.message),
-  });
-
-  const handleOpen = (type: "notes" | "terms") => {
-    setEditId(null);
-    setForm({ ...defaultForm, type });
-    setOpen(true);
-  };
-  const handleEdit = (t: typeof templates[0]) => {
-    setEditId(t.id);
-    setForm({ name: t.name, type: t.type as "notes" | "terms", content: t.content, isDefault: t.isDefault });
-    setOpen(true);
-  };
-  const handleSubmit = () => {
-    if (!form.name.trim()) { toast.error("Name is required"); return; }
-    if (!form.content.trim()) { toast.error("Content is required"); return; }
-    if (editId) update.mutate({ id: editId, ...form });
-    else create.mutate(form);
-  };
-
-  const notesTemplates = templates.filter((t) => t.type === "notes");
-  const termsTemplates = templates.filter((t) => t.type === "terms");
-
-  const TemplateList = ({ items, type }: { items: typeof templates; type: "notes" | "terms" }) => (
+function TemplateList({
+  items,
+  type,
+  isLoading,
+  onCreate,
+  onEdit,
+  onDelete,
+}: TemplateListProps) {
+  return (
     <div className="space-y-3">
       <div className="flex justify-end">
-        <Button size="sm" onClick={() => handleOpen(type)}>
-          <Plus className="mr-1.5 h-3.5 w-3.5" /> New {type === "notes" ? "Notes" : "Terms"} Template
+        <Button size="sm" onClick={() => onCreate(type)}>
+          <Plus className="mr-1.5 h-3.5 w-3.5" /> New{" "}
+          {type === "notes" ? "Notes" : "Terms"} Template
         </Button>
       </div>
       {isLoading ? (
-        <div className="text-muted-foreground py-8 text-center text-sm">Loading…</div>
+        <div className="text-muted-foreground py-8 text-center text-sm">
+          Loading...
+        </div>
       ) : items.length === 0 ? (
         <div className="text-muted-foreground py-8 text-center text-sm">
           No {type} templates yet.
         </div>
       ) : (
-        items.map((t) => (
-          <Card key={t.id}>
+        items.map((template) => (
+          <Card key={template.id}>
             <CardContent className="p-4">
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
-                    <p className="font-medium">{t.name}</p>
-                    {t.isDefault && (
+                    <p className="font-medium">{template.name}</p>
+                    {template.isDefault && (
                       <Badge variant="secondary" className="text-xs">
                         <Star className="mr-1 h-3 w-3" /> Default
                       </Badge>
                     )}
                   </div>
                   <p className="text-muted-foreground mt-1 line-clamp-3 text-sm whitespace-pre-wrap">
-                    {t.content}
+                    {template.content}
                   </p>
                 </div>
                 <div className="flex flex-shrink-0 gap-1">
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => handleEdit(t)}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => onEdit(template)}
+                  >
                     <Pencil className="h-3.5 w-3.5" />
                   </Button>
-                  <Button variant="ghost" size="sm" className="text-destructive h-8 w-8 p-0" onClick={() => setDeleteId(t.id)}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive h-8 w-8 p-0"
+                    onClick={() => onDelete(template.id)}
+                  >
                     <Trash2 className="h-3.5 w-3.5" />
                   </Button>
                 </div>
@@ -125,6 +114,77 @@ export default function TemplatesPage() {
       )}
     </div>
   );
+}
+
+export default function TemplatesPage() {
+  const [open, setOpen] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [form, setForm] = useState<TemplateForm>(defaultForm);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [tab, setTab] = useState<"notes" | "terms">("notes");
+
+  const utils = api.useUtils();
+  const { data: templates = [], isLoading } =
+    api.invoiceTemplates.getAll.useQuery();
+
+  const create = api.invoiceTemplates.create.useMutation({
+    onSuccess: () => {
+      toast.success("Template created");
+      void utils.invoiceTemplates.getAll.invalidate();
+      setOpen(false);
+      setForm(defaultForm);
+    },
+    onError: (e) => toast.error(e.message),
+  });
+  const update = api.invoiceTemplates.update.useMutation({
+    onSuccess: () => {
+      toast.success("Template updated");
+      void utils.invoiceTemplates.getAll.invalidate();
+      setOpen(false);
+      setEditId(null);
+      setForm(defaultForm);
+    },
+    onError: (e) => toast.error(e.message),
+  });
+  const del = api.invoiceTemplates.delete.useMutation({
+    onSuccess: () => {
+      toast.success("Template deleted");
+      void utils.invoiceTemplates.getAll.invalidate();
+      setDeleteId(null);
+    },
+    onError: (e) => toast.error(e.message),
+  });
+
+  const handleOpen = (type: "notes" | "terms") => {
+    setEditId(null);
+    setForm({ ...defaultForm, type });
+    setOpen(true);
+  };
+  const handleEdit = (t: InvoiceTemplate) => {
+    setEditId(t.id);
+    setForm({
+      name: t.name,
+      type: t.type as "notes" | "terms",
+      content: t.content,
+      isDefault: t.isDefault,
+    });
+    setOpen(true);
+  };
+  const handleSubmit = () => {
+    if (!form.name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    if (!form.content.trim()) {
+      toast.error("Content is required");
+      return;
+    }
+    if (editId) update.mutate({ id: editId, ...form });
+    else create.mutate(form);
+  };
+
+  const notesTemplates = templates.filter((t) => t.type === "notes");
+  const termsTemplates = templates.filter((t) => t.type === "terms");
 
   return (
     <div className="page-enter space-y-6 pb-6">
@@ -137,17 +197,33 @@ export default function TemplatesPage() {
       <Tabs value={tab} onValueChange={(v) => setTab(v as "notes" | "terms")}>
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="notes">
-            <FileText className="mr-1.5 h-4 w-4" /> Notes ({notesTemplates.length})
+            <FileText className="mr-1.5 h-4 w-4" /> Notes (
+            {notesTemplates.length})
           </TabsTrigger>
           <TabsTrigger value="terms">
-            <FileText className="mr-1.5 h-4 w-4" /> Terms ({termsTemplates.length})
+            <FileText className="mr-1.5 h-4 w-4" /> Terms (
+            {termsTemplates.length})
           </TabsTrigger>
         </TabsList>
         <TabsContent value="notes" className="mt-4">
-          <TemplateList items={notesTemplates} type="notes" />
+          <TemplateList
+            items={notesTemplates}
+            type="notes"
+            isLoading={isLoading}
+            onCreate={handleOpen}
+            onEdit={handleEdit}
+            onDelete={setDeleteId}
+          />
         </TabsContent>
         <TabsContent value="terms" className="mt-4">
-          <TemplateList items={termsTemplates} type="terms" />
+          <TemplateList
+            items={termsTemplates}
+            type="terms"
+            isLoading={isLoading}
+            onCreate={handleOpen}
+            onEdit={handleEdit}
+            onDelete={setDeleteId}
+          />
         </TabsContent>
       </Tabs>
 
@@ -155,16 +231,29 @@ export default function TemplatesPage() {
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="sm:max-w-lg">
           <DialogHeader>
-            <DialogTitle>{editId ? "Edit Template" : "New Template"}</DialogTitle>
+            <DialogTitle>
+              {editId ? "Edit Template" : "New Template"}
+            </DialogTitle>
           </DialogHeader>
           <div className="space-y-4 py-2">
             <div className="space-y-2">
               <Label>Name *</Label>
-              <Input value={form.name} onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))} placeholder="e.g. Standard Payment Terms" />
+              <Input
+                value={form.name}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, name: e.target.value }))
+                }
+                placeholder="e.g. Standard Payment Terms"
+              />
             </div>
             <div className="space-y-2">
               <Label>Type</Label>
-              <Tabs value={form.type} onValueChange={(v) => setForm((p) => ({ ...p, type: v as "notes" | "terms" }))}>
+              <Tabs
+                value={form.type}
+                onValueChange={(v) =>
+                  setForm((p) => ({ ...p, type: v as "notes" | "terms" }))
+                }
+              >
                 <TabsList className="grid w-full grid-cols-2">
                   <TabsTrigger value="notes">Notes</TabsTrigger>
                   <TabsTrigger value="terms">Terms</TabsTrigger>
@@ -175,20 +264,36 @@ export default function TemplatesPage() {
               <Label>Content *</Label>
               <Textarea
                 value={form.content}
-                onChange={(e) => setForm((p) => ({ ...p, content: e.target.value }))}
+                onChange={(e) =>
+                  setForm((p) => ({ ...p, content: e.target.value }))
+                }
                 placeholder="Template content…"
                 className="min-h-[120px]"
               />
             </div>
             <label className="flex cursor-pointer items-center gap-2">
-              <Checkbox checked={form.isDefault} onCheckedChange={(v) => setForm((p) => ({ ...p, isDefault: !!v }))} />
+              <Checkbox
+                checked={form.isDefault}
+                onCheckedChange={(v) =>
+                  setForm((p) => ({ ...p, isDefault: !!v }))
+                }
+              />
               <span className="text-sm">Set as default for {form.type}</span>
             </label>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={handleSubmit} disabled={create.isPending || update.isPending}>
-              {create.isPending || update.isPending ? "Saving…" : editId ? "Update" : "Create"}
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={create.isPending || update.isPending}
+            >
+              {create.isPending || update.isPending
+                ? "Saving…"
+                : editId
+                  ? "Update"
+                  : "Create"}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -202,8 +307,14 @@ export default function TemplatesPage() {
             <DialogDescription>This action cannot be undone.</DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteId(null)}>Cancel</Button>
-            <Button variant="destructive" onClick={() => deleteId && del.mutate({ id: deleteId })} disabled={del.isPending}>
+            <Button variant="outline" onClick={() => setDeleteId(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteId && del.mutate({ id: deleteId })}
+              disabled={del.isPending}
+            >
               {del.isPending ? "Deleting…" : "Delete"}
             </Button>
           </DialogFooter>

src/app/dashboard/page.tsx

@@ -28,9 +28,9 @@ import type { DashboardStats, RecentInvoice } from "./types";
 
 // Hero section with clean mono design
 
-
 // Enhanced stats cards with better visuals
-function DashboardStats({ stats }: { stats: DashboardStats }) { // TODO: Import RouterOutput type
+function DashboardStats({ stats }: { stats: DashboardStats }) {
+  // TODO: Import RouterOutput type
   const formatTrend = (value: number, isCount = false) => {
     if (isCount) {
       return value > 0 ? `+${value}` : value.toString();
@@ -193,10 +193,11 @@ function QuickActions() {
             <Link
               key={action.title}
               href={action.href}
-              className={`hover-lift flex w-full items-start space-x-3 rounded-lg border p-4 transition-colors ${action.featured
-                ? "border-foreground/20 bg-muted/50 hover:bg-muted"
-                : "border-border bg-background hover:bg-muted/50"
-                }`}
+              className={`hover-lift flex w-full items-start space-x-3 rounded-lg border p-4 transition-colors ${
+                action.featured
+                  ? "border-foreground/20 bg-muted/50 hover:bg-muted"
+                  : "border-border bg-background hover:bg-muted/50"
+              }`}
             >
               <Icon className="h-5 w-5 flex-shrink-0" />
               <div className="min-w-0 flex-1">
@@ -310,7 +311,11 @@ async function CurrentWork() {
 }
 
 // Enhanced recent activity
-async function RecentActivity({ recentInvoices }: { recentInvoices: RecentInvoice[] }) {
+async function RecentActivity({
+  recentInvoices,
+}: {
+  recentInvoices: RecentInvoice[];
+}) {
   // Use passed recentInvoices instead of fetching all
 
   const getStatusStyle = (status: string) => {

src/app/dashboard/settings/_components/pdf-preview-frame.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { BlobProvider } from "@react-pdf/renderer";
+import {
+  InvoicePDF,
+  type InvoiceData,
+  type PDFGenerationSettings,
+} from "~/lib/pdf-export";
+
+const previewInvoice: InvoiceData = {
+  invoiceNumber: "BV-2026-001",
+  issueDate: new Date("2026-04-30T12:00:00.000Z"),
+  dueDate: new Date("2026-05-30T12:00:00.000Z"),
+  status: "sent",
+  totalAmount: 3150,
+  taxRate: 0,
+  currency: "USD",
+  notes: "Thank you for the work. Payment is due within 30 days.",
+  business: {
+    name: "Sample Studio",
+    email: "hello@beenvoice.test",
+    phone: "(555) 014-1024",
+    addressLine1: "100 Terminal Way",
+    city: "New York",
+    state: "NY",
+    postalCode: "10001",
+    country: "USA",
+    website: "beenvoice.test",
+  },
+  client: {
+    name: "Client Studio",
+    email: "ap@clientstudio.test",
+    addressLine1: "42 Market Street",
+    city: "Brooklyn",
+    state: "NY",
+    postalCode: "11201",
+    country: "USA",
+  },
+  items: [
+    {
+      date: new Date("2026-04-08T12:00:00.000Z"),
+      description: "Invoice workflow design and implementation",
+      hours: 12,
+      rate: 150,
+      amount: 1800,
+    },
+    {
+      date: new Date("2026-04-16T12:00:00.000Z"),
+      description: "Client import cleanup",
+      hours: 5,
+      rate: 150,
+      amount: 750,
+    },
+    {
+      date: new Date("2026-04-24T12:00:00.000Z"),
+      description: "Reporting polish",
+      hours: 4,
+      rate: 150,
+      amount: 600,
+    },
+  ],
+};
+
+export function PdfPreviewFrame({
+  settings,
+  businessName,
+}: {
+  settings: Required<PDFGenerationSettings>;
+  businessName: string;
+}) {
+  const previewBusinessName =
+    businessName.trim() !== ""
+      ? businessName
+      : (previewInvoice.business?.name ?? "Sample Studio");
+  const invoice = {
+    ...previewInvoice,
+    business: {
+      ...previewInvoice.business,
+      name: previewBusinessName,
+    },
+  };
+
+  return (
+    <div className="bg-muted/30 overflow-hidden border">
+      <div className="bg-background flex h-10 items-center justify-between border-b px-3">
+        <span className="text-muted-foreground text-xs font-medium">
+          PDF preview
+        </span>
+        <span className="text-muted-foreground text-xs">
+          Generated from sample invoice data
+        </span>
+      </div>
+      <BlobProvider
+        document={<InvoicePDF invoice={invoice} settings={settings} />}
+      >
+        {({ url, loading, error }) => {
+          if (loading) {
+            return (
+              <div className="text-muted-foreground flex aspect-[8.5/11] items-center justify-center p-6 text-sm">
+                Rendering PDF preview...
+              </div>
+            );
+          }
+
+          if (error || !url) {
+            return (
+              <div className="text-destructive flex aspect-[8.5/11] items-center justify-center p-6 text-sm">
+                PDF preview could not be rendered.
+              </div>
+            );
+          }
+
+          return (
+            <iframe
+              src={url}
+              title="Invoice PDF preview"
+              className="h-[640px] w-full bg-white"
+            />
+          );
+        }}
+      </BlobProvider>
+    </div>
+  );
+}

src/app/dashboard/settings/_components/settings-content.tsx

@@ -23,6 +23,7 @@ import {
   Paintbrush,
   Type,
 } from "lucide-react";
+import dynamic from "next/dynamic";
 import { authClient } from "~/lib/auth-client";
 import * as React from "react";
 import { useState } from "react";
@@ -62,6 +63,7 @@ import {
   DialogTrigger,
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
+import { InputColor } from "~/components/ui/input-color";
 import { Label } from "~/components/ui/label";
 import { Textarea } from "~/components/ui/textarea";
 import { api } from "~/trpc/react";
@@ -92,6 +94,18 @@ import {
   type InterfaceTheme,
 } from "~/lib/branding";
 
+const PdfPreviewFrame = dynamic(
+  () => import("./pdf-preview-frame").then((module) => module.PdfPreviewFrame),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="bg-muted/30 text-muted-foreground flex h-[680px] items-center justify-center border text-sm">
+        Loading PDF preview...
+      </div>
+    ),
+  },
+);
+
 function hslChannelsToHex(channels?: string) {
   const [hue, saturation, lightness] =
     channels?.match(/[\d.]+/g)?.map(Number) ?? [];
@@ -158,6 +172,10 @@ function hexToHslChannels(hex: string) {
   )}% ${Number((lightness * 100).toFixed(1))}%`;
 }
 
+function isFullHexColor(value: string) {
+  return /^#[0-9A-Fa-f]{6}$/.test(value);
+}
+
 export function SettingsContent() {
   const { data: session } = authClient.useSession();
   // const session = { user: null } as any;
@@ -195,6 +213,7 @@ export function SettingsContent() {
     pdfShowLogo,
     pdfShowPageNumbers,
     updateAppearance,
+    updateAppearanceDebounced,
     isUpdating: appearanceUpdating,
   } = useAppearance();
   const activePreset = themePresets[interfaceTheme];
@@ -203,7 +222,9 @@ export function SettingsContent() {
     activePreset.headingFontPreference !== headingFontPreference ||
     activePreset.colorTheme !== colorTheme ||
     activePreset.radiusPreference !== radiusPreference ||
-    activePreset.sidebarStyle !== sidebarStyle;
+    activePreset.sidebarStyle !== sidebarStyle ||
+    activePreset.pdfTemplate !== pdfTemplate ||
+    activePreset.pdfAccentColor !== pdfAccentColor;
   const customColorValue = customColor ?? "142.1 76.2% 36.3%";
   const selectAccent = (nextColorTheme: ColorTheme) => {
     updateAppearance({
@@ -249,10 +270,6 @@ export function SettingsContent() {
     api.settings.getProfile.useQuery();
   const isAdmin = profile?.role === "admin";
   const { data: dataStats } = api.settings.getDataStats.useQuery();
-  const { data: accounts = [], refetch: refetchAccounts } =
-    api.settings.listAccounts.useQuery(undefined, {
-      enabled: isAdmin,
-    });
 
   // Mutations
   const updateProfileMutation = api.settings.updateProfile.useMutation({
@@ -321,16 +338,6 @@ export function SettingsContent() {
       toast.error(`Delete failed: ${error.message}`);
     },
   });
-  const updateAccountRoleMutation = api.settings.updateAccountRole.useMutation({
-    onSuccess: () => {
-      toast.success("Account role updated");
-      void refetchAccounts();
-    },
-    onError: (error: { message: string }) => {
-      toast.error(`Failed to update role: ${error.message}`);
-    },
-  });
-
   const handleUpdateProfile = (e: React.FormEvent) => {
     e.preventDefault();
     if (!name.trim()) {
@@ -449,6 +456,7 @@ export function SettingsContent() {
   // Set initial name value when profile loads
   React.useEffect(() => {
     if (profile?.name && !name) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Sync async profile data into an editable form field.
       setName(profile.name);
     }
     if (session?.user) {
@@ -483,13 +491,10 @@ export function SettingsContent() {
   ];
 
   return (
-    <Tabs defaultValue="general" className="space-y-4">
-      <TabsList
-        className={`bg-muted/50 grid w-full ${isAdmin ? "grid-cols-4 lg:w-[520px]" : "grid-cols-3 lg:w-[400px]"}`}
-      >
+    <Tabs defaultValue="general">
+      <TabsList className="bg-muted/50 grid w-full grid-cols-3">
         <TabsTrigger value="general">General</TabsTrigger>
         <TabsTrigger value="preferences">Preferences</TabsTrigger>
-        {isAdmin && <TabsTrigger value="admin">Admin</TabsTrigger>}
         <TabsTrigger value="data">Data</TabsTrigger>
       </TabsList>
 
@@ -729,7 +734,9 @@ export function SettingsContent() {
                     <Input
                       value={brandName}
                       onChange={(event) =>
-                        updateAppearance({ brandName: event.target.value })
+                        updateAppearanceDebounced({
+                          brandName: event.target.value,
+                        })
                       }
                     />
                   </div>
@@ -739,7 +746,9 @@ export function SettingsContent() {
                     <Input
                       value={brandLogoText}
                       onChange={(event) =>
-                        updateAppearance({ brandLogoText: event.target.value })
+                        updateAppearanceDebounced({
+                          brandLogoText: event.target.value,
+                        })
                       }
                     />
                   </div>
@@ -749,7 +758,9 @@ export function SettingsContent() {
                     <Input
                       value={brandIcon}
                       onChange={(event) =>
-                        updateAppearance({ brandIcon: event.target.value })
+                        updateAppearanceDebounced({
+                          brandIcon: event.target.value,
+                        })
                       }
                     />
                   </div>
@@ -759,7 +770,9 @@ export function SettingsContent() {
                     <Input
                       value={brandTagline}
                       onChange={(event) =>
-                        updateAppearance({ brandTagline: event.target.value })
+                        updateAppearanceDebounced({
+                          brandTagline: event.target.value,
+                        })
                       }
                     />
                   </div>
@@ -826,8 +839,8 @@ export function SettingsContent() {
                       </SelectContent>
                     </Select>
                     <p className="text-muted-foreground text-xs leading-snug">
-                      Applies the theme, fonts, accent, corner radius, and
-                      navigation chrome.
+                      Applies the theme, fonts, accent, corner radius,
+                      navigation chrome, and PDF defaults.
                     </p>
                     <p className="text-muted-foreground text-xs leading-snug">
                       {
@@ -1013,32 +1026,25 @@ export function SettingsContent() {
                     </button>
                   </div>
                   {colorTheme === "custom" && (
-                    <div className="flex flex-col gap-2 sm:flex-row">
-                      <label className="border-input bg-background hover:bg-muted flex h-10 w-full cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-xs transition-colors sm:w-40">
-                        <span
-                          className="size-5 rounded-sm border"
-                          style={{
-                            backgroundColor: `hsl(${customColorValue})`,
-                          }}
-                        />
-                        Pick color
-                        <input
-                          type="color"
-                          value={hslChannelsToHex(customColorValue)}
-                          onChange={(event) =>
-                            updateAppearance({
+                    <div className="space-y-2">
+                      <InputColor
+                        label="Custom Accent"
+                        value={hslChannelsToHex(customColorValue)}
+                        onBlur={() => undefined}
+                        onChange={(value) => {
+                          if (isFullHexColor(value)) {
+                            updateAppearanceDebounced({
                               colorTheme: "custom",
-                              customColor: hexToHslChannels(event.target.value),
-                            })
+                              customColor: hexToHslChannels(value),
+                            });
                           }
-                          className="sr-only"
-                          aria-label="Pick custom accent color"
-                        />
-                      </label>
+                        }}
+                        className="mt-0"
+                      />
                       <Input
                         value={customColorValue}
                         onChange={(event) =>
-                          updateAppearance({
+                          updateAppearanceDebounced({
                             colorTheme: "custom",
                             customColor: event.target.value,
                           })
@@ -1138,119 +1144,6 @@ export function SettingsContent() {
                 </div>
               </section>
 
-              <section className="space-y-4 border-t pt-6">
-                <div>
-                  <h3 className="text-sm font-medium">PDF</h3>
-                  <p className="text-muted-foreground text-xs">
-                    Controls the generated invoice PDF used for downloads and
-                    email attachments.
-                  </p>
-                </div>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <Label className="flex items-center gap-2">
-                      <FileText className="h-4 w-4" />
-                      PDF Template
-                    </Label>
-                    <Select
-                      value={pdfTemplate}
-                      onValueChange={(value) =>
-                        updateAppearance({
-                          pdfTemplate: value as typeof pdfTemplate,
-                        })
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="classic">Classic</SelectItem>
-                        <SelectItem value="minimal">Minimal</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <p className="text-muted-foreground text-xs leading-snug">
-                      Minimal removes shaded table fills for a cleaner document.
-                    </p>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label>PDF Accent</Label>
-                    <div className="flex flex-col gap-2 sm:flex-row">
-                      <label className="border-input bg-background hover:bg-muted flex h-10 w-full cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-xs transition-colors sm:w-40">
-                        <span
-                          className="size-5 rounded-sm border"
-                          style={{ backgroundColor: pdfAccentColor }}
-                        />
-                        Pick color
-                        <input
-                          type="color"
-                          value={pdfAccentColor}
-                          onChange={(event) =>
-                            updateAppearance({
-                              pdfAccentColor: event.target.value,
-                            })
-                          }
-                          className="sr-only"
-                          aria-label="Pick PDF accent color"
-                        />
-                      </label>
-                      <Input
-                        value={pdfAccentColor}
-                        onChange={(event) =>
-                          updateAppearance({
-                            pdfAccentColor: event.target.value,
-                          })
-                        }
-                        placeholder="#111827"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2 md:col-span-2">
-                    <Label>Footer Text</Label>
-                    <Input
-                      value={pdfFooterText}
-                      onChange={(event) =>
-                        updateAppearance({ pdfFooterText: event.target.value })
-                      }
-                    />
-                  </div>
-
-                  <div className="flex items-start justify-between gap-4 rounded-lg border p-3">
-                    <div className="space-y-1">
-                      <Label>Show Logo</Label>
-                      <p className="text-muted-foreground text-xs">
-                        Include the beenvoice logo in the PDF footer.
-                      </p>
-                    </div>
-                    <Switch
-                      checked={pdfShowLogo}
-                      onCheckedChange={(checked) =>
-                        updateAppearance({ pdfShowLogo: Boolean(checked) })
-                      }
-                      aria-label="Toggle PDF logo"
-                    />
-                  </div>
-
-                  <div className="flex items-start justify-between gap-4 rounded-lg border p-3">
-                    <div className="space-y-1">
-                      <Label>Page Numbers</Label>
-                      <p className="text-muted-foreground text-xs">
-                        Show page count in the PDF footer.
-                      </p>
-                    </div>
-                    <Switch
-                      checked={pdfShowPageNumbers}
-                      onCheckedChange={(checked) =>
-                        updateAppearance({
-                          pdfShowPageNumbers: Boolean(checked),
-                        })
-                      }
-                      aria-label="Toggle PDF page numbers"
-                    />
-                  </div>
-                </div>
-              </section>
               {appearanceUpdating && (
                 <p className="text-muted-foreground text-xs">
                   Saving appearance...
@@ -1260,6 +1153,130 @@ export function SettingsContent() {
           )}
         </Card>
 
+        {isAdmin && (
+          <Card className="bg-card border-border border">
+            <CardHeader>
+              <CardTitle className="text-foreground flex items-center gap-2">
+                <FileText className="text-primary h-5 w-5" />
+                Invoice Settings
+              </CardTitle>
+              <CardDescription>
+                Configure generated invoice PDFs and preview the real document
+                output.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid gap-6 xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]">
+                <div className="space-y-4">
+                  <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-1">
+                    <div className="space-y-2">
+                      <Label className="flex items-center gap-2">
+                        <FileText className="h-4 w-4" />
+                        PDF Template
+                      </Label>
+                      <Select
+                        value={pdfTemplate}
+                        onValueChange={(value) =>
+                          updateAppearance({
+                            pdfTemplate: value as typeof pdfTemplate,
+                          })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="classic">Classic</SelectItem>
+                          <SelectItem value="minimal">Minimal</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-muted-foreground text-xs leading-snug">
+                        Minimal removes shaded table fills for a cleaner
+                        document.
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <InputColor
+                        label="PDF Accent"
+                        value={pdfAccentColor}
+                        onBlur={() => undefined}
+                        onChange={(value) => {
+                          if (isFullHexColor(value)) {
+                            updateAppearance({
+                              pdfAccentColor: value,
+                            });
+                          }
+                        }}
+                        className="mt-0"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Footer Text</Label>
+                    <Input
+                      value={pdfFooterText}
+                      onChange={(event) =>
+                        updateAppearanceDebounced({
+                          pdfFooterText: event.target.value,
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+                    <div className="flex items-start justify-between gap-4 border p-3">
+                      <div className="space-y-1">
+                        <Label>Show Logo</Label>
+                        <p className="text-muted-foreground text-xs">
+                          Include the beenvoice logo in the PDF footer.
+                        </p>
+                      </div>
+                      <Switch
+                        checked={pdfShowLogo}
+                        onCheckedChange={(checked) =>
+                          updateAppearance({ pdfShowLogo: Boolean(checked) })
+                        }
+                        aria-label="Toggle PDF logo"
+                      />
+                    </div>
+
+                    <div className="flex items-start justify-between gap-4 border p-3">
+                      <div className="space-y-1">
+                        <Label>Page Numbers</Label>
+                        <p className="text-muted-foreground text-xs">
+                          Show page count in the PDF footer.
+                        </p>
+                      </div>
+                      <Switch
+                        checked={pdfShowPageNumbers}
+                        onCheckedChange={(checked) =>
+                          updateAppearance({
+                            pdfShowPageNumbers: Boolean(checked),
+                          })
+                        }
+                        aria-label="Toggle PDF page numbers"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <PdfPreviewFrame
+                  businessName={brandName}
+                  settings={{
+                    pdfTemplate,
+                    pdfAccentColor,
+                    pdfFooterText,
+                    pdfShowLogo,
+                    pdfShowPageNumbers,
+                  }}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         {/* Accessibility & Animation */}
         <Card className="bg-card border-border border">
           <CardHeader>
@@ -1357,57 +1374,6 @@ export function SettingsContent() {
         </Card>
       </TabsContent>
 
-      {isAdmin && (
-        <TabsContent value="admin" className="space-y-8">
-          <Card className="bg-card border-border border">
-            <CardHeader>
-              <CardTitle className="text-foreground flex items-center gap-2">
-                <Shield className="text-primary h-5 w-5" />
-                Accounts
-              </CardTitle>
-              <CardDescription>
-                Manage account access and roles without opening customer data.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {accounts.map((account) => (
-                <div
-                  key={account.id}
-                  className="border-border flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between"
-                >
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium">{account.name}</p>
-                    <p className="text-muted-foreground truncate text-xs">
-                      {account.email}
-                    </p>
-                    <p className="text-muted-foreground mt-1 text-xs">
-                      Created {new Date(account.createdAt).toLocaleDateString()}
-                    </p>
-                  </div>
-                  <Select
-                    value={account.role}
-                    onValueChange={(role) =>
-                      updateAccountRoleMutation.mutate({
-                        userId: account.id,
-                        role: role as "user" | "admin",
-                      })
-                    }
-                  >
-                    <SelectTrigger className="w-full sm:w-36">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="admin">Admin</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </TabsContent>
-      )}
-
       <TabsContent value="data" className="space-y-8">
         {/* Data Overview */}
         <Card className="form-section bg-card border-border border">

src/app/dashboard/settings/page.tsx

@@ -3,7 +3,6 @@ import { HydrateClient } from "~/trpc/server";
 import { PageHeader } from "~/components/layout/page-header";
 import { DataTableSkeleton } from "~/components/data/data-table";
 import { SettingsContent } from "./_components/settings-content";
-import { Card, CardContent } from "~/components/ui/card";
 
 export default async function SettingsPage() {
   return (
@@ -14,15 +13,11 @@ export default async function SettingsPage() {
         variant="gradient"
       />
 
-      <Card>
-        <CardContent className="p-6">
-          <HydrateClient>
-            <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
-              <SettingsContent />
-            </Suspense>
-          </HydrateClient>
-        </CardContent>
-      </Card>
+      <HydrateClient>
+        <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
+          <SettingsContent />
+        </Suspense>
+      </HydrateClient>
     </div>
   );
 }

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "~/styles/globals.css";
 
 import { type Metadata } from "next";
-import { Inter, Playfair_Display, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 
 import { TRPCReactProvider } from "~/trpc/react";
 import { Toaster } from "~/components/ui/sonner";
@@ -10,7 +10,6 @@ import { AppearanceProvider } from "~/components/providers/appearance-provider";
 import {
   brand,
   defaultBodyFontPreference,
-  defaultFontPreference,
   defaultHeadingFontPreference,
   defaultInterfaceTheme,
   defaultRadiusPreference,
@@ -25,20 +24,37 @@ export const metadata: Metadata = {
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
+const geistSans = localFont({
+  src: "../../public/fonts/geist/sans/Geist-VariableFont_wght.ttf",
+  variable: "--font-geist-sans",
   display: "swap",
 });
 
-const playfair = Playfair_Display({
-  subsets: ["latin"],
+const playfair = localFont({
+  src: "../../node_modules/@fontsource-variable/playfair-display/files/playfair-display-latin-wght-normal.woff2",
   variable: "--font-playfair",
   display: "swap",
 });
 
-const geistMono = Geist_Mono({
-  subsets: ["latin"],
+const frutiger = localFont({
+  src: [
+    {
+      path: "../../public/fonts/frutiger/Frutiger.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/frutiger/Frutiger_bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-frutiger",
+  display: "swap",
+});
+
+const geistMono = localFont({
+  src: "../../public/fonts/geist/mono/GeistMono-VariableFont_wght.ttf",
   variable: "--font-geist-mono",
   display: "swap",
 });
@@ -51,14 +67,13 @@ export default function RootLayout({
       suppressHydrationWarning
       lang="en"
       data-interface-theme={defaultInterfaceTheme}
-      data-font={defaultFontPreference}
       data-body-font={defaultBodyFontPreference}
       data-heading-font={defaultHeadingFontPreference}
       data-radius={defaultRadiusPreference}
       data-sidebar-style={defaultSidebarStyle}
       data-color-mode="system"
       data-color-theme="slate"
-      className={`${inter.variable} ${playfair.variable} ${geistMono.variable}`}
+      className={`${geistSans.variable} ${playfair.variable} ${frutiger.variable} ${geistMono.variable}`}
     >
       <head>
         <script
@@ -68,7 +83,6 @@ export default function RootLayout({
               try {
                 var defaults = {
                   interfaceTheme: "${defaultInterfaceTheme}",
-                  fontPreference: "${defaultFontPreference}",
                   bodyFontPreference: "${defaultBodyFontPreference}",
                   headingFontPreference: "${defaultHeadingFontPreference}",
                   radiusPreference: "${defaultRadiusPreference}",
@@ -80,9 +94,8 @@ export default function RootLayout({
                 var appearance = Object.assign(defaults, stored);
                 var root = document.documentElement;
                 root.dataset.interfaceTheme = appearance.interfaceTheme;
-                root.dataset.font = appearance.fontPreference;
-                root.dataset.bodyFont = appearance.bodyFontPreference || appearance.fontPreference;
-                root.dataset.headingFont = appearance.headingFontPreference || appearance.fontPreference;
+                root.dataset.bodyFont = appearance.bodyFontPreference;
+                root.dataset.headingFont = appearance.headingFontPreference;
                 root.dataset.radius = appearance.radiusPreference;
                 root.dataset.sidebarStyle = appearance.sidebarStyle;
                 root.dataset.colorMode = appearance.colorMode;

src/app/page.tsx

@@ -1,278 +1,108 @@
 import Link from "next/link";
-import { Button } from "~/components/ui/button";
+import { ArrowRight, FileText, UserRound } from "lucide-react";
 import { AuthRedirect } from "~/components/AuthRedirect";
-import { Card, CardContent } from "~/components/ui/card";
-import { Badge } from "~/components/ui/badge";
 import { Logo } from "~/components/branding/logo";
-import {
-  ArrowRight,
-  Check,
-  Zap,
-  Shield,
-  BarChart3,
-  Rocket,
-} from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { env } from "~/env";
 import { brand } from "~/lib/branding";
 
 export default function HomePage() {
+  const allowRegistration = env.DISABLE_SIGNUPS !== true;
+
   return (
-    <div className="relative min-h-screen overflow-x-hidden">
+    <main className="bg-background text-foreground min-h-screen">
       <AuthRedirect />
 
-      {/* Blob Background for Homepage */}
-      <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
-        <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
-      </div>
+      <div className="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-5 py-5 sm:px-6 lg:px-8">
+        <header className="flex items-center justify-between gap-4 border-b py-4">
+          <Logo animated={false} />
+          <nav className="flex items-center gap-2">
+            <Link href="/auth/signin">
+              <Button variant="ghost" size="sm">
+                Sign in
+              </Button>
+            </Link>
+            {allowRegistration && (
+              <Link href="/auth/register">
+                <Button size="sm">Create account</Button>
+              </Link>
+            )}
+          </nav>
+        </header>
 
-      {/* Navigation */}
-      <nav className="border-border/60 bg-background/80 fixed top-4 right-4 left-4 z-50 m-4 rounded-2xl border backdrop-blur-md">
-        <div className="mx-auto px-6">
-          <div className="flex h-16 items-center justify-between">
-            <Logo />
-            <div className="hidden items-center space-x-8 md:flex">
-              <a
-                href="#features"
-                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
-              >
-                Features
-              </a>
-              <a
-                href="#pricing"
-                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
-              >
-                Pricing
-              </a>
+        <section className="grid flex-1 items-center gap-10 py-14 md:grid-cols-[1fr_320px] md:py-20">
+          <div className="max-w-2xl space-y-7">
+            <div className="space-y-4">
+              <p className="text-muted-foreground text-sm font-medium">
+                Personal invoicing
+              </p>
+              <h1 className="font-heading text-4xl leading-tight font-bold tracking-normal sm:text-5xl">
+                {brand.name} is a place to make and track invoices.
+              </h1>
+              <p className="text-muted-foreground max-w-xl text-base leading-7 sm:text-lg">
+                Built for one person managing real clients, real work, and the
+                small admin loop around getting paid.
+              </p>
             </div>
-            <div className="flex items-center space-x-4">
+
+            <div className="flex flex-col gap-3 sm:flex-row">
               <Link href="/auth/signin">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="text-muted-foreground hover:text-foreground"
-                >
-                  Sign In
+                <Button size="lg" className="h-11 px-5">
+                  Open workspace
+                  <ArrowRight className="ml-2 h-4 w-4" />
                 </Button>
               </Link>
-              <Link href="/auth/register">
-                <Button size="sm" variant="default" className="rounded-xl px-6">
-                  Get Started
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      {/* Hero Section */}
-      <section className="relative pt-48 pb-32">
-        <div className="container mx-auto px-4 text-center">
-          <div className="mx-auto max-w-4xl">
-            <Badge className="bg-primary/10 text-primary border-primary/20 mb-8 rounded-full border px-4 py-1 text-sm">
-              <Zap className="mr-2 h-3.5 w-3.5" />
-              Completely Free for Everyone
-            </Badge>
-
-            <h1 className="text-foreground font-heading mb-8 text-6xl leading-tight font-bold tracking-tight sm:text-7xl lg:text-8xl">
-              {brand.name} <br />
-              <span className="text-primary italic">Beautifully Simple.</span>
-            </h1>
-
-            <p className="text-muted-foreground mx-auto mb-12 max-w-2xl font-sans text-xl leading-relaxed">
-              {brand.tagline}
-            </p>
-
-            <div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
-              <Link href="/auth/register">
-                <Button
-                  size="lg"
-                  className="shadow-primary/20 hover:shadow-primary/30 h-14 rounded-2xl px-10 text-lg shadow-xl transition-all duration-300 hover:shadow-2xl"
-                >
-                  Start For Free
-                  <ArrowRight className="ml-2 h-5 w-5" />
-                </Button>
-              </Link>
-              <a href="#features">
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="border-border/50 bg-background/50 hover:bg-background/80 h-14 rounded-2xl px-10 text-lg backdrop-blur-sm"
-                >
-                  Learn More
-                </Button>
-              </a>
-            </div>
-
-            <div className="text-muted-foreground/80 mt-16 flex flex-col items-center justify-center gap-2 text-sm sm:flex-row sm:gap-8">
-              <div className="flex items-center gap-2">
-                <Check className="text-primary h-4 w-4" />
-                <span>No credit card required</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Check className="text-primary h-4 w-4" />
-                <span>Setup in 2 minutes</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Check className="text-primary h-4 w-4" />
-                <span>Free forever</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <section id="features" className="relative py-24">
-        <div className="relative z-10 container mx-auto px-4">
-          <div className="mb-20 text-center">
-            <h2 className="text-foreground font-heading mb-6 text-4xl font-bold sm:text-5xl">
-              Everything you need to{" "}
-              <span className="text-primary italic">thrive</span>
-            </h2>
-            <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
-              Powerful features wrapped in a calm, focused interface.
-            </p>
-          </div>
-
-          <div className="grid gap-8 md:grid-cols-3">
-            {[
-              {
-                icon: Rocket,
-                title: "Quick Setup",
-                description:
-                  "Start creating invoices immediately. No complicated setup required.",
-                items: [
-                  "Simple client management",
-                  "Professional templates",
-                  "Easy invoice sending",
-                ],
-              },
-              {
-                icon: BarChart3,
-                title: "Payment Tracking",
-                description:
-                  "Keep track of invoice status and monitor your payments effortlessly.",
-                items: [
-                  "Invoice status tracking",
-                  "Payment history",
-                  "Overdue notifications",
-                ],
-              },
-              {
-                icon: Shield,
-                title: "Professional Features",
-                description:
-                  "Tools that make you look professional and get you paid faster.",
-                items: [
-                  "PDF generation",
-                  "Custom tax rates",
-                  "Professional numbering",
-                ],
-              },
-            ].map((feature, i) => (
-              <Card
-                key={i}
-                className="group border-border/40 bg-background/60 backdrop-blur-xl transition-transform duration-500 hover:-translate-y-2"
-              >
-                <CardContent className="p-8">
-                  <div className="bg-primary/10 text-primary mb-6 inline-flex rounded-2xl p-4">
-                    <feature.icon className="h-8 w-8" />
-                  </div>
-                  <h3 className="text-foreground font-heading mb-4 text-2xl font-bold">
-                    {feature.title}
-                  </h3>
-                  <p className="text-muted-foreground mb-6 leading-relaxed">
-                    {feature.description}
-                  </p>
-                  <ul className="space-y-3">
-                    {feature.items.map((item, j) => (
-                      <li
-                        key={j}
-                        className="text-foreground/80 flex items-center gap-3 text-sm"
-                      >
-                        <div className="bg-primary h-1.5 w-1.5 rounded-full" />
-                        {item}
-                      </li>
-                    ))}
-                  </ul>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="relative overflow-hidden py-24">
-        <div className="relative z-10 container mx-auto px-4">
-          <div className="mx-auto mb-16 max-w-4xl text-center">
-            <h2 className="font-heading mb-6 text-5xl font-bold">
-              Simple Pricing
-            </h2>
-            <p className="text-muted-foreground text-xl">
-              Focus on your work, not on fees.
-            </p>
-          </div>
-
-          <div className="mx-auto max-w-md">
-            <Card className="border-primary/50 shadow-primary/5 bg-background/80 relative overflow-visible shadow-2xl backdrop-blur-xl">
-              <div className="bg-primary text-primary-foreground absolute -top-4 left-1/2 -translate-x-1/2 rounded-full px-6 py-1.5 text-sm font-medium shadow-lg">
-                Forever Free
-              </div>
-              <CardContent className="p-10 text-center">
-                <div className="font-heading mb-2 text-6xl font-bold">$0</div>
-                <div className="text-muted-foreground mb-8">
-                  No credit card required.
-                </div>
-
-                <div className="mb-10 space-y-4 pl-8 text-left">
-                  {[
-                    "Unlimited Invoices",
-                    "Unlimited Clients",
-                    "PDF Downloads",
-                    "Payment Tracking",
-                    "Email Support",
-                  ].map((item, i) => (
-                    <div key={i} className="flex items-center gap-3">
-                      <Check className="text-primary h-5 w-5 shrink-0" />
-                      <span className="text-foreground/90">{item}</span>
-                    </div>
-                  ))}
-                </div>
-
-                <Link href="/auth/register" className="block">
-                  <Button size="lg" className="h-12 w-full rounded-xl text-lg">
-                    Get Started
+              {allowRegistration && (
+                <Link href="/auth/register">
+                  <Button variant="outline" size="lg" className="h-11 px-5">
+                    Create account
                   </Button>
                 </Link>
-              </CardContent>
-            </Card>
+              )}
+            </div>
           </div>
-        </div>
-      </section>
 
-      {/* Footer */}
-      <footer className="border-border/40 bg-background/50 mt-12 border-t py-12 backdrop-blur-sm">
-        <div className="container mx-auto flex flex-col items-center justify-between gap-6 px-6 md:flex-row">
-          <div className="flex items-center gap-3">
-            <Logo size="sm" />
-            <span className="text-muted-foreground text-sm">
-              © 2024 beenvoice
-            </span>
+          <div className="border-border bg-card text-card-foreground rounded-xl border p-5 shadow-sm">
+            <div className="space-y-5">
+              <div className="flex items-start gap-3">
+                <div className="bg-primary/10 text-primary rounded-md p-2">
+                  <UserRound className="h-4 w-4" />
+                </div>
+                <div>
+                  <h2 className="text-sm font-semibold">Clients</h2>
+                  <p className="text-muted-foreground mt-1 text-sm leading-6">
+                    Keep the people and businesses you invoice in one place.
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-3 border-t pt-5">
+                <div className="bg-primary/10 text-primary rounded-md p-2">
+                  <FileText className="h-4 w-4" />
+                </div>
+                <div>
+                  <h2 className="text-sm font-semibold">Invoices</h2>
+                  <p className="text-muted-foreground mt-1 text-sm leading-6">
+                    Draft, send, mark paid, and export the PDF when you need it.
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
-          <div className="text-muted-foreground flex gap-8 text-sm">
-            <a href="#" className="hover:text-foreground transition-colors">
+        </section>
+
+        <footer className="text-muted-foreground flex flex-col gap-3 border-t py-5 text-sm sm:flex-row sm:items-center sm:justify-between">
+          <span>© 2026 {brand.name}</span>
+          <div className="flex gap-5">
+            <Link href="/privacy" className="hover:text-foreground">
               Privacy
-            </a>
-            <a href="#" className="hover:text-foreground transition-colors">
+            </Link>
+            <Link href="/terms" className="hover:text-foreground">
               Terms
-            </a>
-            <a href="#" className="hover:text-foreground transition-colors">
-              Contact
-            </a>
+            </Link>
           </div>
-        </div>
-      </footer>
-    </div>
+        </footer>
+      </div>
+    </main>
   );
 }

src/components/analytics/umami-script.tsx

@@ -4,20 +4,20 @@ import Script from "next/script";
 import { env } from "~/env";
 
 export function UmamiScript() {
-    if (process.env.NODE_ENV === "development") {
-        return null;
-    }
+  if (process.env.NODE_ENV === "development") {
+    return null;
+  }
 
-    if (!env.NEXT_PUBLIC_UMAMI_WEBSITE_ID || !env.NEXT_PUBLIC_UMAMI_SCRIPT_URL) {
-        return null;
-    }
+  if (!env.NEXT_PUBLIC_UMAMI_WEBSITE_ID || !env.NEXT_PUBLIC_UMAMI_SCRIPT_URL) {
+    return null;
+  }
 
-    return (
-        <Script
-            defer
-            src={env.NEXT_PUBLIC_UMAMI_SCRIPT_URL}
-            data-website-id={env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-            strategy="afterInteractive"
-        />
-    );
+  return (
+    <Script
+      defer
+      src={env.NEXT_PUBLIC_UMAMI_SCRIPT_URL}
+      data-website-id={env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+      strategy="afterInteractive"
+    />
+  );
 }

src/components/branding/address-autocomplete.tsx

@@ -64,7 +64,7 @@ export function AddressAutocomplete({
         onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
       />
       {showSuggestions && suggestions.length > 0 && (
-        <Card className="bg-card border-border border absolute z-10 mt-1 max-h-60 w-full overflow-auto">
+        <Card className="bg-card border-border absolute z-10 mt-1 max-h-60 w-full overflow-auto border">
           <ul>
             {suggestions.map((s) => (
               <li

src/components/branding/logo.tsx

@@ -11,10 +11,24 @@ interface LogoProps {
   animated?: boolean;
 }
 
+function splitLogoText(logoText: string) {
+  const voiceIndex = logoText.toLowerCase().indexOf("voice");
+
+  if (voiceIndex > 0) {
+    return [logoText.slice(0, voiceIndex), logoText.slice(voiceIndex)] as const;
+  }
+
+  return [
+    logoText.slice(0, Math.ceil(logoText.length / 2)),
+    logoText.slice(Math.ceil(logoText.length / 2)),
+  ] as const;
+}
+
 export function Logo({ className, size = "md", animated = true }: LogoProps) {
   const appearance = useAppearance();
   const logoText = appearance.brandLogoText || brand.logoText;
   const icon = appearance.brandIcon || brand.icon;
+  const [logoPrefix, logoSuffix] = splitLogoText(logoText);
   const sizeClasses = {
     sm: "text-base",
     md: "text-xl",
@@ -29,7 +43,8 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
         className={className}
         size={size}
         sizeClasses={sizeClasses}
-        logoText={logoText}
+        logoPrefix={logoPrefix}
+        logoSuffix={logoSuffix}
         icon={icon}
       />
     );
@@ -68,7 +83,7 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
             transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
             className="text-foreground font-bold tracking-tight"
           >
-            {logoText.slice(0, Math.ceil(logoText.length / 2))}
+            {logoPrefix}
           </motion.span>
           <motion.span
             initial={{ opacity: 0 }}
@@ -76,7 +91,7 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
             transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
             className="text-foreground/70 font-bold tracking-tight"
           >
-            {logoText.slice(Math.ceil(logoText.length / 2))}
+            {logoSuffix}
           </motion.span>
         </>
       )}
@@ -88,13 +103,15 @@ function LogoContent({
   className,
   size,
   sizeClasses,
-  logoText,
+  logoPrefix,
+  logoSuffix,
   icon,
 }: {
   className?: string;
   size: "sm" | "md" | "lg" | "xl" | "icon";
   sizeClasses: Record<string, string>;
-  logoText: string;
+  logoPrefix: string;
+  logoSuffix: string;
   icon: string;
 }) {
   return (
@@ -105,17 +122,15 @@ function LogoContent({
         className,
       )}
     >
-      <span className="text-primary font-bold tracking-tight">
-        {icon}
-      </span>
+      <span className="text-primary font-bold tracking-tight">{icon}</span>
       {size !== "icon" && (
         <>
           <span className="inline-block w-1"></span>
           <span className="text-foreground font-bold tracking-tight">
-            {logoText.slice(0, Math.ceil(logoText.length / 2))}
+            {logoPrefix}
           </span>
           <span className="text-foreground/70 font-bold tracking-tight">
-            {logoText.slice(Math.ceil(logoText.length / 2))}
+            {logoSuffix}
           </span>
         </>
       )}

src/components/csv-import-page.tsx

@@ -460,7 +460,7 @@ export function CSVImportPage() {
                   applyGlobalClient(newClientId);
                 }
               }}
-              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-12 w-full  border px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-12 w-full border px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
               disabled={loadingClients}
             >
               <option value="">No default client (select individually)</option>
@@ -506,7 +506,7 @@ export function CSVImportPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="bg-primary/10 grid grid-cols-2 gap-4  p-4 md:grid-cols-4">
+                <div className="bg-primary/10 grid grid-cols-2 gap-4 p-4 md:grid-cols-4">
                   <div className="text-center">
                     <div className="text-primary text-2xl font-bold">
                       {totalFiles}
@@ -556,10 +556,7 @@ export function CSVImportPage() {
           <CardContent>
             <div className="space-y-4">
               {files.map((fileData, index) => (
-                <div
-                  key={index}
-                  className="border-border bg-card  border p-4"
-                >
+                <div key={index} className="border-border bg-card border p-4">
                   <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                     <div className="flex items-center gap-3">
                       <FileText className="text-primary h-5 w-5" />
@@ -619,7 +616,7 @@ export function CSVImportPage() {
                         onChange={(e) =>
                           updateFileData(index, { clientId: e.target.value })
                         }
-                        className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full  border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                        className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                         disabled={loadingClients}
                       >
                         <option value="">Select Client</option>
@@ -662,7 +659,7 @@ export function CSVImportPage() {
 
                   {/* Error Display */}
                   {fileData.errors.length > 0 && (
-                    <div className="border-destructive/20 bg-destructive/10 mt-4  border p-3">
+                    <div className="border-destructive/20 bg-destructive/10 mt-4 border p-3">
                       <div className="mb-2 flex items-center gap-2">
                         <AlertCircle className="text-destructive h-4 w-4" />
                         <span className="text-destructive text-sm font-medium">
@@ -772,7 +769,7 @@ export function CSVImportPage() {
 
       {/* Preview Modal */}
       <Dialog open={previewModalOpen} onOpenChange={setPreviewModalOpen}>
-        <DialogContent className="bg-card border-border border flex max-h-[90vh] max-w-4xl flex-col">
+        <DialogContent className="bg-card border-border flex max-h-[90vh] max-w-4xl flex-col border">
           <DialogHeader className="flex-shrink-0">
             <DialogTitle className="text-foreground flex items-center gap-2 text-xl font-bold">
               <FileText className="text-primary h-5 w-5" />

src/components/data/data-table.tsx

@@ -3,6 +3,7 @@
 import type {
   ColumnDef,
   ColumnFiltersState,
+  RowData,
   SortingState,
   VisibilityState,
 } from "@tanstack/react-table";
@@ -53,6 +54,14 @@ import {
 } from "~/components/ui/table";
 import { cn } from "~/lib/utils";
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Generic names must match TanStack's declaration for module augmentation.
+  interface ColumnMeta<TData extends RowData, TValue> {
+    headerClassName?: string;
+    cellClassName?: string;
+  }
+}
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
@@ -125,23 +134,9 @@ export function DataTable<TData, TValue>({
       ...column,
       // Add a meta property to control responsive visibility
       meta: {
-        ...((
-          column as ColumnDef<TData, TValue> & {
-            meta?: { headerClassName?: string; cellClassName?: string };
-          }
-        ).meta ?? {}),
-        headerClassName:
-          (
-            column as ColumnDef<TData, TValue> & {
-              meta?: { headerClassName?: string; cellClassName?: string };
-            }
-          ).meta?.headerClassName ?? "",
-        cellClassName:
-          (
-            column as ColumnDef<TData, TValue> & {
-              meta?: { headerClassName?: string; cellClassName?: string };
-            }
-          ).meta?.cellClassName ?? "",
+        ...(column.meta ?? {}),
+        headerClassName: column.meta?.headerClassName ?? "",
+        cellClassName: column.meta?.cellClassName ?? "",
       },
     }));
   }, [columns]);
@@ -369,9 +364,7 @@ export function DataTable<TData, TValue>({
                   className="bg-muted/50 hover:bg-muted/50"
                 >
                   {headerGroup.headers.map((header) => {
-                    const meta = header.column.columnDef.meta as
-                      | { headerClassName?: string; cellClassName?: string }
-                      | undefined;
+                    const meta = header.column.columnDef.meta;
                     return (
                       <TableHead
                         key={header.id}
@@ -383,9 +376,9 @@ export function DataTable<TData, TValue>({
                         {header.isPlaceholder
                           ? null
                           : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
                       </TableHead>
                     );
                   })}
@@ -407,9 +400,7 @@ export function DataTable<TData, TValue>({
                     }
                   >
                     {row.getVisibleCells().map((cell) => {
-                      const meta = cell.column.columnDef.meta as
-                        | { headerClassName?: string; cellClassName?: string }
-                        | undefined;
+                      const meta = cell.column.columnDef.meta;
                       return (
                         <TableCell
                           key={cell.id}
@@ -451,26 +442,28 @@ export function DataTable<TData, TValue>({
                 <p className="text-muted-foreground hidden text-xs sm:inline sm:text-sm">
                   {table.getFilteredRowModel().rows.length === 0
                     ? "No entries"
-                    : `Showing ${table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    1
-                    } to ${Math.min(
-                      (table.getState().pagination.pageIndex + 1) *
-                      table.getState().pagination.pageSize,
-                      table.getFilteredRowModel().rows.length,
-                    )} of ${table.getFilteredRowModel().rows.length} entries`}
+                    : `Showing ${
+                        table.getState().pagination.pageIndex *
+                          table.getState().pagination.pageSize +
+                        1
+                      } to ${Math.min(
+                        (table.getState().pagination.pageIndex + 1) *
+                          table.getState().pagination.pageSize,
+                        table.getFilteredRowModel().rows.length,
+                      )} of ${table.getFilteredRowModel().rows.length} entries`}
                 </p>
                 <p className="text-muted-foreground text-xs sm:hidden">
                   {table.getFilteredRowModel().rows.length === 0
                     ? "0"
-                    : `${table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    1
-                    }-${Math.min(
-                      (table.getState().pagination.pageIndex + 1) *
-                      table.getState().pagination.pageSize,
-                      table.getFilteredRowModel().rows.length,
-                    )} of ${table.getFilteredRowModel().rows.length}`}
+                    : `${
+                        table.getState().pagination.pageIndex *
+                          table.getState().pagination.pageSize +
+                        1
+                      }-${Math.min(
+                        (table.getState().pagination.pageIndex + 1) *
+                          table.getState().pagination.pageSize,
+                        table.getFilteredRowModel().rows.length,
+                      )} of ${table.getFilteredRowModel().rows.length}`}
                 </p>
                 <Select
                   value={table.getState().pagination.pageSize.toString()}

src/components/data/editable-invoice-items.tsx

@@ -87,8 +87,9 @@ function SortableItem({
     <div
       ref={setNodeRef}
       style={style}
-      className={`card-secondary  transition-colors ${isDragging ? "opacity-50 shadow-lg" : ""
-        }`}
+      className={`card-secondary transition-colors ${
+        isDragging ? "opacity-50 shadow-lg" : ""
+      }`}
     >
       {/* Desktop Layout - Hidden on Mobile */}
       <div className="hidden items-center gap-3 p-4 md:grid md:grid-cols-12">
@@ -153,7 +154,7 @@ function SortableItem({
 
         {/* Amount */}
         <div className="col-span-1">
-          <div className="bg-muted/30 text-primary flex h-9 items-center  border px-3 font-medium">
+          <div className="bg-muted/30 text-primary flex h-9 items-center border px-3 font-medium">
             ${item.amount.toFixed(2)}
           </div>
         </div>
@@ -265,7 +266,7 @@ function SortableItem({
         </div>
 
         {/* Amount */}
-        <div className="bg-muted/20  border p-3">
+        <div className="bg-muted/20 border p-3">
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground text-sm">Total Amount:</span>
             <span className="text-primary font-mono text-lg font-bold">
@@ -360,10 +361,7 @@ export function EditableInvoiceItems({
     return (
       <div className="space-y-3">
         {items.map((item, _index) => (
-          <div
-            key={item.id}
-            className="card-secondary animate-pulse  p-4"
-          >
+          <div key={item.id} className="card-secondary animate-pulse p-4">
             {/* Desktop Skeleton */}
             <div className="hidden grid-cols-12 gap-3 md:grid">
               <div className="col-span-1">

src/components/data/stats-card.tsx

@@ -80,7 +80,7 @@ export function StatsCard({
             )}
           </div>
           {Icon && (
-            <div className={cn(" p-3", styles.background)}>
+            <div className={cn("p-3", styles.background)}>
               <Icon className={cn("h-6 w-6", styles.icon)} />
             </div>
           )}

src/components/forms/business-form.tsx

@@ -143,6 +143,7 @@ export function BusinessForm({ businessId, mode }: BusinessFormProps) {
   // Load business data when editing
   useEffect(() => {
     if (business && mode === "edit") {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded business data into the edit form.
       setFormData({
         name: business.name,
         nickname: business.nickname ?? "",

src/components/forms/client-form.tsx

@@ -119,6 +119,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
   // Load client data when editing
   useEffect(() => {
     if (client && mode === "edit") {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded client data into the edit form.
       setFormData({
         name: client.name,
         email: client.email ?? "",

src/components/forms/file-upload.tsx

@@ -56,7 +56,7 @@ function FilePreview({
   return (
     <div
       className={cn(
-        "flex items-center justify-between  border p-3",
+        "flex items-center justify-between border p-3",
         getStatusColor(),
       )}
     >
@@ -152,7 +152,7 @@ export function FileUpload({
       <div
         {...getRootProps()}
         className={cn(
-          "cursor-pointer  border-2 border-dashed p-8 text-center transition-colors",
+          "cursor-pointer border-2 border-dashed p-8 text-center transition-colors",
           "hover:border-primary/40 hover:bg-primary/10",
           isDragActive && "border-primary/40 bg-primary/10",
           isDragReject && "border-destructive/40 bg-destructive/10",
@@ -164,7 +164,7 @@ export function FileUpload({
         <div className="flex flex-col items-center gap-4">
           <div
             className={cn(
-              " p-3 transition-colors",
+              "p-3 transition-colors",
               isDragActive ? "bg-primary/10" : "bg-muted",
               isDragReject && "bg-destructive/10",
             )}
@@ -222,7 +222,7 @@ export function FileUpload({
 
       {/* Error Summary */}
       {Object.keys(errors).length > 0 && (
-        <div className="border-destructive/20 bg-destructive/10  border p-3">
+        <div className="border-destructive/20 bg-destructive/10 border p-3">
           <div className="mb-2 flex items-center gap-2">
             <AlertCircle className="text-destructive h-4 w-4" />
             <span className="text-destructive text-sm font-medium">

src/components/forms/invoice-calendar-view.tsx

@@ -1,398 +1,520 @@
 "use client";
 
 import * as React from "react";
-import { format, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, subWeeks, addWeeks, subMonths, addMonths } from "date-fns";
+import {
+  format,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  isSameDay,
+  subWeeks,
+  addWeeks,
+  subMonths,
+  addMonths,
+} from "date-fns";
 import { Calendar } from "~/components/ui/calendar";
 import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetFooter,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
 } from "~/components/ui/sheet";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { NumberInput } from "~/components/ui/number-input";
-import { Plus, Trash2, Clock, Calendar as CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Plus,
+  Trash2,
+  Clock,
+  Calendar as CalendarIcon,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 import { cn } from "~/lib/utils";
 
-
 interface InvoiceItem {
-    id: string;
-    date: Date;
-    description: string;
-    hours: number;
-    rate: number;
-    amount: number;
+  id: string;
+  date: Date;
+  description: string;
+  hours: number;
+  rate: number;
+  amount: number;
 }
 
 interface InvoiceCalendarViewProps {
-    items: InvoiceItem[];
-    onUpdateItem: (
-        index: number,
-        field: string,
-        value: string | number | Date
-    ) => void;
-    onAddItem: (date?: Date) => void;
-    onRemoveItem: (index: number) => void;
-    className?: string;
-    defaultHourlyRate: number | null;
+  items: InvoiceItem[];
+  onUpdateItem: (
+    index: number,
+    field: string,
+    value: string | number | Date,
+  ) => void;
+  onAddItem: (date?: Date) => void;
+  onRemoveItem: (index: number) => void;
+  className?: string;
+  defaultHourlyRate: number | null;
 }
 
 export function InvoiceCalendarView({
-    items,
-    onUpdateItem,
-    onAddItem,
-    onRemoveItem,
-    className,
-    defaultHourlyRate: _defaultHourlyRate,
+  items,
+  onUpdateItem,
+  onAddItem,
+  onRemoveItem,
+  className,
+  defaultHourlyRate: _defaultHourlyRate,
 }: InvoiceCalendarViewProps) {
-    const [date, setDate] = React.useState<Date | undefined>(undefined); // Start unselected
-    const [viewDate, setViewDate] = React.useState<Date>(new Date()); // Controls the view (month/week)
-    const [view, setView] = React.useState<"month" | "week">("month");
-    const [sheetOpen, setSheetOpen] = React.useState(false);
-    // Derived state for selected date items - solves cursor jumping
-    const selectedDateItems = React.useMemo(() => {
-        if (!date) return [];
-        return items
-            .map((item, index) => ({ item, index }))
-            .filter((wrapper) => {
-                const itemDate = new Date(wrapper.item.date);
-                return isSameDay(itemDate, date);
-            });
-    }, [items, date]);
+  const [date, setDate] = React.useState<Date | undefined>(undefined); // Start unselected
+  const [viewDate, setViewDate] = React.useState<Date>(new Date()); // Controls the view (month/week)
+  const [view, setView] = React.useState<"month" | "week">("month");
+  const [sheetOpen, setSheetOpen] = React.useState(false);
+  // Derived state for selected date items - solves cursor jumping
+  const selectedDateItems = React.useMemo(() => {
+    if (!date) return [];
+    return items
+      .map((item, index) => ({ item, index }))
+      .filter((wrapper) => {
+        const itemDate = new Date(wrapper.item.date);
+        return isSameDay(itemDate, date);
+      });
+  }, [items, date]);
 
-    // Helper to get items for any date (for calendar view)
-    const getItemsForDate = React.useCallback((targetDate: Date) => {
-        return items
-            .map((item, index) => ({ item, index }))
-            .filter((wrapper) => {
-                const itemDate = new Date(wrapper.item.date);
-                return isSameDay(itemDate, targetDate);
-            });
-    }, [items]);
+  // Helper to get items for any date (for calendar view)
+  const getItemsForDate = React.useCallback(
+    (targetDate: Date) => {
+      return items
+        .map((item, index) => ({ item, index }))
+        .filter((wrapper) => {
+          const itemDate = new Date(wrapper.item.date);
+          return isSameDay(itemDate, targetDate);
+        });
+    },
+    [items],
+  );
 
-    const handleSelectDate = (newDate: Date | undefined) => {
-        if (!newDate) return;
-        setDate(newDate);
-        setSheetOpen(true);
-    };
+  const handleSelectDate = (newDate: Date | undefined) => {
+    if (!newDate) return;
+    setDate(newDate);
+    setSheetOpen(true);
+  };
 
-    const handleAddNewItem = () => {
-        if (date) {
-            onAddItem(date);
-        }
-    };
+  const handleAddNewItem = () => {
+    if (date) {
+      onAddItem(date);
+    }
+  };
 
-    // Week View Logic - Uses viewDate
-    const currentWeekStart = startOfWeek(viewDate);
-    const currentWeekEnd = endOfWeek(viewDate);
-    const weekDays = eachDayOfInterval({ start: currentWeekStart, end: currentWeekEnd });
+  // Week View Logic - Uses viewDate
+  const currentWeekStart = startOfWeek(viewDate);
+  const currentWeekEnd = endOfWeek(viewDate);
+  const weekDays = eachDayOfInterval({
+    start: currentWeekStart,
+    end: currentWeekEnd,
+  });
 
-    const handleCloseSheet = (isOpen: boolean) => {
-        setSheetOpen(isOpen);
-        if (!isOpen) {
-            setDate(undefined);
-        }
-    };
+  const handleCloseSheet = (isOpen: boolean) => {
+    setSheetOpen(isOpen);
+    if (!isOpen) {
+      setDate(undefined);
+    }
+  };
 
-    return (
-        <div className={cn("flex flex-col gap-4 h-full w-full", className)}>
-            <div className="flex items-center justify-between px-4 pt-4 w-full gap-4">
-                {/* Navigation Controls */}
-                <div className="flex items-center gap-2">
-                    {view === "week" ? (
-                        <>
-                            <Button variant="outline" size="icon" onClick={() => setViewDate(d => subWeeks(d, 1))} className="h-8 w-8 rounded-lg">
-                                <ChevronLeft className="h-4 w-4" />
-                            </Button>
-                            <span className="text-sm font-medium w-36 text-center">
-                                {`${format(currentWeekStart, "MMM d")} - ${format(currentWeekEnd, "MMM d")}`}
-                            </span>
-                            <Button variant="outline" size="icon" onClick={() => setViewDate(d => addWeeks(d, 1))} className="h-8 w-8 rounded-lg">
-                                <ChevronRight className="h-4 w-4" />
-                            </Button>
-                        </>
-                    ) : (
-                        <>
-                            <Button variant="outline" size="icon" onClick={() => setViewDate(d => subMonths(d, 1))} className="h-8 w-8 rounded-lg">
-                                <ChevronLeft className="h-4 w-4" />
-                            </Button>
-                            <span className="text-sm font-medium w-36 text-center">
-                                {format(viewDate, "MMMM yyyy")}
-                            </span>
-                            <Button variant="outline" size="icon" onClick={() => setViewDate(d => addMonths(d, 1))} className="h-8 w-8 rounded-lg">
-                                <ChevronRight className="h-4 w-4" />
-                            </Button>
-                        </>
-                    )}
-                </div>
-
-                <div className="flex items-center space-x-2 ml-auto">
-                    {/* View Switcher */}
-                    <div className="bg-muted p-1 rounded-lg flex text-sm">
-                        <button
-                            type="button"
-                            onClick={() => setView("month")}
-                            className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "month" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
-                        >
-                            Month
-                        </button>
-                        <button
-                            type="button"
-                            onClick={() => setView("week")}
-                            className={cn("px-3 py-1.5 rounded-md transition-all text-center font-medium", view === "week" ? "bg-background shadow text-foreground" : "text-muted-foreground hover:text-foreground")}
-                        >
-                            Week
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div className="flex-1 w-full overflow-hidden">
-                {view === "month" ? (
-                    <Calendar
-                        mode="single"
-                        selected={date}
-                        onSelect={handleSelectDate}
-                        month={viewDate}
-                        onMonthChange={setViewDate}
-                        className="rounded-md border-0 w-full p-0"
-                        classNames={{
-                            root: "w-full p-0",
-                            months: "flex flex-col w-full",
-                            month: "flex flex-col w-full space-y-4",
-
-                            // Grid - Revert to Flex but Enforce 1/7th Width
-                            // table: "w-full border-collapse", // No table-fixed
-                            head_row: "flex w-full",
-                            row: "flex w-full mt-2",
-
-                            // Cells & Headers: Explicit width 14.28%
-                            // Use calc(100%/7) via tailwind arbitrary or just flex bases.
-                            // Better: w-[14.28%] flex-none (approx 1/7)
-                            weekdays: "flex w-full border-b",
-                            weekday: "w-[14.285%] flex-none text-muted-foreground font-normal text-[0.8rem] text-center pb-4",
-
-                            week: "flex w-full mt-2",
-                            cell: "w-[14.285%] flex-none h-20 sm:h-28 md:h-32 border-b p-0 relative focus-within:relative focus-within:z-20 text-center text-sm",
-
-                            // Hide internal navigation & caption entirely
-                            nav: "hidden",
-                            caption: "hidden",
-
-                            day: cn(
-                                "w-full h-full p-2 font-normal aria-selected:opacity-100 flex flex-col items-start justify-start gap-1 hover:bg-accent/50 hover:text-accent-foreground align-top transition-colors rounded-xl"
-                            ),
-                            day_selected: "bg-primary/5 text-primary",
-                            day_today: "bg-accent/20",
-                            day_outside: "text-muted-foreground opacity-30",
-                        }}
-                        formatters={{
-                            formatMonthCaption: () => "", // Clear default caption text to prevent duplication
-                        }}
-                        components={{
-                            DayButton: (props) => {
-                                const { day, modifiers, className, ...buttonProps } = props;
-                                const DayDate = day.date;
-                                const dayItems = getItemsForDate(DayDate);
-                                // const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0); // Unused now
-
-                                return (
-                                    <button
-                                        {...buttonProps}
-                                        type="button"
-                                        className={cn(
-                                            "relative flex h-full w-full flex-col items-start justify-between p-2 transition-all rounded-xl border border-transparent hover:border-border/50 hover:bg-secondary/30 text-left overflow-hidden",
-                                            // Selected State: Filled Box, No Outline
-                                            modifiers.selected && "bg-primary text-primary-foreground hover:bg-primary/90 shadow-md transform scale-[0.98]",
-                                            modifiers.today && !modifiers.selected && "bg-accent/40 rounded-xl",
-                                            className
-                                        )}
-                                    >
-                                        <span className="text-sm font-medium z-10">{DayDate.getDate()}</span>
-                                        {dayItems.length > 0 && (
-                                            <div className="flex flex-col gap-1 w-full mt-1 overflow-hidden h-full justify-end pb-1">
-                                                <div className="flex flex-col gap-1 w-full mt-1">
-                                                    {dayItems.slice(0, 4).map((item, idx) => (
-                                                        <div key={idx} className={cn("h-1 w-full rounded-full", modifiers.selected ? "bg-primary-foreground/50" : "bg-primary/50")} />
-                                                    ))}
-                                                    {dayItems.length > 4 && <div className={cn("h-1 w-1/3 rounded-full", modifiers.selected ? "bg-primary-foreground/30" : "bg-muted-foreground/30")} />}
-                                                </div>
-                                            </div>
-                                        )}
-                                    </button>
-                                );
-                            }
-                        }}
-                    />
-                ) : (
-                    <div className="flex gap-3 overflow-x-auto p-4 pb-6 w-full">
-                        {weekDays.map((day) => {
-                            const isSelected = date && isSameDay(day, date);
-                            const isToday = isSameDay(day, new Date());
-                            const dayItems = getItemsForDate(day);
-                            const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0);
-
-                            return (
-                                <button
-                                    key={day.toString()}
-                                    type="button"
-                                    onClick={() => handleSelectDate(day)}
-                                    className={cn(
-                                        "flex flex-col min-h-[260px] flex-shrink-0 w-[120px] sm:flex-1 sm:w-auto border rounded-3xl p-3 text-left transition-all hover:bg-accent/30",
-                                        isSelected ? "ring-2 ring-primary ring-offset-2 bg-primary/5" : "bg-background/40",
-                                        isToday && !isSelected ? "bg-accent/40" : ""
-                                    )}
-                                >
-                                    <div className="flex flex-col items-center mb-4 pb-4 border-b w-full">
-                                        <span className="text-xs font-bold text-muted-foreground uppercase">{format(day, "EEE")}</span>
-                                        <span className="text-2xl font-light">{format(day, "d")}</span>
-                                    </div>
-
-                                    <div className="flex-1 space-y-2 w-full overflow-hidden">
-                                        {dayItems.length > 0 ? (
-                                            dayItems.map(({ item }, i) => (
-                                                <div key={i} className="bg-background rounded-xl p-2 text-xs shadow-sm border">
-                                                    <div className="font-medium line-clamp-2 text-wrap break-words">{item.description || "No description"}</div>
-                                                    <div className="text-muted-foreground whitespace-nowrap">{item.hours}h</div>
-                                                </div>
-                                            ))
-                                        ) : (
-                                            <div className="h-full flex items-center justify-center text-muted-foreground/20">
-                                                <Plus className="w-8 h-8" />
-                                            </div>
-                                        )}
-                                    </div>
-
-                                    {dayItems.length > 0 && (
-                                        <div className="pt-2 mt-auto text-center w-full">
-                                            <span className="text-sm font-semibold">{totalHours}h Total</span>
-                                        </div>
-                                    )}
-                                </button>
-                            );
-                        })}
-                    </div>
-                )}
-            </div>
-
-            {/* Sheet for Day Details */}
-            <Sheet
-                open={sheetOpen}
-                onOpenChange={handleCloseSheet}
-            >
-                <SheetContent side="right" className="w-full max-w-full sm:w-[400px] sm:max-w-[540px] flex flex-col gap-0 p-0">
-                    <SheetHeader className="p-6 border-b">
-                        <SheetTitle className="flex items-center gap-3 text-2xl flex-wrap">
-                            <div className="bg-primary/10 p-2.5 rounded-full flex-shrink-0">
-                                <CalendarIcon className="w-6 h-6 text-primary" />
-                            </div>
-                            <span className="break-words text-left">{date ? format(date, "EEEE, MMMM do") : "Details"}</span>
-                        </SheetTitle>
-                    </SheetHeader>
-
-                    <div className="flex-1 overflow-y-auto p-6">
-                        <div className="space-y-6">
-                            {date && selectedDateItems.length === 0 ? (
-                                <div className="flex flex-col items-center justify-center py-16 text-center space-y-4 bg-secondary/20 rounded-3xl border border-dashed border-border/60">
-                                    <div className="bg-background p-4 rounded-full shadow-sm">
-                                        <Clock className="w-8 h-8 text-muted-foreground/50" />
-                                    </div>
-                                    <div className="space-y-1">
-                                        <p className="font-semibold text-lg text-foreground">No hours logged</p>
-                                        <p className="text-sm text-muted-foreground/80 max-w-[200px]">There are no time entries recorded for this day yet.</p>
-                                    </div>
-                                    <Button onClick={handleAddNewItem} className="mt-2" size="lg">
-                                        <Plus className="w-4 h-4 mr-2" />
-                                        Log Time
-                                    </Button>
-                                </div>
-                            ) : (
-                                <div className="space-y-4">
-                                    {selectedDateItems.map(({ item, index }) => (
-                                        <div key={item.id} className="border-border bg-card overflow-hidden rounded-lg border group hover:border-primary/50 transition-colors">
-                                            <div className="space-y-3 p-4">
-                                                {/* Description */}
-                                                <div className="space-y-1">
-                                                    <Label className="text-muted-foreground text-xs">Description</Label>
-                                                    <Input
-                                                        value={item.description}
-                                                        onChange={(e) => onUpdateItem(index, "description", e.target.value)}
-                                                        placeholder="Describe the work performed..."
-                                                        className="pl-3 text-sm"
-                                                    />
-                                                </div>
-
-                                                {/* Hours and Rate in a row */}
-                                                <div className="grid grid-cols-2 gap-3">
-                                                    <div className="space-y-1">
-                                                        <Label className="text-muted-foreground text-xs">Hours</Label>
-                                                        <NumberInput
-                                                            value={item.hours}
-                                                            onChange={v => onUpdateItem(index, "hours", v)}
-                                                            step={0.25}
-                                                            min={0}
-                                                            width="full"
-                                                        />
-                                                    </div>
-                                                    <div className="space-y-1">
-                                                        <Label className="text-muted-foreground text-xs">Rate</Label>
-                                                        <NumberInput
-                                                            value={item.rate}
-                                                            onChange={v => onUpdateItem(index, "rate", v)}
-                                                            prefix="$"
-                                                            min={0}
-                                                            step={1}
-                                                            width="full"
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            {/* Bottom section with controls, item name, and total */}
-                                            <div className="border-border bg-muted/50 flex items-center justify-between border-t px-4 py-2">
-                                                <div className="flex items-center gap-2">
-                                                    <Button
-                                                        type="button"
-                                                        variant="ghost"
-                                                        size="sm"
-                                                        onClick={() => onRemoveItem(index)}
-                                                        className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-                                                    >
-                                                        <Trash2 className="h-4 w-4" />
-                                                    </Button>
-                                                </div>
-                                                <div className="flex-1 px-3 text-center">
-                                                    <span className="text-muted-foreground block text-sm font-medium">
-                                                        Item #{index + 1}
-                                                    </span>
-                                                </div>
-                                                <div className="flex flex-col items-end">
-                                                    <span className="text-muted-foreground text-xs">Total</span>
-                                                    <span className="text-primary text-lg font-bold">
-                                                        ${(item.hours * item.rate).toFixed(2)}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                    <Button variant="outline" onClick={handleAddNewItem} className="w-full border-dashed py-8 rounded-xl hover:bg-accent/50 hover:border-primary/50 text-muted-foreground hover:text-primary transition-all gap-2 group">
-                                        <div className="bg-muted group-hover:bg-primary/10 p-1 rounded-md transition-colors">
-                                            <Plus className="w-4 h-4" />
-                                        </div>
-                                        <span>Add Another Entry</span>
-                                    </Button>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                    <SheetFooter className="p-6 border-t bg-muted/10 mt-auto">
-                        <Button className="w-full sm:w-full rounded-xl h-12 text-base shadow-md" size="lg" onClick={() => handleCloseSheet(false)}>Done</Button>
-                    </SheetFooter>
-                </SheetContent>
-            </Sheet>
+  return (
+    <div className={cn("flex h-full w-full flex-col gap-4", className)}>
+      <div className="flex w-full items-center justify-between gap-4 px-4 pt-4">
+        {/* Navigation Controls */}
+        <div className="flex items-center gap-2">
+          {view === "week" ? (
+            <>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setViewDate((d) => subWeeks(d, 1))}
+                className="h-8 w-8 rounded-lg"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="w-36 text-center text-sm font-medium">
+                {`${format(currentWeekStart, "MMM d")} - ${format(currentWeekEnd, "MMM d")}`}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setViewDate((d) => addWeeks(d, 1))}
+                className="h-8 w-8 rounded-lg"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setViewDate((d) => subMonths(d, 1))}
+                className="h-8 w-8 rounded-lg"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="w-36 text-center text-sm font-medium">
+                {format(viewDate, "MMMM yyyy")}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setViewDate((d) => addMonths(d, 1))}
+                className="h-8 w-8 rounded-lg"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </>
+          )}
         </div>
-    );
+
+        <div className="ml-auto flex items-center space-x-2">
+          {/* View Switcher */}
+          <div className="bg-muted flex rounded-lg p-1 text-sm">
+            <button
+              type="button"
+              onClick={() => setView("month")}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-center font-medium transition-all",
+                view === "month"
+                  ? "bg-background text-foreground shadow"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              Month
+            </button>
+            <button
+              type="button"
+              onClick={() => setView("week")}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-center font-medium transition-all",
+                view === "week"
+                  ? "bg-background text-foreground shadow"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              Week
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full flex-1 overflow-hidden">
+        {view === "month" ? (
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={handleSelectDate}
+            month={viewDate}
+            onMonthChange={setViewDate}
+            className="w-full rounded-md border-0 p-0"
+            classNames={{
+              root: "w-full p-0",
+              months: "flex flex-col w-full",
+              month: "flex flex-col w-full space-y-4",
+
+              // Grid - Revert to Flex but Enforce 1/7th Width
+              // table: "w-full border-collapse", // No table-fixed
+              head_row: "flex w-full",
+              row: "flex w-full mt-2",
+
+              // Cells & Headers: Explicit width 14.28%
+              // Use calc(100%/7) via tailwind arbitrary or just flex bases.
+              // Better: w-[14.28%] flex-none (approx 1/7)
+              weekdays: "flex w-full border-b",
+              weekday:
+                "w-[14.285%] flex-none text-muted-foreground font-normal text-[0.8rem] text-center pb-4",
+
+              week: "flex w-full mt-2",
+              cell: "w-[14.285%] flex-none h-20 sm:h-28 md:h-32 border-b p-0 relative focus-within:relative focus-within:z-20 text-center text-sm",
+
+              // Hide internal navigation & caption entirely
+              nav: "hidden",
+              caption: "hidden",
+
+              day: cn(
+                "w-full h-full p-2 font-normal aria-selected:opacity-100 flex flex-col items-start justify-start gap-1 hover:bg-accent/50 hover:text-accent-foreground align-top transition-colors rounded-xl",
+              ),
+              day_selected: "bg-primary/5 text-primary",
+              day_today: "bg-accent/20",
+              day_outside: "text-muted-foreground opacity-30",
+            }}
+            formatters={{
+              formatMonthCaption: () => "", // Clear default caption text to prevent duplication
+            }}
+            components={{
+              DayButton: (props) => {
+                const { day, modifiers, className, ...buttonProps } = props;
+                const DayDate = day.date;
+                const dayItems = getItemsForDate(DayDate);
+                // const totalHours = dayItems.reduce((acc, curr) => acc + curr.item.hours, 0); // Unused now
+
+                return (
+                  <button
+                    {...buttonProps}
+                    type="button"
+                    className={cn(
+                      "hover:border-border/50 hover:bg-secondary/30 relative flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-xl border border-transparent p-2 text-left transition-all",
+                      // Selected State: Filled Box, No Outline
+                      modifiers.selected &&
+                        "bg-primary text-primary-foreground hover:bg-primary/90 scale-[0.98] transform shadow-md",
+                      modifiers.today &&
+                        !modifiers.selected &&
+                        "bg-accent/40 rounded-xl",
+                      className,
+                    )}
+                  >
+                    <span className="z-10 text-sm font-medium">
+                      {DayDate.getDate()}
+                    </span>
+                    {dayItems.length > 0 && (
+                      <div className="mt-1 flex h-full w-full flex-col justify-end gap-1 overflow-hidden pb-1">
+                        <div className="mt-1 flex w-full flex-col gap-1">
+                          {dayItems.slice(0, 4).map((item, idx) => (
+                            <div
+                              key={idx}
+                              className={cn(
+                                "h-1 w-full rounded-full",
+                                modifiers.selected
+                                  ? "bg-primary-foreground/50"
+                                  : "bg-primary/50",
+                              )}
+                            />
+                          ))}
+                          {dayItems.length > 4 && (
+                            <div
+                              className={cn(
+                                "h-1 w-1/3 rounded-full",
+                                modifiers.selected
+                                  ? "bg-primary-foreground/30"
+                                  : "bg-muted-foreground/30",
+                              )}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </button>
+                );
+              },
+            }}
+          />
+        ) : (
+          <div className="flex w-full gap-3 overflow-x-auto p-4 pb-6">
+            {weekDays.map((day) => {
+              const isSelected = date && isSameDay(day, date);
+              const isToday = isSameDay(day, new Date());
+              const dayItems = getItemsForDate(day);
+              const totalHours = dayItems.reduce(
+                (acc, curr) => acc + curr.item.hours,
+                0,
+              );
+
+              return (
+                <button
+                  key={day.toString()}
+                  type="button"
+                  onClick={() => handleSelectDate(day)}
+                  className={cn(
+                    "hover:bg-accent/30 flex min-h-[260px] w-[120px] flex-shrink-0 flex-col rounded-3xl border p-3 text-left transition-all sm:w-auto sm:flex-1",
+                    isSelected
+                      ? "ring-primary bg-primary/5 ring-2 ring-offset-2"
+                      : "bg-background/40",
+                    isToday && !isSelected ? "bg-accent/40" : "",
+                  )}
+                >
+                  <div className="mb-4 flex w-full flex-col items-center border-b pb-4">
+                    <span className="text-muted-foreground text-xs font-bold uppercase">
+                      {format(day, "EEE")}
+                    </span>
+                    <span className="text-2xl font-light">
+                      {format(day, "d")}
+                    </span>
+                  </div>
+
+                  <div className="w-full flex-1 space-y-2 overflow-hidden">
+                    {dayItems.length > 0 ? (
+                      dayItems.map(({ item }, i) => (
+                        <div
+                          key={i}
+                          className="bg-background rounded-xl border p-2 text-xs shadow-sm"
+                        >
+                          <div className="line-clamp-2 font-medium text-wrap break-words">
+                            {item.description || "No description"}
+                          </div>
+                          <div className="text-muted-foreground whitespace-nowrap">
+                            {item.hours}h
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-muted-foreground/20 flex h-full items-center justify-center">
+                        <Plus className="h-8 w-8" />
+                      </div>
+                    )}
+                  </div>
+
+                  {dayItems.length > 0 && (
+                    <div className="mt-auto w-full pt-2 text-center">
+                      <span className="text-sm font-semibold">
+                        {totalHours}h Total
+                      </span>
+                    </div>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Sheet for Day Details */}
+      <Sheet open={sheetOpen} onOpenChange={handleCloseSheet}>
+        <SheetContent
+          side="right"
+          className="flex w-full max-w-full flex-col gap-0 p-0 sm:w-[400px] sm:max-w-[540px]"
+        >
+          <SheetHeader className="border-b p-6">
+            <SheetTitle className="flex flex-wrap items-center gap-3 text-2xl">
+              <div className="bg-primary/10 flex-shrink-0 rounded-full p-2.5">
+                <CalendarIcon className="text-primary h-6 w-6" />
+              </div>
+              <span className="text-left break-words">
+                {date ? format(date, "EEEE, MMMM do") : "Details"}
+              </span>
+            </SheetTitle>
+          </SheetHeader>
+
+          <div className="flex-1 overflow-y-auto p-6">
+            <div className="space-y-6">
+              {date && selectedDateItems.length === 0 ? (
+                <div className="bg-secondary/20 border-border/60 flex flex-col items-center justify-center space-y-4 rounded-3xl border border-dashed py-16 text-center">
+                  <div className="bg-background rounded-full p-4 shadow-sm">
+                    <Clock className="text-muted-foreground/50 h-8 w-8" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-foreground text-lg font-semibold">
+                      No hours logged
+                    </p>
+                    <p className="text-muted-foreground/80 max-w-[200px] text-sm">
+                      There are no time entries recorded for this day yet.
+                    </p>
+                  </div>
+                  <Button onClick={handleAddNewItem} className="mt-2" size="lg">
+                    <Plus className="mr-2 h-4 w-4" />
+                    Log Time
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {selectedDateItems.map(({ item, index }) => (
+                    <div
+                      key={item.id}
+                      className="border-border bg-card group hover:border-primary/50 overflow-hidden rounded-lg border transition-colors"
+                    >
+                      <div className="space-y-3 p-4">
+                        {/* Description */}
+                        <div className="space-y-1">
+                          <Label className="text-muted-foreground text-xs">
+                            Description
+                          </Label>
+                          <Input
+                            value={item.description}
+                            onChange={(e) =>
+                              onUpdateItem(index, "description", e.target.value)
+                            }
+                            placeholder="Describe the work performed..."
+                            className="pl-3 text-sm"
+                          />
+                        </div>
+
+                        {/* Hours and Rate in a row */}
+                        <div className="grid grid-cols-2 gap-3">
+                          <div className="space-y-1">
+                            <Label className="text-muted-foreground text-xs">
+                              Hours
+                            </Label>
+                            <NumberInput
+                              value={item.hours}
+                              onChange={(v) => onUpdateItem(index, "hours", v)}
+                              step={0.25}
+                              min={0}
+                              width="full"
+                            />
+                          </div>
+                          <div className="space-y-1">
+                            <Label className="text-muted-foreground text-xs">
+                              Rate
+                            </Label>
+                            <NumberInput
+                              value={item.rate}
+                              onChange={(v) => onUpdateItem(index, "rate", v)}
+                              prefix="$"
+                              min={0}
+                              step={1}
+                              width="full"
+                            />
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Bottom section with controls, item name, and total */}
+                      <div className="border-border bg-muted/50 flex items-center justify-between border-t px-4 py-2">
+                        <div className="flex items-center gap-2">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onRemoveItem(index)}
+                            className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                        <div className="flex-1 px-3 text-center">
+                          <span className="text-muted-foreground block text-sm font-medium">
+                            Item #{index + 1}
+                          </span>
+                        </div>
+                        <div className="flex flex-col items-end">
+                          <span className="text-muted-foreground text-xs">
+                            Total
+                          </span>
+                          <span className="text-primary text-lg font-bold">
+                            ${(item.hours * item.rate).toFixed(2)}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  <Button
+                    variant="outline"
+                    onClick={handleAddNewItem}
+                    className="hover:bg-accent/50 hover:border-primary/50 text-muted-foreground hover:text-primary group w-full gap-2 rounded-xl border-dashed py-8 transition-all"
+                  >
+                    <div className="bg-muted group-hover:bg-primary/10 rounded-md p-1 transition-colors">
+                      <Plus className="h-4 w-4" />
+                    </div>
+                    <span>Add Another Entry</span>
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+          <SheetFooter className="bg-muted/10 mt-auto border-t p-6">
+            <Button
+              className="h-12 w-full rounded-xl text-base shadow-md sm:w-full"
+              size="lg"
+              onClick={() => handleCloseSheet(false)}
+            >
+              Done
+            </Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
 }

src/components/forms/invoice-form.tsx

@@ -93,12 +93,8 @@ function plainTextToHtml(value: string) {
     .replace(/\n/g, "<br>");
 }
 
-export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
-  const router = useRouter();
-  const utils = api.useUtils();
-
-  // State
-  const [formData, setFormData] = useState<InvoiceFormData>({
+function createDefaultInvoiceFormData(): InvoiceFormData {
+  return {
     invoiceNumber: `INV-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${Date.now().toString().slice(-6)}`,
     invoicePrefix: "#",
     businessId: "",
@@ -121,7 +117,17 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
         amount: 0,
       },
     ],
-  });
+  };
+}
+
+export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
+  const router = useRouter();
+  const utils = api.useUtils();
+
+  // State
+  const [formData, setFormData] = useState<InvoiceFormData>(
+    createDefaultInvoiceFormData,
+  );
 
   const [loading, setLoading] = useState(false);
   const [initialized, setInitialized] = useState(false);
@@ -153,6 +159,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
   // Init Effects (Same as before)
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Reset initialization state when the routed invoice changes.
     setInitialized(false);
   }, [invoiceId]);
   useEffect(() => {
@@ -167,6 +174,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
           rate: item.rate,
           amount: item.amount,
         })) || [];
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Sync loaded invoice data into the edit form.
       setFormData({
         invoiceNumber: existingInvoice.invoiceNumber,
         invoicePrefix: existingInvoice.invoicePrefix ?? "#",

src/components/forms/invoice/invoice-meta-sidebar.tsx

@@ -7,196 +7,212 @@ import { Textarea } from "~/components/ui/textarea";
 import { DatePicker } from "~/components/ui/date-picker";
 import { NumberInput } from "~/components/ui/number-input";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "~/components/ui/select";
-import {
-    STATUS_OPTIONS,
-} from "./types";
-import type {
-    InvoiceFormData,
-    ClientType,
-    BusinessType,
-} from "./types";
+import { STATUS_OPTIONS } from "./types";
+import type { InvoiceFormData, ClientType, BusinessType } from "./types";
 
 interface InvoiceMetaSidebarProps {
-    formData: InvoiceFormData;
-    updateField: <K extends keyof InvoiceFormData>(
-        field: K,
-        value: InvoiceFormData[K]
-    ) => void;
-    clients: ClientType[] | undefined;
-    businesses: BusinessType[] | undefined;
-    className?: string;
+  formData: InvoiceFormData;
+  updateField: <K extends keyof InvoiceFormData>(
+    field: K,
+    value: InvoiceFormData[K],
+  ) => void;
+  clients: ClientType[] | undefined;
+  businesses: BusinessType[] | undefined;
+  className?: string;
 }
 
 export function InvoiceMetaSidebar({
-    formData,
-    updateField,
-    clients,
-    businesses,
-    className,
+  formData,
+  updateField,
+  clients,
+  businesses,
+  className,
 }: InvoiceMetaSidebarProps) {
-    return (
-        <div className={cn("flex flex-col gap-6 p-4 h-full", className)}>
-            <div className="space-y-4">
-                <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
-                    Invoice Details
-                </h3>
+  return (
+    <div className={cn("flex h-full flex-col gap-6 p-4", className)}>
+      <div className="space-y-4">
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
+          Invoice Details
+        </h3>
 
-                {/* Status */}
-                <div className="space-y-1.5">
-                    <Label htmlFor="status" className="text-xs">Status</Label>
-                    <Select
-                        value={formData.status}
-                        onValueChange={(value: "draft" | "sent" | "paid") =>
-                            updateField("status", value)
-                        }
-                    >
-                        <SelectTrigger className="bg-background/50">
-                            <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {STATUS_OPTIONS.map((option) => (
-                                <SelectItem key={option.value} value={option.value}>
-                                    {option.label}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-
-                {/* Invoice Number */}
-                <div className="space-y-1.5">
-                    <Label htmlFor="invoiceNumber" className="text-xs">Invoice Number</Label>
-                    <Input
-                        id="invoiceNumber"
-                        value={formData.invoiceNumber}
-                        placeholder="INV-..."
-                        disabled
-                        className="bg-muted/50 font-mono text-sm"
-                    />
-                </div>
-            </div>
-
-            <div className="space-y-4">
-                <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
-                    Involved Parties
-                </h3>
-
-                {/* From (Business) */}
-                <div className="space-y-1.5">
-                    <Label htmlFor="business" className="text-xs">From (Business)</Label>
-                    <Select
-                        value={formData.businessId}
-                        onValueChange={(value) => updateField("businessId", value)}
-                    >
-                        <SelectTrigger aria-label="From Business" className="bg-background/50 text-sm">
-                            <span className="truncate">
-                                <SelectValue placeholder="Select business" />
-                            </span>
-                        </SelectTrigger>
-                        <SelectContent>
-                            {businesses?.map((business) => (
-                                <SelectItem key={business.id} value={business.id}>
-                                    {business.name}{business.nickname ? ` (${business.nickname})` : ""}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-
-                {/* Bill To (Client) */}
-                <div className="space-y-1.5">
-                    <Label htmlFor="client" className="text-xs">Bill To (Client)</Label>
-                    <Select
-                        value={formData.clientId}
-                        onValueChange={(value) => updateField("clientId", value)}
-                    >
-                        <SelectTrigger aria-label="Bill To Client" className="bg-background/50 text-sm">
-                            <span className="truncate">
-                                <SelectValue placeholder="Select client" />
-                            </span>
-                        </SelectTrigger>
-                        <SelectContent>
-                            {clients?.map((client) => (
-                                <SelectItem key={client.id} value={client.id}>
-                                    {client.name}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-            </div>
-
-            <div className="space-y-4">
-                <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
-                    Dates
-                </h3>
-                <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                        <Label className="text-xs">Issued</Label>
-                        <DatePicker
-                            date={formData.issueDate}
-                            onDateChange={(date) => updateField("issueDate", date ?? new Date())}
-                            className="w-full bg-background/50"
-                        />
-                    </div>
-                    <div className="space-y-1.5">
-                        <Label className="text-xs">Due</Label>
-                        <DatePicker
-                            date={formData.dueDate}
-                            onDateChange={(date) => updateField("dueDate", date ?? new Date())}
-                            className="w-full bg-background/50"
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div className="space-y-4">
-                <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider">
-                    Config
-                </h3>
-                <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                        <Label className="text-xs">Tax Rate</Label>
-                        <NumberInput
-                            value={formData.taxRate}
-                            onChange={(v) => updateField("taxRate", v)}
-                            min={0}
-                            max={100}
-                            step={1}
-                            suffix="%"
-                            className="bg-background/50"
-                        />
-                    </div>
-                    <div className="space-y-1.5">
-                        <Label className="text-xs">Hourly Rate</Label>
-                        <NumberInput
-                            value={formData.defaultHourlyRate ?? 0}
-                            onChange={(v) => updateField("defaultHourlyRate", v)}
-                            min={0}
-                            prefix="$"
-                            placeholder={!formData.clientId ? "Select client" : "Rate"}
-                            disabled={!formData.clientId}
-                            className={cn("bg-background/50", !formData.clientId && "opacity-50")}
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <div className="space-y-1.5 flex-1">
-                <Label className="text-xs">Notes</Label>
-                <Textarea
-                    value={formData.notes}
-                    onChange={(e) => updateField("notes", e.target.value)}
-                    placeholder="Notes for client..."
-                    className="bg-background/50 resize-none h-24"
-                />
-            </div>
+        {/* Status */}
+        <div className="space-y-1.5">
+          <Label htmlFor="status" className="text-xs">
+            Status
+          </Label>
+          <Select
+            value={formData.status}
+            onValueChange={(value: "draft" | "sent" | "paid") =>
+              updateField("status", value)
+            }
+          >
+            <SelectTrigger className="bg-background/50">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {STATUS_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
-    );
+
+        {/* Invoice Number */}
+        <div className="space-y-1.5">
+          <Label htmlFor="invoiceNumber" className="text-xs">
+            Invoice Number
+          </Label>
+          <Input
+            id="invoiceNumber"
+            value={formData.invoiceNumber}
+            placeholder="INV-..."
+            disabled
+            className="bg-muted/50 font-mono text-sm"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
+          Involved Parties
+        </h3>
+
+        {/* From (Business) */}
+        <div className="space-y-1.5">
+          <Label htmlFor="business" className="text-xs">
+            From (Business)
+          </Label>
+          <Select
+            value={formData.businessId}
+            onValueChange={(value) => updateField("businessId", value)}
+          >
+            <SelectTrigger
+              aria-label="From Business"
+              className="bg-background/50 text-sm"
+            >
+              <span className="truncate">
+                <SelectValue placeholder="Select business" />
+              </span>
+            </SelectTrigger>
+            <SelectContent>
+              {businesses?.map((business) => (
+                <SelectItem key={business.id} value={business.id}>
+                  {business.name}
+                  {business.nickname ? ` (${business.nickname})` : ""}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Bill To (Client) */}
+        <div className="space-y-1.5">
+          <Label htmlFor="client" className="text-xs">
+            Bill To (Client)
+          </Label>
+          <Select
+            value={formData.clientId}
+            onValueChange={(value) => updateField("clientId", value)}
+          >
+            <SelectTrigger
+              aria-label="Bill To Client"
+              className="bg-background/50 text-sm"
+            >
+              <span className="truncate">
+                <SelectValue placeholder="Select client" />
+              </span>
+            </SelectTrigger>
+            <SelectContent>
+              {clients?.map((client) => (
+                <SelectItem key={client.id} value={client.id}>
+                  {client.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
+          Dates
+        </h3>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Issued</Label>
+            <DatePicker
+              date={formData.issueDate}
+              onDateChange={(date) =>
+                updateField("issueDate", date ?? new Date())
+              }
+              className="bg-background/50 w-full"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Due</Label>
+            <DatePicker
+              date={formData.dueDate}
+              onDateChange={(date) =>
+                updateField("dueDate", date ?? new Date())
+              }
+              className="bg-background/50 w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-muted-foreground text-sm font-semibold tracking-wider uppercase">
+          Config
+        </h3>
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Tax Rate</Label>
+            <NumberInput
+              value={formData.taxRate}
+              onChange={(v) => updateField("taxRate", v)}
+              min={0}
+              max={100}
+              step={1}
+              suffix="%"
+              className="bg-background/50"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Hourly Rate</Label>
+            <NumberInput
+              value={formData.defaultHourlyRate ?? 0}
+              onChange={(v) => updateField("defaultHourlyRate", v)}
+              min={0}
+              prefix="$"
+              placeholder={!formData.clientId ? "Select client" : "Rate"}
+              disabled={!formData.clientId}
+              className={cn(
+                "bg-background/50",
+                !formData.clientId && "opacity-50",
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 space-y-1.5">
+        <Label className="text-xs">Notes</Label>
+        <Textarea
+          value={formData.notes}
+          onChange={(e) => updateField("notes", e.target.value)}
+          placeholder="Notes for client..."
+          className="bg-background/50 h-24 resize-none"
+        />
+      </div>
+    </div>
+  );
 }

src/components/forms/send-email-dialog.tsx

@@ -1,455 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "~/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import { Button } from "~/components/ui/button";
-import { EmailComposer } from "./email-composer";
-import { EmailPreview } from "./email-preview";
-import { toast } from "sonner";
-import { api } from "~/trpc/react";
-import {
-  Send,
-  Loader2,
-  Eye,
-  Edit3,
-  CheckCircle,
-  AlertTriangle,
-  Mail,
-} from "lucide-react";
-import { Alert, AlertDescription } from "~/components/ui/alert";
-
-interface SendEmailDialogProps {
-  invoiceId: string;
-  trigger: React.ReactNode;
-  invoice?: {
-    id: string;
-    invoiceNumber: string;
-    issueDate: Date;
-    dueDate: Date;
-    status: string;
-    taxRate: number;
-    currency?: string | null;
-    client?: {
-      name: string;
-      email: string | null;
-    };
-    business?: {
-      name: string;
-      email: string | null;
-    };
-    items?: Array<{
-      id: string;
-      date?: Date;
-      description?: string;
-      hours: number;
-      rate: number;
-      amount?: number;
-    }>;
-  };
-  onEmailSent?: () => void;
-}
-
-export function SendEmailDialog({
-  invoiceId,
-  trigger,
-  invoice,
-  onEmailSent,
-}: SendEmailDialogProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState("compose");
-  const [isSending, setIsSending] = useState(false);
-  const [isConfirming, setIsConfirming] = useState(false);
-
-  // Email content state
-  const [subject, setSubject] = useState(() =>
-    invoice
-      ? `Invoice ${invoice.invoiceNumber} from ${invoice.business?.name ?? "Your Business"}`
-      : "Invoice from Your Business",
-  );
-  const [ccEmail, setCcEmail] = useState("");
-  const [bccEmail, setBccEmail] = useState("");
-  const [customMessage, setCustomMessage] = useState("");
-
-  const [emailContent, setEmailContent] = useState(() => {
-    const getTimeOfDayGreeting = () => {
-      const hour = new Date().getHours();
-      if (hour < 12) return "Good morning";
-      if (hour < 17) return "Good afternoon";
-      return "Good evening";
-    };
-
-    const formatDate = (date: Date) => {
-      return new Intl.DateTimeFormat("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      }).format(new Date(date));
-    };
-
-    if (!invoice) return "";
-
-    const businessName = invoice.business?.name ?? "Your Business";
-
-    const issueDate = formatDate(invoice.issueDate);
-
-    // Calculate total from items
-    const subtotal =
-      invoice.items?.reduce((sum, item) => sum + item.hours * item.rate, 0) ??
-      0;
-    const taxAmount = subtotal * (invoice.taxRate / 100);
-    const total = subtotal + taxAmount;
-
-    return `<p>${getTimeOfDayGreeting()},</p>
-
-<p>I hope this email finds you well. Please find attached invoice <strong>${invoice.invoiceNumber}</strong> dated ${issueDate}.</p>
-
-<p>The invoice details are as follows:</p>
-<ul>
-  <li><strong>Invoice Number:</strong> ${invoice.invoiceNumber}</li>
-  <li><strong>Issue Date:</strong> ${issueDate}</li>
-  <li><strong>Amount Due:</strong> ${new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-  }).format(total)}</li>
-</ul>
-
-<p>Please let me know if you have any questions or need any clarification regarding this invoice. I appreciate your prompt attention to this matter.</p>
-
-<p>Thank you for your business!</p>
-
-<p>Best regards,<br><strong>${businessName}</strong></p>`;
-  });
-
-  // Get utils for cache invalidation
-  const utils = api.useUtils();
-
-  // Email sending mutation
-  const sendEmailMutation = api.email.sendInvoice.useMutation({
-    onSuccess: (data) => {
-      toast.success("Email sent successfully!", {
-        description: data.message,
-        duration: 5000,
-      });
-
-      // Reset state and close dialog
-      setIsOpen(false);
-      setActiveTab("compose");
-      setIsSending(false);
-      setIsConfirming(false);
-
-      // Refresh invoice data
-      void utils.invoices.getById.invalidate({ id: invoiceId });
-
-      // Callback for parent component
-      onEmailSent?.();
-    },
-    onError: (error) => {
-      console.error("Email send error:", error);
-
-      let errorMessage = "Failed to send invoice email";
-      let errorDescription = error.message;
-
-      if (error.message.includes("Invalid recipient")) {
-        errorMessage = "Invalid Email Address";
-        errorDescription =
-          "Please check the client's email address and try again.";
-      } else if (error.message.includes("domain not verified")) {
-        errorMessage = "Email Configuration Issue";
-        errorDescription = "Please contact support to configure email sending.";
-      } else if (error.message.includes("rate limit")) {
-        errorMessage = "Too Many Emails";
-        errorDescription = "Please wait a moment before sending another email.";
-      } else if (error.message.includes("no email address")) {
-        errorMessage = "No Email Address";
-        errorDescription = "This client doesn't have an email address on file.";
-      }
-
-      toast.error(errorMessage, {
-        description: errorDescription,
-        duration: 6000,
-      });
-
-      setIsSending(false);
-      setIsConfirming(false);
-    },
-  });
-
-  const handleSendEmail = async () => {
-    if (!invoice?.client?.email || invoice.client.email.trim() === "") {
-      toast.error("No email address", {
-        description: "This client doesn't have an email address on file.",
-      });
-      return;
-    }
-
-    if (!subject.trim()) {
-      toast.error("Subject required", {
-        description: "Please enter an email subject before sending.",
-      });
-      return;
-    }
-
-    if (!emailContent.trim()) {
-      toast.error("Message required", {
-        description: "Please enter an email message before sending.",
-      });
-      return;
-    }
-
-    setIsSending(true);
-
-    try {
-      // Use the enhanced API with custom subject and content
-      await sendEmailMutation.mutateAsync({
-        invoiceId,
-        customSubject: subject,
-        customContent: emailContent,
-        customMessage: customMessage.trim() || undefined,
-        useHtml: true,
-        ccEmails: ccEmail.trim() || undefined,
-        bccEmails: bccEmail.trim() || undefined,
-      });
-    } catch (error) {
-      // Error handling is done in the mutation's onError
-      console.error("Send email error:", error);
-    }
-  };
-
-  const handleConfirmSend = () => {
-    setIsConfirming(true);
-    setActiveTab("confirm");
-  };
-
-  const fromEmail = invoice?.business?.email ?? "noreply@yourdomain.com";
-  const toEmail = invoice?.client?.email ?? "";
-
-  const canSend =
-    !isSending &&
-    subject.trim() &&
-    emailContent.trim() &&
-    toEmail &&
-    toEmail.trim() !== "";
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-
-      <DialogContent className="flex max-h-[90vh] max-w-4xl flex-col overflow-hidden">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Mail className="text-primary h-5 w-5" />
-            Send Invoice Email
-          </DialogTitle>
-          <DialogDescription>
-            Compose and preview your invoice email before sending to{" "}
-            {invoice?.client?.name ?? "client"}.
-          </DialogDescription>
-        </DialogHeader>
-
-        {/* Warning for missing email */}
-        {(!toEmail || toEmail.trim() === "") && (
-          <Alert variant="destructive">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertDescription>
-              This client doesn&apos;t have an email address. Please add an
-              email address to the client before sending the invoice.
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Branded Template Info */}
-        <Alert>
-          <Mail className="h-4 w-4" />
-          <AlertDescription>
-            <strong>Professional Email Template:</strong> Your email will be
-            sent using a beautifully designed, beenvoice-branded template with
-            proper fonts and styling. Any custom content you add will be
-            incorporated into the professional template automatically.
-          </AlertDescription>
-        </Alert>
-
-        <Tabs
-          value={activeTab}
-          onValueChange={setActiveTab}
-          className="min-h-0 flex-1"
-        >
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="compose" className="flex items-center gap-2">
-              <Edit3 className="h-4 w-4" />
-              Compose
-            </TabsTrigger>
-            <TabsTrigger value="preview" className="flex items-center gap-2">
-              <Eye className="h-4 w-4" />
-              Preview
-            </TabsTrigger>
-            <TabsTrigger
-              value="confirm"
-              className="flex items-center gap-2"
-              disabled={!isConfirming}
-            >
-              <CheckCircle className="h-4 w-4" />
-              Confirm
-            </TabsTrigger>
-          </TabsList>
-
-          <div className="flex-1 overflow-hidden">
-            <TabsContent
-              value="compose"
-              className="mt-4 h-full overflow-y-auto"
-            >
-              <EmailComposer
-                subject={subject}
-                onSubjectChange={setSubject}
-                content={emailContent}
-                onContentChange={setEmailContent}
-                customMessage={customMessage}
-                onCustomMessageChange={setCustomMessage}
-                fromEmail={fromEmail}
-                toEmail={toEmail}
-                ccEmail={ccEmail}
-                onCcEmailChange={setCcEmail}
-                bccEmail={bccEmail}
-                onBccEmailChange={setBccEmail}
-              />
-            </TabsContent>
-
-            <TabsContent
-              value="preview"
-              className="mt-4 h-full overflow-y-auto"
-            >
-              <EmailPreview
-                subject={subject}
-                fromEmail={fromEmail}
-                toEmail={toEmail}
-                ccEmail={ccEmail}
-                bccEmail={bccEmail}
-                content={emailContent}
-                customMessage={customMessage}
-                invoice={invoice}
-                className="pr-2"
-              />
-            </TabsContent>
-
-            <TabsContent
-              value="confirm"
-              className="mt-4 h-full overflow-y-auto"
-            >
-              <div className="space-y-6 pr-2">
-                <Alert>
-                  <CheckCircle className="h-4 w-4" />
-                  <AlertDescription>
-                    You&apos;re about to send this email to{" "}
-                    <strong>{toEmail}</strong>. The invoice PDF will be
-                    automatically attached.
-                  </AlertDescription>
-                </Alert>
-
-                <EmailPreview
-                  subject={subject}
-                  fromEmail={fromEmail}
-                  toEmail={toEmail}
-                  content={emailContent}
-                  customMessage={customMessage}
-                  invoice={invoice}
-                />
-
-                {invoice?.status === "draft" && (
-                  <Alert>
-                    <AlertTriangle className="h-4 w-4" />
-                    <AlertDescription>
-                      This invoice is currently in <strong>draft</strong>{" "}
-                      status. Sending it will automatically change the status to{" "}
-                      <strong>sent</strong>.
-                    </AlertDescription>
-                  </Alert>
-                )}
-              </div>
-            </TabsContent>
-          </div>
-        </Tabs>
-
-        <DialogFooter className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {activeTab === "compose" && (
-              <Button
-                variant="outline"
-                onClick={() => setActiveTab("preview")}
-                disabled={isSending}
-              >
-                <Eye className="mr-2 h-4 w-4" />
-                Preview
-              </Button>
-            )}
-
-            {activeTab === "preview" && (
-              <>
-                <Button
-                  variant="outline"
-                  onClick={() => setActiveTab("compose")}
-                  disabled={isSending}
-                >
-                  <Edit3 className="mr-2 h-4 w-4" />
-                  Edit
-                </Button>
-                <Button
-                  onClick={handleConfirmSend}
-                  disabled={!canSend}
-                  variant="default"
-                >
-                  <CheckCircle className="mr-2 h-4 w-4" />
-                  Review & Send
-                </Button>
-              </>
-            )}
-
-            {activeTab === "confirm" && (
-              <>
-                <Button
-                  variant="outline"
-                  onClick={() => setActiveTab("preview")}
-                  disabled={isSending}
-                >
-                  Back to Preview
-                </Button>
-                <Button
-                  onClick={handleSendEmail}
-                  disabled={!canSend || isSending}
-                  className="bg-primary hover:bg-primary/90"
-                >
-                  {isSending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Sending...
-                    </>
-                  ) : (
-                    <>
-                      <Send className="mr-2 h-4 w-4" />
-                      Send Email
-                    </>
-                  )}
-                </Button>
-              </>
-            )}
-          </div>
-
-          <Button
-            variant="ghost"
-            onClick={() => setIsOpen(false)}
-            disabled={isSending}
-          >
-            Cancel
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/components/layout/dashboard-shell.tsx

@@ -2,7 +2,10 @@
 
 import * as React from "react";
 import { Sidebar } from "~/components/layout/sidebar";
-import { SidebarProvider, useSidebar } from "~/components/layout/sidebar-provider";
+import {
+  SidebarProvider,
+  useSidebar,
+} from "~/components/layout/sidebar-provider";
 import { cn } from "~/lib/utils";
 import { Menu } from "lucide-react";
 import { Logo } from "~/components/branding/logo";
@@ -11,70 +14,75 @@ import { Sheet, SheetContent, SheetTrigger } from "~/components/ui/sheet";
 import { useAppearance } from "~/components/providers/appearance-provider";
 
 function DashboardContent({ children }: { children: React.ReactNode }) {
-    const { isCollapsed } = useSidebar();
-    const { sidebarStyle } = useAppearance();
-    const [isMobileOpen, setIsMobileOpen] = React.useState(false);
+  const { isCollapsed } = useSidebar();
+  const { sidebarStyle } = useAppearance();
+  const [isMobileOpen, setIsMobileOpen] = React.useState(false);
 
-    return (
-        <div className="bg-dashboard relative min-h-screen flex">
-            {/* Desktop Sidebar */}
-            <div className="hidden md:block">
-                <Sidebar />
-            </div>
+  return (
+    <div className="bg-dashboard relative flex min-h-screen">
+      {/* Desktop Sidebar */}
+      <div className="hidden md:block">
+        <Sidebar />
+      </div>
 
-            {/* Mobile Sidebar (Sheet) */}
-            <div className="fixed top-0 right-0 left-0 z-50 flex h-16 items-center border-b bg-background/80 px-4 backdrop-blur-md md:hidden">
-                <Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
-                    <SheetTrigger asChild>
-                        <Button variant="outline" size="icon" className="h-10 w-10 bg-background shadow-sm" suppressHydrationWarning>
-                            <Menu className="h-5 w-5" />
-                            <span className="sr-only">Toggle menu</span>
-                        </Button>
-                    </SheetTrigger>
-                    {/* Mobile Link / Logo */}
-                    <div className="ml-4 flex items-center gap-2">
-                        <Logo size="sm" />
-                    </div>
-                    <SheetContent side="left" className="p-0 w-72">
-                        <div className="sr-only">
-                            <h2 id="mobile-nav-title">Navigation Menu</h2>
-                        </div>
-                        <Sidebar mobile onClose={() => setIsMobileOpen(false)} />
-                    </SheetContent>
-                </Sheet>
-            </div>
-
-            {/* Main Content */}
-            <main
-                suppressHydrationWarning
-                className={cn(
-                    "flex-1 min-h-screen min-w-0 transition-all duration-300 ease-in-out",
-                    "md:ml-0",
-                    sidebarStyle === "floating"
-                        ? isCollapsed
-                            ? "md:ml-24"
-                            : "md:ml-[18rem]"
-                        : isCollapsed
-                          ? "md:ml-16"
-                          : "md:ml-64",
-                )}
+      {/* Mobile Sidebar (Sheet) */}
+      <div className="dashboard-mobile-header bg-background/80 fixed top-0 right-0 left-0 z-50 flex h-16 items-center border-b px-4 backdrop-blur-md md:hidden">
+        <Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
+          <SheetTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="bg-background h-10 w-10 shadow-sm"
+              suppressHydrationWarning
             >
-                <div className="p-4 pt-16 md:pt-4">
-                    {/* Mobile header spacer is handled by pt-16 on mobile */}
-                    <div className="md:hidden mb-4">
-                        {/* Mobile Breadcrumbs could go here or be part of the page */}
-                    </div>
-                    {children}
-                </div>
-            </main>
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Toggle menu</span>
+            </Button>
+          </SheetTrigger>
+          {/* Mobile Link / Logo */}
+          <div className="ml-4 flex items-center gap-2">
+            <Logo size="sm" />
+          </div>
+          <SheetContent side="left" className="w-72 p-0">
+            <div className="sr-only">
+              <h2 id="mobile-nav-title">Navigation Menu</h2>
+            </div>
+            <Sidebar mobile onClose={() => setIsMobileOpen(false)} />
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      {/* Main Content */}
+      <main
+        suppressHydrationWarning
+        className={cn(
+          "min-h-screen min-w-0 flex-1 transition-all duration-300 ease-in-out",
+          "md:ml-0",
+          sidebarStyle === "floating"
+            ? isCollapsed
+              ? "md:ml-24"
+              : "md:ml-[18rem]"
+            : isCollapsed
+              ? "md:ml-16"
+              : "md:ml-64",
+        )}
+      >
+        <div className="dashboard-content-shell p-4 pt-16 md:pt-4">
+          {/* Mobile header spacer is handled by pt-16 on mobile */}
+          <div className="mb-4 md:hidden">
+            {/* Mobile Breadcrumbs could go here or be part of the page */}
+          </div>
+          {children}
         </div>
-    );
+      </main>
+    </div>
+  );
 }
 
 export function DashboardShell({ children }: { children: React.ReactNode }) {
-    return (
-        <SidebarProvider>
-            <DashboardContent>{children}</DashboardContent>
-        </SidebarProvider>
-    );
+  return (
+    <SidebarProvider>
+      <DashboardContent>{children}</DashboardContent>
+    </SidebarProvider>
+  );
 }

src/components/layout/motion-background.tsx

@@ -3,25 +3,25 @@
 import { cn } from "~/lib/utils";
 
 export function MotionBackground() {
-    return (
-        <div className="fixed inset-0 -z-50 overflow-hidden pointer-events-none bg-background">
-            <div
-                className={cn(
-                    "absolute inset-[-50%] w-[200%] h-[200%]",
-                    "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
-                    "from-[oklch(var(--primary)/0.15)] via-transparent to-transparent",
-                    "animate-subtle-spin opacity-100"
-                )}
-            />
-            <div
-                className={cn(
-                    "absolute inset-[-50%] w-[200%] h-[200%]",
-                    "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
-                    "from-[oklch(var(--accent)/0.15)] via-transparent to-transparent",
-                    "animate-subtle-wave opacity-100"
-                )}
-            />
-            <div className="absolute inset-0 bg-[url('/noise.svg')] opacity-[0.02] mix-blend-overlay" />
-        </div>
-    );
+  return (
+    <div className="bg-background pointer-events-none fixed inset-0 -z-50 overflow-hidden">
+      <div
+        className={cn(
+          "absolute inset-[-50%] h-[200%] w-[200%]",
+          "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
+          "from-[oklch(var(--primary)/0.15)] via-transparent to-transparent",
+          "animate-subtle-spin opacity-100",
+        )}
+      />
+      <div
+        className={cn(
+          "absolute inset-[-50%] h-[200%] w-[200%]",
+          "bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))]",
+          "from-[oklch(var(--accent)/0.15)] via-transparent to-transparent",
+          "animate-subtle-wave opacity-100",
+        )}
+      />
+      <div className="absolute inset-0 bg-[url('/noise.svg')] opacity-[0.02] mix-blend-overlay" />
+    </div>
+  );
 }

src/components/layout/navbar.tsx

@@ -8,7 +8,11 @@ import { Button } from "~/components/ui/button";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useRouter } from "next/navigation";
 
-export function Navbar() {
+interface NavbarProps {
+  allowRegistration?: boolean;
+}
+
+export function Navbar({ allowRegistration = true }: NavbarProps) {
   const { data: session, isPending } = authClient.useSession();
   // const session = { user: null } as any; const isPending = false;
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
@@ -63,15 +67,17 @@ export function Navbar() {
                   Sign In
                 </Button>
               </Link>
-              <Link href="/auth/register">
-                <Button
-                  size="sm"
-                  variant="default"
-                  className="text-xs font-medium md:text-sm"
-                >
-                  Register
-                </Button>
-              </Link>
+              {allowRegistration && (
+                <Link href="/auth/register">
+                  <Button
+                    size="sm"
+                    variant="default"
+                    className="text-xs font-medium md:text-sm"
+                  >
+                    Register
+                  </Button>
+                </Link>
+              )}
             </>
           )}
         </div>

src/components/layout/page-header.tsx

@@ -42,22 +42,24 @@ export function PageHeader({
   return (
     <div className={`animate-fade-in-down mb-6 ${className}`}>
       {variant === "large-gradient" || variant === "gradient" ? (
-        <div className="platform-header-surface rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden relative">
-          <div className="platform-header-gradient absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent pointer-events-none" />
-          <div className="platform-header-content p-6 relative">
+        <div className="platform-header-surface bg-card text-card-foreground relative overflow-hidden rounded-xl border shadow-sm">
+          <div className="platform-header-gradient from-primary/5 pointer-events-none absolute inset-0 bg-gradient-to-br via-transparent to-transparent" />
+          <div className="platform-header-content relative p-6">
             <DashboardBreadcrumbs className="mb-4" />
             {/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
-            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               <div className="space-y-1">
                 <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
                 {description && (
-                  <p className={`text-muted-foreground ${getDescriptionSpacing()} text-lg`}>
+                  <p
+                    className={`text-muted-foreground ${getDescriptionSpacing()} text-lg`}
+                  >
                     {description}
                   </p>
                 )}
               </div>
               {children && (
-                <div className="flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
+                <div className="flex w-full flex-shrink-0 gap-2 sm:w-auto sm:gap-3">
                   {children}
                 </div>
               )}
@@ -68,7 +70,7 @@ export function PageHeader({
         <>
           <DashboardBreadcrumbs className="mb-2 sm:mb-4" />
           {/* UPDATED: flex-col on mobile to prevent squishing, row on sm+ */}
-          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
             <div className="animate-fade-in-up space-y-1">
               <h1 className={titleClassName ?? getTitleClasses()}>{title}</h1>
               {description && (
@@ -80,7 +82,7 @@ export function PageHeader({
               )}
             </div>
             {children && (
-              <div className="animate-slide-in-right animate-delay-200 flex flex-shrink-0 gap-2 sm:gap-3 w-full sm:w-auto">
+              <div className="animate-slide-in-right animate-delay-200 flex w-full flex-shrink-0 gap-2 sm:w-auto sm:gap-3">
                 {children}
               </div>
             )}

src/components/layout/page-layout.tsx

@@ -7,11 +7,7 @@ interface PageLayoutProps {
 }
 
 export function PageLayout({ children, className }: PageLayoutProps) {
-  return (
-    <div className={cn("min-h-screen", className)}>
-      {children}
-    </div>
-  );
+  return <div className={cn("min-h-screen", className)}>{children}</div>;
 }
 
 interface PageContentProps {
@@ -23,18 +19,16 @@ interface PageContentProps {
 export function PageContent({
   children,
   className,
-  spacing = "default"
+  spacing = "default",
 }: PageContentProps) {
   const spacingClasses = {
     default: "space-y-8",
     compact: "space-y-4",
-    large: "space-y-12"
+    large: "space-y-12",
   };
 
   return (
-    <div className={cn(spacingClasses[spacing], className)}>
-      {children}
-    </div>
+    <div className={cn(spacingClasses[spacing], className)}>{children}</div>
   );
 }
 
@@ -51,7 +45,7 @@ export function PageSection({
   className,
   title,
   description,
-  actions
+  actions,
 }: PageSectionProps) {
   return (
     <section className={cn("space-y-4", className)}>
@@ -59,15 +53,15 @@ export function PageSection({
         <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
           <div>
             {title && (
-              <h2 className="text-xl font-semibold text-foreground">{title}</h2>
+              <h2 className="text-foreground text-xl font-semibold">{title}</h2>
             )}
             {description && (
-              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                {description}
+              </p>
             )}
           </div>
-          {actions && (
-            <div className="flex flex-shrink-0 gap-3">{actions}</div>
-          )}
+          {actions && <div className="flex flex-shrink-0 gap-3">{actions}</div>}
         </div>
       )}
       {children}
@@ -86,28 +80,25 @@ export function PageGrid({
   children,
   className,
   columns = 3,
-  gap = "default"
+  gap = "default",
 }: PageGridProps) {
   const columnClasses = {
     1: "grid-cols-1",
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
   };
 
   const gapClasses = {
     default: "gap-4",
     compact: "gap-2",
-    large: "gap-6"
+    large: "gap-6",
   };
 
   return (
-    <div className={cn(
-      "grid",
-      columnClasses[columns],
-      gapClasses[gap],
-      className
-    )}>
+    <div
+      className={cn("grid", columnClasses[columns], gapClasses[gap], className)}
+    >
       {children}
     </div>
   );
@@ -127,18 +118,18 @@ export function EmptyState({
   title,
   description,
   action,
-  className
+  className,
 }: EmptyStateProps) {
   return (
     <div className={cn("py-12 text-center", className)}>
       {icon && (
-        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center  bg-muted/50">
+        <div className="bg-muted/50 mx-auto mb-4 flex h-16 w-16 items-center justify-center">
           {icon}
         </div>
       )}
       <h3 className="mb-2 text-lg font-semibold">{title}</h3>
       {description && (
-        <p className="text-muted-foreground mb-4 max-w-sm mx-auto">
+        <p className="text-muted-foreground mx-auto mb-4 max-w-sm">
           {description}
         </p>
       )}

src/components/layout/quick-action-card.tsx

@@ -56,7 +56,7 @@ export function QuickActionCard({
     <CardContent className="p-6 text-center">
       <div
         className={cn(
-          "mx-auto mb-3 flex h-12 w-12 items-center justify-center  transition-colors",
+          "mx-auto mb-3 flex h-12 w-12 items-center justify-center transition-colors",
           styles.background,
           styles.hoverBackground,
         )}
@@ -101,7 +101,7 @@ export function QuickActionCardSkeleton() {
     <Card className="bg-card border-border border">
       <CardContent className="p-6">
         <div className="animate-pulse">
-          <div className="bg-muted mx-auto mb-3 h-12 w-12 "></div>
+          <div className="bg-muted mx-auto mb-3 h-12 w-12"></div>
           <div className="bg-muted mx-auto mb-2 h-4 w-2/3 rounded"></div>
           <div className="bg-muted mx-auto h-3 w-1/2 rounded"></div>
         </div>

src/components/layout/sidebar-provider.tsx

@@ -3,58 +3,54 @@
 import * as React from "react";
 
 interface SidebarContextType {
-    isCollapsed: boolean;
-    toggleCollapse: () => void;
-    expand: () => void;
-    collapse: () => void;
+  isCollapsed: boolean;
+  toggleCollapse: () => void;
+  expand: () => void;
+  collapse: () => void;
 }
 
 const SidebarContext = React.createContext<SidebarContextType | undefined>(
-    undefined,
+  undefined,
 );
 
 export function SidebarProvider({ children }: { children: React.ReactNode }) {
-    const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isCollapsed, setIsCollapsed] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    const saved = localStorage.getItem("sidebar-collapsed");
+    return saved ? (JSON.parse(saved) as boolean) : false;
+  });
 
-    // Persist state if needed, for now just local state
-    React.useEffect(() => {
-        const saved = localStorage.getItem("sidebar-collapsed");
-        if (saved) {
-            setIsCollapsed(JSON.parse(saved) as boolean);
-        }
-    }, []);
+  const toggleCollapse = React.useCallback(() => {
+    setIsCollapsed((prev) => {
+      const next = !prev;
+      localStorage.setItem("sidebar-collapsed", JSON.stringify(next));
+      return next;
+    });
+  }, []);
 
-    const toggleCollapse = React.useCallback(() => {
-        setIsCollapsed((prev) => {
-            const next = !prev;
-            localStorage.setItem("sidebar-collapsed", JSON.stringify(next));
-            return next;
-        });
-    }, []);
+  const expand = React.useCallback(() => {
+    setIsCollapsed(false);
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(false));
+  }, []);
 
-    const expand = React.useCallback(() => {
-        setIsCollapsed(false);
-        localStorage.setItem("sidebar-collapsed", JSON.stringify(false));
-    }, []);
+  const collapse = React.useCallback(() => {
+    setIsCollapsed(true);
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(true));
+  }, []);
 
-    const collapse = React.useCallback(() => {
-        setIsCollapsed(true);
-        localStorage.setItem("sidebar-collapsed", JSON.stringify(true));
-    }, []);
-
-    return (
-        <SidebarContext.Provider
-            value={{ isCollapsed, toggleCollapse, expand, collapse }}
-        >
-            {children}
-        </SidebarContext.Provider>
-    );
+  return (
+    <SidebarContext.Provider
+      value={{ isCollapsed, toggleCollapse, expand, collapse }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
 }
 
 export function useSidebar() {
-    const context = React.useContext(SidebarContext);
-    if (context === undefined) {
-        throw new Error("useSidebar must be used within a SidebarProvider");
-    }
-    return context;
+  const context = React.useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
 }

src/components/layout/sidebar.tsx

@@ -5,16 +5,17 @@ import { usePathname } from "next/navigation";
 import { authClient } from "~/lib/auth-client";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Button } from "~/components/ui/button";
-import {
-  LogOut,
-  PanelLeftClose,
-  PanelLeftOpen,
-} from "lucide-react";
+import { LogOut, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { navigationConfig } from "~/lib/navigation";
 import { useSidebar } from "./sidebar-provider";
 import { cn } from "~/lib/utils";
 import { Logo } from "~/components/branding/logo";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -46,10 +47,12 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
     <div className="flex h-full flex-col justify-between">
       <div>
         {/* Header / Logo */}
-        <div className={cn(
-          "flex items-center h-14 px-4 mb-2",
-          collapsed ? "justify-center px-2" : "justify-between"
-        )}>
+        <div
+          className={cn(
+            "mb-2 flex h-14 items-center px-4",
+            collapsed ? "justify-center px-2" : "justify-between",
+          )}
+        >
           {!collapsed && (
             <div className="flex items-center gap-2">
               <Logo size="sm" />
@@ -63,11 +66,16 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
         </div>
 
         {/* Navigation */}
-        <nav className={cn("flex flex-col px-2 gap-6 mt-4", collapsed && "items-center")}>
+        <nav
+          className={cn(
+            "mt-4 flex flex-col gap-6 px-2",
+            collapsed && "items-center",
+          )}
+        >
           {navigationConfig.map((section) => (
             <div key={section.title}>
               {!collapsed && (
-                <div className="px-2 mb-2 text-xs font-semibold text-muted-foreground/60 tracking-wider uppercase">
+                <div className="text-muted-foreground/60 mb-2 px-2 text-xs font-semibold tracking-wider uppercase">
                   {section.title}
                 </div>
               )}
@@ -84,17 +92,21 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
                             <TooltipTrigger asChild>
                               <Link
                                 href={link.href}
+                                data-active={isActive ? "true" : undefined}
                                 className={cn(
-                                  "flex items-center justify-center h-10 w-10 rounded-md transition-colors",
+                                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
                                   isActive
                                     ? "bg-primary text-primary-foreground shadow-sm"
-                                    : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                                 )}
                               >
                                 <Icon className="h-5 w-5" />
                               </Link>
                             </TooltipTrigger>
-                            <TooltipContent side="right" className="font-medium">
+                            <TooltipContent
+                              side="right"
+                              className="font-medium"
+                            >
                               {link.name}
                             </TooltipContent>
                           </Tooltip>
@@ -106,12 +118,13 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
                       <Link
                         key={link.href}
                         href={link.href}
+                        data-active={isActive ? "true" : undefined}
                         onClick={mobile ? onClose : undefined}
                         className={cn(
-                          "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+                          "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                           isActive
                             ? "bg-primary/10 text-primary"
-                            : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                            : "text-muted-foreground hover:bg-muted hover:text-foreground",
                         )}
                       >
                         <Icon className="h-4 w-4" />
@@ -127,29 +140,45 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
       </div>
 
       {/* Footer / User */}
-      <div className="p-2 mt-auto space-y-2">
+      <div className="mt-auto space-y-2 p-2">
         {!mobile && (
-          <div className={cn("flex", collapsed ? "justify-center" : "justify-end px-2")}>
+          <div
+            className={cn(
+              "flex",
+              collapsed ? "justify-center" : "justify-end px-2",
+            )}
+          >
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 text-muted-foreground"
+              className="text-muted-foreground h-8 w-8"
               onClick={toggleCollapse}
             >
-              {collapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+              {collapsed ? (
+                <PanelLeftOpen className="h-4 w-4" />
+              ) : (
+                <PanelLeftClose className="h-4 w-4" />
+              )}
             </Button>
           </div>
         )}
 
-        <div className={cn(
-          "border-t border-border/50 pt-4",
-          collapsed ? "flex flex-col items-center gap-2" : "px-2"
-        )}>
+        <div
+          className={cn(
+            "border-border/50 border-t pt-4",
+            collapsed ? "flex flex-col items-center gap-2" : "px-2",
+          )}
+        >
           {isPending ? (
-            <div className={cn("flex items-center gap-3", collapsed ? "justify-center" : "px-2")}>
+            <div
+              className={cn(
+                "flex items-center gap-3",
+                collapsed ? "justify-center" : "px-2",
+              )}
+            >
               <Skeleton className="h-9 w-9 rounded-full" />
               {!collapsed && (
-                <div className="space-y-1 flex-1">
+                <div className="flex-1 space-y-1">
                   <Skeleton className="h-3 w-20" />
                   <Skeleton className="h-2 w-24" />
                 </div>
@@ -158,17 +187,37 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
           ) : session?.user ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className={cn("w-full justify-start p-0 hover:bg-transparent", collapsed && "justify-center")}>
+                <Button
+                  variant="ghost"
+                  className={cn(
+                    "w-full justify-start p-0 hover:bg-transparent",
+                    collapsed && "justify-center",
+                  )}
+                >
                   {/* FIXED: Changed div to span to prevent hydration error */}
-                  <span className={cn("flex items-center gap-3", collapsed ? "justify-center" : "w-full")}>
-                    <Avatar className="h-9 w-9 border border-border">
-                      <AvatarImage src={getGravatarUrl(session.user.email)} alt={session.user.name ?? "User"} />
-                      <AvatarFallback>{session.user.name?.[0] ?? "U"}</AvatarFallback>
+                  <span
+                    className={cn(
+                      "flex items-center gap-3",
+                      collapsed ? "justify-center" : "w-full",
+                    )}
+                  >
+                    <Avatar className="border-border h-9 w-9 border">
+                      <AvatarImage
+                        src={getGravatarUrl(session.user.email)}
+                        alt={session.user.name ?? "User"}
+                      />
+                      <AvatarFallback>
+                        {session.user.name?.[0] ?? "U"}
+                      </AvatarFallback>
                     </Avatar>
                     {!collapsed && (
-                      <span className="flex-1 min-w-0 text-left">
-                        <span className="block text-sm font-medium truncate">{session.user.name}</span>
-                        <span className="block text-xs text-muted-foreground truncate">{session.user.email}</span>
+                      <span className="min-w-0 flex-1 text-left">
+                        <span className="block truncate text-sm font-medium">
+                          {session.user.name}
+                        </span>
+                        <span className="text-muted-foreground block truncate text-xs">
+                          {session.user.email}
+                        </span>
                       </span>
                     )}
                   </span>
@@ -177,13 +226,17 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
               <DropdownMenuContent
                 side="right"
                 align="end"
-                className="w-56 bg-background/80 backdrop-blur-xl border-border/50"
+                className="bg-background/80 border-border/50 w-56 backdrop-blur-xl"
                 sideOffset={10}
               >
                 <DropdownMenuLabel>
                   <div className="flex flex-col space-y-1">
-                    <p className="text-sm font-medium leading-none">{session.user.name}</p>
-                    <p className="text-xs leading-none text-muted-foreground">{session.user.email}</p>
+                    <p className="text-sm leading-none font-medium">
+                      {session.user.name}
+                    </p>
+                    <p className="text-muted-foreground text-xs leading-none">
+                      {session.user.email}
+                    </p>
                   </div>
                 </DropdownMenuLabel>
                 <DropdownMenuSeparator />
@@ -192,7 +245,7 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
                     await authClient.signOut();
                     window.location.href = "/";
                   }}
-                  className="text-red-600 focus:text-red-600 focus:bg-red-100/50 dark:focus:bg-red-900/20"
+                  className="text-red-600 focus:bg-red-100/50 focus:text-red-600 dark:focus:bg-red-900/20"
                 >
                   <LogOut className="mr-2 h-4 w-4" />
                   Sign Out
@@ -206,11 +259,7 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
   );
 
   if (mobile) {
-    return (
-      <div className="h-full bg-background">
-        {SidebarContent}
-      </div>
-    );
+    return <div className="bg-background h-full">{SidebarContent}</div>;
   }
 
   return (
@@ -218,8 +267,8 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
       className={cn(
         "fixed z-30 hidden flex-col transition-all duration-300 ease-in-out md:flex",
         sidebarStyle === "floating"
-          ? "top-4 bottom-4 left-4 border-border/50 rounded-3xl border bg-background/80 shadow-xl backdrop-blur-xl"
-          : "top-0 bottom-0 left-0 rounded-none border-r border-border bg-background shadow-none",
+          ? "border-border/50 bg-background/80 top-4 bottom-4 left-4 rounded-3xl border shadow-xl backdrop-blur-xl"
+          : "border-border bg-background top-0 bottom-0 left-0 rounded-none border-r shadow-none",
         isCollapsed ? "w-16" : "w-64",
       )}
     >

src/components/navigation/breadcrumbs.tsx

@@ -14,12 +14,15 @@ export function Breadcrumbs() {
     })),
   ];
   return (
-    <nav className="flex items-center text-sm text-muted-foreground" aria-label="Breadcrumb">
+    <nav
+      className="text-muted-foreground flex items-center text-sm"
+      aria-label="Breadcrumb"
+    >
       {crumbs.map((crumb, i) => (
         <span key={crumb.href} className="flex items-center">
           {i > 0 && <ChevronRight className="mx-2 h-4 w-4 text-gray-300" />}
           {i < crumbs.length - 1 ? (
-            <Link href={crumb.href} className="hover:underline text-gray-500">
+            <Link href={crumb.href} className="text-gray-500 hover:underline">
               {crumb.name}
             </Link>
           ) : (

src/components/navigation/sidebar-trigger.tsx

@@ -53,7 +53,7 @@ export function SidebarTrigger({ isOpen, onToggle }: SidebarTriggerProps) {
                         (_, i) => (
                           <div
                             key={i}
-                            className="flex items-center gap-3  px-3 py-2.5"
+                            className="flex items-center gap-3 px-3 py-2.5"
                           >
                             <Skeleton className="bg-muted/20 h-4 w-4" />
                             <Skeleton className="bg-muted/20 h-4 w-20" />
@@ -71,10 +71,11 @@ export function SidebarTrigger({ isOpen, onToggle }: SidebarTriggerProps) {
                           aria-current={
                             pathname === link.href ? "page" : undefined
                           }
-                          className={`flex items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors ${pathname === link.href
-                            ? "bg-primary/10 text-primary"
-                            : "text-foreground hover:bg-muted"
-                            }`}
+                          className={`flex items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors ${
+                            pathname === link.href
+                              ? "bg-primary/10 text-primary"
+                              : "text-foreground hover:bg-muted"
+                          }`}
                           onClick={onToggle}
                         >
                           <Icon className="h-4 w-4" />

src/components/providers/animation-preferences-provider.tsx

@@ -205,9 +205,9 @@ export function AnimationPreferencesProvider({
     if (typeof window === "undefined") return;
     const stored = readLocalStorage();
 
-    const systemReduced =
-      window.matchMedia &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const systemReduced = window.matchMedia?.(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
 
     const finalPrefers =
       stored?.prefersReducedMotion ??
@@ -216,10 +216,11 @@ export function AnimationPreferencesProvider({
       DEFAULT_PREFERS_REDUCED;
     const finalSpeed = clampSpeed(
       stored?.animationSpeedMultiplier ??
-      initial?.animationSpeedMultiplier ??
-      DEFAULT_SPEED,
+        initial?.animationSpeedMultiplier ??
+        DEFAULT_SPEED,
     );
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Hydrate preferences from localStorage/system settings on mount.
     setPrefersReducedMotion(finalPrefers);
     setAnimationSpeedMultiplier(finalSpeed);
     applyPreferencesToDOM({
@@ -279,7 +280,8 @@ export function AnimationPreferencesProvider({
       // Optionally sync to server
       const shouldSync = opts?.sync ?? autoSync;
 
-      if (shouldSync && serverPrefs) { // If serverPrefs exists, user is authenticated
+      if (shouldSync && serverPrefs) {
+        // If serverPrefs exists, user is authenticated
         pendingSyncRef.current = {
           prefersReducedMotion: patch.prefersReducedMotion,
           animationSpeedMultiplier: patch.animationSpeedMultiplier,
@@ -334,6 +336,7 @@ export function AnimationPreferencesProvider({
       serverPrefs.animationSpeedMultiplier !== animationSpeedMultiplier;
 
     if (localIsDefault || differs) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Reconcile loaded server preferences once after query hydration.
       performUpdate(
         {
           prefersReducedMotion: serverPrefs.prefersReducedMotion,
@@ -402,9 +405,15 @@ export function useAnimationPreferences(): AnimationPreferencesContextValue {
     return {
       prefersReducedMotion: false,
       animationSpeedMultiplier: 1,
-      updatePreferences: () => { /* no-op fallback */ },
-      setPrefersReducedMotion: () => { /* no-op fallback */ },
-      setAnimationSpeedMultiplier: () => { /* no-op fallback */ },
+      updatePreferences: () => {
+        /* no-op fallback */
+      },
+      setPrefersReducedMotion: () => {
+        /* no-op fallback */
+      },
+      setAnimationSpeedMultiplier: () => {
+        /* no-op fallback */
+      },
       isUpdating: false,
       lastSyncedAt: null,
     };

src/components/providers/appearance-provider.tsx

@@ -6,10 +6,22 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import {
-  defaultFontPreference,
+  fallbackAppearance,
+  isColorMode,
+  isColorTheme,
+  isFontPreference,
+  isHslChannels,
+  isInterfaceTheme,
+  isPdfTemplate,
+  isRadiusPreference,
+  isSidebarStyle,
+  type PdfTemplate,
+} from "~/lib/appearance";
+import {
   defaultBodyFontPreference,
   defaultHeadingFontPreference,
   defaultInterfaceTheme,
@@ -27,7 +39,6 @@ import { api } from "~/trpc/react";
 
 type AppearancePreferences = {
   interfaceTheme: InterfaceTheme;
-  fontPreference: FontPreference;
   bodyFontPreference: FontPreference;
   headingFontPreference: FontPreference;
   radiusPreference: RadiusPreference;
@@ -39,7 +50,7 @@ type AppearancePreferences = {
   brandTagline: string;
   brandLogoText: string;
   brandIcon: string;
-  pdfTemplate: "classic" | "minimal";
+  pdfTemplate: PdfTemplate;
   pdfAccentColor: string;
   pdfFooterText: string;
   pdfShowLogo: boolean;
@@ -50,7 +61,6 @@ type AppearancePatch = Partial<AppearancePreferences>;
 
 type ServerAppearance = {
   interfaceTheme: InterfaceTheme;
-  fontPreference: FontPreference;
   bodyFontPreference: FontPreference;
   headingFontPreference: FontPreference;
   radiusPreference: RadiusPreference;
@@ -62,7 +72,7 @@ type ServerAppearance = {
   brandTagline: string;
   brandLogoText: string;
   brandIcon: string;
-  pdfTemplate: "classic" | "minimal";
+  pdfTemplate: PdfTemplate;
   pdfAccentColor: string;
   pdfFooterText: string;
   pdfShowLogo: boolean;
@@ -71,6 +81,7 @@ type ServerAppearance = {
 
 type AppearanceContextValue = AppearancePreferences & {
   updateAppearance: (patch: AppearancePatch) => void;
+  updateAppearanceDebounced: (patch: AppearancePatch) => void;
   isUpdating: boolean;
 };
 
@@ -78,22 +89,21 @@ const STORAGE_KEY = "bv.appearance";
 
 const defaultAppearance: AppearancePreferences = {
   interfaceTheme: defaultInterfaceTheme,
-  fontPreference: defaultFontPreference,
   bodyFontPreference: defaultBodyFontPreference,
   headingFontPreference: defaultHeadingFontPreference,
   radiusPreference: defaultRadiusPreference,
   sidebarStyle: defaultSidebarStyle,
-  colorMode: "system",
-  colorTheme: "slate",
+  colorMode: fallbackAppearance.colorMode,
+  colorTheme: fallbackAppearance.colorTheme,
   brandName: defaultBrand.name,
   brandTagline: defaultBrand.tagline,
   brandLogoText: defaultBrand.logoText,
   brandIcon: defaultBrand.icon,
-  pdfTemplate: "classic",
-  pdfAccentColor: "#111827",
-  pdfFooterText: "Professional Invoicing",
-  pdfShowLogo: true,
-  pdfShowPageNumbers: true,
+  pdfTemplate: fallbackAppearance.pdfTemplate,
+  pdfAccentColor: fallbackAppearance.pdfAccentColor,
+  pdfFooterText: fallbackAppearance.pdfFooterText,
+  pdfShowLogo: fallbackAppearance.pdfShowLogo,
+  pdfShowPageNumbers: fallbackAppearance.pdfShowPageNumbers,
 };
 
 const AppearanceContext = createContext<AppearanceContextValue | null>(null);
@@ -103,7 +113,6 @@ function getServerAppearancePatch(
 ): AppearancePatch {
   return {
     interfaceTheme: serverAppearance.interfaceTheme,
-    fontPreference: serverAppearance.fontPreference,
     bodyFontPreference: serverAppearance.bodyFontPreference,
     headingFontPreference: serverAppearance.headingFontPreference,
     radiusPreference: serverAppearance.radiusPreference,
@@ -123,53 +132,6 @@ function getServerAppearancePatch(
   };
 }
 
-function isInterfaceTheme(value: unknown): value is InterfaceTheme {
-  return (
-    value === "beenvoice" ||
-    value === "shadcn" ||
-    value === "minimal" ||
-    value === "editorial"
-  );
-}
-
-function isFontPreference(value: unknown): value is FontPreference {
-  return (
-    value === "brand" ||
-    value === "platform" ||
-    value === "inter" ||
-    value === "serif"
-  );
-}
-
-function isColorMode(value: unknown): value is ColorMode {
-  return value === "light" || value === "dark" || value === "system";
-}
-
-function isColorTheme(value: unknown): value is ColorTheme {
-  return (
-    value === "slate" ||
-    value === "blue" ||
-    value === "green" ||
-    value === "rose" ||
-    value === "orange" ||
-    value === "custom"
-  );
-}
-
-function isRadiusPreference(value: unknown): value is RadiusPreference {
-  return (
-    value === "none" ||
-    value === "sm" ||
-    value === "md" ||
-    value === "lg" ||
-    value === "xl"
-  );
-}
-
-function isSidebarStyle(value: unknown): value is SidebarStyle {
-  return value === "floating" || value === "docked";
-}
-
 function readStoredAppearance(): Partial<AppearancePreferences> | null {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
@@ -179,9 +141,6 @@ function readStoredAppearance(): Partial<AppearancePreferences> | null {
       interfaceTheme: isInterfaceTheme(parsed.interfaceTheme)
         ? parsed.interfaceTheme
         : undefined,
-      fontPreference: isFontPreference(parsed.fontPreference)
-        ? parsed.fontPreference
-        : undefined,
       bodyFontPreference: isFontPreference(parsed.bodyFontPreference)
         ? parsed.bodyFontPreference
         : isFontPreference(parsed.fontPreference)
@@ -202,8 +161,9 @@ function readStoredAppearance(): Partial<AppearancePreferences> | null {
       colorTheme: isColorTheme(parsed.colorTheme)
         ? parsed.colorTheme
         : undefined,
-      customColor:
-        typeof parsed.customColor === "string" ? parsed.customColor : undefined,
+      customColor: isHslChannels(parsed.customColor)
+        ? parsed.customColor
+        : undefined,
       brandName:
         typeof parsed.brandName === "string" ? parsed.brandName : undefined,
       brandTagline:
@@ -216,10 +176,9 @@ function readStoredAppearance(): Partial<AppearancePreferences> | null {
           : undefined,
       brandIcon:
         typeof parsed.brandIcon === "string" ? parsed.brandIcon : undefined,
-      pdfTemplate:
-        parsed.pdfTemplate === "classic" || parsed.pdfTemplate === "minimal"
-          ? parsed.pdfTemplate
-          : undefined,
+      pdfTemplate: isPdfTemplate(parsed.pdfTemplate)
+        ? parsed.pdfTemplate
+        : undefined,
       pdfAccentColor:
         typeof parsed.pdfAccentColor === "string"
           ? parsed.pdfAccentColor
@@ -255,7 +214,6 @@ function applyAppearance(prefs: AppearancePreferences) {
 
   const root = document.documentElement;
   root.dataset.interfaceTheme = prefs.interfaceTheme;
-  root.dataset.font = prefs.fontPreference;
   root.dataset.bodyFont = prefs.bodyFontPreference;
   root.dataset.headingFont = prefs.headingFontPreference;
   root.dataset.radius = prefs.radiusPreference;
@@ -279,6 +237,8 @@ export function AppearanceProvider({
 }) {
   const [appearance, setAppearance] =
     useState<AppearancePreferences>(defaultAppearance);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingDebouncedPatchRef = useRef<AppearancePatch>({});
   const utils = api.useUtils();
   const updateMutation = api.settings.updateTheme.useMutation({
     onSuccess: async () => {
@@ -299,6 +259,38 @@ export function AppearanceProvider({
     },
   });
 
+  const persistAppearance = useCallback(
+    (patch: AppearancePatch) => {
+      if (
+        patch.customColor !== undefined &&
+        !isHslChannels(patch.customColor)
+      ) {
+        return;
+      }
+
+      updateMutation.mutate({
+        interfaceTheme: patch.interfaceTheme,
+        bodyFontPreference: patch.bodyFontPreference,
+        headingFontPreference: patch.headingFontPreference,
+        radiusPreference: patch.radiusPreference,
+        sidebarStyle: patch.sidebarStyle,
+        theme: patch.colorMode,
+        colorTheme: patch.colorTheme,
+        customColor: patch.customColor,
+        brandName: patch.brandName,
+        brandTagline: patch.brandTagline,
+        brandLogoText: patch.brandLogoText,
+        brandIcon: patch.brandIcon,
+        pdfTemplate: patch.pdfTemplate,
+        pdfAccentColor: patch.pdfAccentColor,
+        pdfFooterText: patch.pdfFooterText,
+        pdfShowLogo: patch.pdfShowLogo,
+        pdfShowPageNumbers: patch.pdfShowPageNumbers,
+      });
+    },
+    [updateMutation],
+  );
+
   const { data: serverAppearance } = api.settings.getTheme.useQuery(undefined, {
     retry: false,
     refetchOnWindowFocus: false,
@@ -328,6 +320,15 @@ export function AppearanceProvider({
 
   const updateAppearance = useCallback(
     (patch: AppearancePatch) => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      if (Object.keys(pendingDebouncedPatchRef.current).length > 0) {
+        persistAppearance(pendingDebouncedPatchRef.current);
+        pendingDebouncedPatchRef.current = {};
+      }
+
       setAppearance((prev) => {
         const next = { ...prev, ...patch };
         applyAppearance(next);
@@ -335,37 +336,61 @@ export function AppearanceProvider({
         return next;
       });
 
-      updateMutation.mutate({
-        interfaceTheme: patch.interfaceTheme,
-        fontPreference: patch.fontPreference,
-        bodyFontPreference: patch.bodyFontPreference,
-        headingFontPreference: patch.headingFontPreference,
-        radiusPreference: patch.radiusPreference,
-        sidebarStyle: patch.sidebarStyle,
-        theme: patch.colorMode,
-        colorTheme: patch.colorTheme,
-        customColor: patch.customColor,
-        brandName: patch.brandName,
-        brandTagline: patch.brandTagline,
-        brandLogoText: patch.brandLogoText,
-        brandIcon: patch.brandIcon,
-        pdfTemplate: patch.pdfTemplate,
-        pdfAccentColor: patch.pdfAccentColor,
-        pdfFooterText: patch.pdfFooterText,
-        pdfShowLogo: patch.pdfShowLogo,
-        pdfShowPageNumbers: patch.pdfShowPageNumbers,
-      });
+      persistAppearance(patch);
     },
-    [updateMutation],
+    [persistAppearance],
+  );
+
+  const updateAppearanceDebounced = useCallback(
+    (patch: AppearancePatch) => {
+      pendingDebouncedPatchRef.current = {
+        ...pendingDebouncedPatchRef.current,
+        ...patch,
+      };
+
+      setAppearance((prev) => {
+        const next = { ...prev, ...patch };
+        applyAppearance(next);
+        writeStoredAppearance(next);
+        return next;
+      });
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        persistAppearance(pendingDebouncedPatchRef.current);
+        pendingDebouncedPatchRef.current = {};
+        debounceTimerRef.current = null;
+      }, 500);
+    },
+    [persistAppearance],
+  );
+
+  useEffect(
+    () => () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      pendingDebouncedPatchRef.current = {};
+    },
+    [],
   );
 
   const value = useMemo<AppearanceContextValue>(
     () => ({
       ...appearance,
       updateAppearance,
+      updateAppearanceDebounced,
       isUpdating: updateMutation.isPending,
     }),
-    [appearance, updateAppearance, updateMutation.isPending],
+    [
+      appearance,
+      updateAppearance,
+      updateAppearanceDebounced,
+      updateMutation.isPending,
+    ],
   );
 
   return (

src/components/ui/alert-dialog.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "~/lib/utils"
-import { buttonVariants } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { buttonVariants } from "~/components/ui/button";
 
 function AlertDialog({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({
@@ -17,7 +17,7 @@ function AlertDialogTrigger({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  );
 }
 
 function AlertDialogPortal({
@@ -25,7 +25,7 @@ function AlertDialogPortal({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  );
 }
 
 function AlertDialogOverlay({
@@ -37,11 +37,11 @@ function AlertDialogOverlay({
       data-slot="alert-dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -54,13 +54,13 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4  border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
 function AlertDialogHeader({
@@ -73,7 +73,7 @@ function AlertDialogHeader({
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogFooter({
@@ -85,11 +85,11 @@ function AlertDialogFooter({
       data-slot="alert-dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -102,7 +102,7 @@ function AlertDialogTitle({
       className={cn("text-lg font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -115,7 +115,7 @@ function AlertDialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
@@ -127,7 +127,7 @@ function AlertDialogAction({
       className={cn(buttonVariants(), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogCancel({
@@ -139,7 +139,7 @@ function AlertDialogCancel({
       className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -154,4 +154,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};

src/components/ui/avatar.tsx

@@ -1,50 +1,50 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const Avatar = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Root
-        ref={ref}
-        className={cn(
-            "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-            className
-        )}
-        {...props}
-    />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Image>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Image
-        ref={ref}
-        className={cn("aspect-square h-full w-full", className)}
-        {...props}
-    />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Fallback>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback
-        ref={ref}
-        className={cn(
-            "flex h-full w-full items-center justify-center rounded-full bg-muted",
-            className
-        )}
-        {...props}
-    />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/breadcrumb.tsx

@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -14,11 +14,11 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
       data-slot="breadcrumb-list"
       className={cn(
         "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -28,7 +28,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
       className={cn("inline-flex items-center gap-1.5", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbLink({
@@ -36,9 +36,9 @@ function BreadcrumbLink({
   className,
   ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -46,7 +46,7 @@ function BreadcrumbLink({
       className={cn("hover:text-foreground transition-colors", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
@@ -59,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       className={cn("text-foreground font-normal", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbSeparator({
@@ -77,7 +77,7 @@ function BreadcrumbSeparator({
     >
       {children ?? <ChevronRight />}
     </li>
-  )
+  );
 }
 
 function BreadcrumbEllipsis({
@@ -95,7 +95,7 @@ function BreadcrumbEllipsis({
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -106,4 +106,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

src/components/ui/button.tsx

@@ -36,7 +36,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 

src/components/ui/calendar.tsx

@@ -1,15 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from "lucide-react"
-import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picker"
+} from "lucide-react";
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker";
 
-import { cn } from "~/lib/utils"
-import { Button, buttonVariants } from "~/components/ui/button"
+import { cn } from "~/lib/utils";
+import { Button, buttonVariants } from "~/components/ui/button";
 
 function Calendar({
   className,
@@ -21,9 +25,9 @@ function Calendar({
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
@@ -32,7 +36,7 @@ function Calendar({
         "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+        className,
       )}
       captionLayout={captionLayout}
       formatters={{
@@ -44,86 +48,88 @@ function Calendar({
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
           "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
+          defaultClassNames.months,
         ),
         month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
         nav: cn(
           "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
+          defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
+          defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
           "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
+          defaultClassNames.button_next,
         ),
         month_caption: cn(
           "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
+          defaultClassNames.month_caption,
         ),
         dropdowns: cn(
           "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
+          defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
           "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
+          defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
           "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
+          defaultClassNames.dropdown,
         ),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
             : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
+          defaultClassNames.caption_label,
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
+          defaultClassNames.weekday,
         ),
         week: cn("flex w-full mt-2", defaultClassNames.week),
         week_number_header: cn(
           "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
+          defaultClassNames.week_number_header,
         ),
         week_number: cn(
           "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
+          defaultClassNames.week_number,
         ),
         day: cn(
           "relative w-full h-full p-0 text-center group/day aspect-square select-none",
-          props.mode !== "single" && "[&:last-child[data-selected=true]_button]:rounded-r-md",
-          props.mode !== "single" && (props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md"),
-          defaultClassNames.day
+          props.mode !== "single" &&
+            "[&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.mode !== "single" &&
+            (props.showWeekNumber
+              ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+              : "[&:first-child[data-selected=true]_button]:rounded-l-md"),
+          defaultClassNames.day,
         ),
         range_start: cn(
           "rounded-l-md bg-accent",
-          defaultClassNames.range_start
+          defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
+          defaultClassNames.today,
         ),
         outside: cn(
           "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
+          defaultClassNames.outside,
         ),
         disabled: cn(
           "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
+          defaultClassNames.disabled,
         ),
         hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
@@ -137,13 +143,13 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
               <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            );
           }
 
           if (orientation === "right") {
@@ -152,12 +158,12 @@ function Calendar({
                 className={cn("size-4", className)}
                 {...props}
               />
-            )
+            );
           }
 
           return (
             <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -167,13 +173,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -182,12 +188,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -207,11 +213,11 @@ function CalendarDayButton({
       className={cn(
         "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-background/80 backdrop-blur-xl border-border/50 text-card-foreground flex flex-col rounded-3xl border shadow-sm overflow-hidden",
+        "bg-background/80 border-border/50 text-card-foreground flex flex-col overflow-hidden rounded-3xl border shadow-sm backdrop-blur-xl",
         className,
       )}
       {...props}

src/components/ui/checkbox.tsx

@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Checkbox({
   className,
@@ -15,7 +15,7 @@ function Checkbox({
       data-slot="checkbox"
       className={cn(
         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -26,7 +26,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };

src/components/ui/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
@@ -16,7 +16,7 @@ function CollapsibleTrigger({
       data-slot="collapsible-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function CollapsibleContent({
@@ -27,7 +27,7 @@ function CollapsibleContent({
       data-slot="collapsible-content"
       {...props}
     />
-  )
+  );
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/count-up.tsx

@@ -3,13 +3,24 @@
 import { motion, useSpring, useTransform } from "framer-motion";
 import { useEffect } from "react";
 
-export function CountUp({ value, prefix = "", suffix = "" }: { value: number, prefix?: string, suffix?: string }) {
-    const spring = useSpring(value, { mass: 0.8, stiffness: 75, damping: 15 });
-    const display = useTransform(spring, (current) => `${prefix}${current.toFixed(2)}${suffix}`);
+export function CountUp({
+  value,
+  prefix = "",
+  suffix = "",
+}: {
+  value: number;
+  prefix?: string;
+  suffix?: string;
+}) {
+  const spring = useSpring(value, { mass: 0.8, stiffness: 75, damping: 15 });
+  const display = useTransform(
+    spring,
+    (current) => `${prefix}${current.toFixed(2)}${suffix}`,
+  );
 
-    useEffect(() => {
-        spring.set(value);
-    }, [spring, value]);
+  useEffect(() => {
+    spring.set(value);
+  }, [spring, value]);
 
-    return <motion.span>{display}</motion.span>;
+  return <motion.span>{display}</motion.span>;
 }

src/components/ui/date-picker.tsx

@@ -60,12 +60,13 @@ export function DatePicker({
   const inputWidthClass = className?.includes("w-full")
     ? "w-full"
     : className?.includes("w-32") ||
-      className?.includes("w-28") ||
-      className?.includes("w-36")
+        className?.includes("w-28") ||
+        className?.includes("w-36")
       ? className
       : "w-full md:w-32 md:min-w-32";
 
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Keep text input and calendar month synchronized with the controlled date prop.
     setValue(formatDate(date));
     setMonth(date);
   }, [date]);
@@ -77,7 +78,12 @@ export function DatePicker({
         value={value}
         placeholder={placeholder}
         disabled={disabled}
-        className={cn("bg-background pr-10", sizeClasses[size], "w-full", inputClassName)}
+        className={cn(
+          "bg-background pr-10",
+          sizeClasses[size],
+          "w-full",
+          inputClassName,
+        )}
         onChange={(e) => {
           setValue(e.target.value);
           const parsedDate = parseDate(e.target.value);
@@ -98,13 +104,16 @@ export function DatePicker({
           <Button
             variant="ghost"
             disabled={disabled}
-            className="absolute top-1/2 right-2 size-6 p-0 -translate-y-1/2 text-primary/80 hover:text-primary transition-colors z-20"
+            className="text-primary/80 hover:text-primary absolute top-1/2 right-2 z-20 size-6 -translate-y-1/2 p-0 transition-colors"
           >
             <CalendarIcon className="size-4" />
             <span className="sr-only">Select date</span>
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto overflow-hidden p-0 rounded-xl" align="end">
+        <PopoverContent
+          className="w-auto overflow-hidden rounded-xl p-0"
+          align="end"
+        >
           <Calendar
             mode="single"
             selected={date}

src/components/ui/dialog.tsx

@@ -1,33 +1,33 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -60,8 +60,8 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4  border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
         )}
         {...props}
       >
@@ -77,7 +77,7 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -140,4 +140,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};

src/components/ui/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto  border-0 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto border-0 shadow-md",
           className,
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-foreground-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2  px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-foreground-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-foreground-foreground relative flex cursor-default items-center gap-2  py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-foreground-foreground relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-foreground-foreground relative flex cursor-default items-center gap-2  py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-foreground-foreground relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-foreground-foreground data-[state=open]:bg-accent data-[state=open]:text-foreground-foreground flex cursor-default items-center  px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        "focus:bg-accent focus:text-foreground-foreground data-[state=open]:bg-accent data-[state=open]:text-foreground-foreground flex cursor-default items-center px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
         className,
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden  border-0 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden border-0 shadow-lg",
         className,
       )}
       {...props}

src/components/ui/image-with-skeleton.tsx

@@ -4,34 +4,34 @@ import { cn } from "~/lib/utils";
 import { Skeleton } from "~/components/ui/skeleton";
 
 interface ImageWithSkeletonProps extends ImageProps {
-    containerClassName?: string;
+  containerClassName?: string;
 }
 
 export function ImageWithSkeleton({
-    className,
-    containerClassName,
-    alt,
-    ...props
+  className,
+  containerClassName,
+  alt,
+  ...props
 }: ImageWithSkeletonProps) {
-    const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
 
-    return (
-        <div className={cn("relative overflow-hidden", containerClassName)}>
-            {isLoading && (
-                <Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
-            )}
-            <Image
-                className={cn(
-                    "duration-700 ease-in-out",
-                    isLoading
-                        ? "scale-110 blur-2xl grayscale"
-                        : "scale-100 blur-0 grayscale-0",
-                    className
-                )}
-                onLoad={() => setIsLoading(false)}
-                alt={alt}
-                {...props}
-            />
-        </div>
-    );
+  return (
+    <div className={cn("relative overflow-hidden", containerClassName)}>
+      {isLoading && (
+        <Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
+      )}
+      <Image
+        className={cn(
+          "duration-700 ease-in-out",
+          isLoading
+            ? "scale-110 blur-2xl grayscale"
+            : "blur-0 scale-100 grayscale-0",
+          className,
+        )}
+        onLoad={() => setIsLoading(false)}
+        alt={alt}
+        {...props}
+      />
+    </div>
+  );
 }

src/components/ui/input-color.tsx

@@ -0,0 +1,568 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
+import { Loader2, PipetteIcon } from "lucide-react";
+import { z } from "zod";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import {
+  hexToRgb,
+  hexToRgba,
+  hslToRgb,
+  hslaToRgba,
+  rgbToHex,
+  rgbToHsl,
+  rgbaToHex,
+  rgbaToHsla,
+} from "~/lib/color-converter";
+import { cn } from "~/lib/utils";
+
+declare global {
+  interface Window {
+    EyeDropper?: new () => {
+      open: () => Promise<{ sRGBHex: string }>;
+    };
+  }
+}
+
+export const colorSchema = z
+  .string()
+  .regex(
+    /^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/,
+    "Color must be a valid hex color (e.g., #FF0000 or #FF0000FF)",
+  )
+  .transform((val) => val.toUpperCase());
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  isLoading?: boolean;
+  label: string;
+  error?: string;
+  className?: string;
+  alpha?: boolean;
+}
+
+interface ColorValues {
+  hex: string;
+  rgb: { r: number; g: number; b: number };
+  hsl: { h: number; s: number; l: number };
+  rgba?: { r: number; g: number; b: number; a: number };
+  hsla?: { h: number; s: number; l: number; a: number };
+}
+
+export function InputColor({
+  value,
+  onChange,
+  onBlur = () => undefined,
+  isLoading = false,
+  label,
+  error,
+  className = "mt-6",
+  alpha = false,
+}: ColorPickerProps) {
+  const [colorFormat, setColorFormat] = useState(alpha ? "HEXA" : "HEX");
+  const [colorValues, setColorValues] = useState<ColorValues>(() =>
+    getColorValues(value, alpha),
+  );
+  const [hexInputValue, setHexInputValue] = useState(value);
+  const [hexInputError, setHexInputError] = useState<string | null>(null);
+
+  const updateColorValues = (newColor: string) => {
+    const nextValues = getColorValues(newColor, alpha);
+    setColorValues(nextValues);
+    setHexInputValue(newColor.toUpperCase());
+  };
+
+  const handleColorChange = (newColor: string) => {
+    updateColorValues(newColor);
+    onChange(newColor.toUpperCase());
+  };
+
+  const handleHexChange = (nextValue: string) => {
+    let formattedValue = nextValue.toUpperCase();
+    if (!formattedValue.startsWith("#")) {
+      formattedValue = `#${formattedValue}`;
+    }
+
+    const maxLength = alpha ? 9 : 7;
+    if (
+      formattedValue.length <= maxLength &&
+      /^#[0-9A-Fa-f]*$/.test(formattedValue)
+    ) {
+      setHexInputValue(formattedValue);
+      onChange(formattedValue);
+      updateColorValues(formattedValue);
+      try {
+        if (formattedValue.length === maxLength) {
+          colorSchema.parse(formattedValue);
+          setHexInputError(null);
+        } else {
+          setHexInputError("Enter a valid color");
+        }
+      } catch (validationError) {
+        if (validationError instanceof z.ZodError) {
+          setHexInputError("Enter a valid color");
+        }
+      }
+    }
+  };
+
+  const handleRgbChange = (component: "r" | "g" | "b", nextValue: string) => {
+    const numValue = Number.parseInt(nextValue) || 0;
+    const clampedValue = Math.max(0, Math.min(255, numValue));
+    const newRgb = { ...colorValues.rgb, [component]: clampedValue };
+    const hex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+    const hsl = rgbToHsl(newRgb.r, newRgb.g, newRgb.b);
+
+    setColorValues({ ...colorValues, hex, rgb: newRgb, hsl });
+    setHexInputValue(hex);
+    onChange(hex);
+  };
+
+  const handleRgbaChange = (
+    component: "r" | "g" | "b" | "a",
+    nextValue: string,
+  ) => {
+    if (!alpha || !colorValues.rgba) return;
+
+    const numValue = Number.parseFloat(nextValue) || 0;
+    const clampedValue =
+      component === "a"
+        ? Math.max(0, Math.min(1, numValue))
+        : Math.max(0, Math.min(255, Math.floor(numValue)));
+
+    const newRgba = { ...colorValues.rgba, [component]: clampedValue };
+    const hex = rgbaToHex(newRgba.r, newRgba.g, newRgba.b, newRgba.a);
+    const hsla = rgbaToHsla(newRgba.r, newRgba.g, newRgba.b, newRgba.a);
+
+    setColorValues({
+      ...colorValues,
+      hex: hex.slice(0, 7),
+      rgb: { r: newRgba.r, g: newRgba.g, b: newRgba.b },
+      hsl: rgbToHsl(newRgba.r, newRgba.g, newRgba.b),
+      rgba: newRgba,
+      hsla,
+    });
+    setHexInputValue(hex);
+    onChange(hex);
+  };
+
+  const handleHslChange = (component: "h" | "s" | "l", nextValue: string) => {
+    const numValue = Number.parseInt(nextValue) || 0;
+    const clampedValue =
+      component === "h"
+        ? Math.max(0, Math.min(360, numValue))
+        : Math.max(0, Math.min(100, numValue));
+    const newHsl = { ...colorValues.hsl, [component]: clampedValue };
+    const rgb = hslToRgb(newHsl.h, newHsl.s, newHsl.l);
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+
+    setColorValues({ ...colorValues, hex, rgb, hsl: newHsl });
+    setHexInputValue(hex);
+    onChange(hex);
+  };
+
+  const handleHslaChange = (
+    component: "h" | "s" | "l" | "a",
+    nextValue: string,
+  ) => {
+    if (!alpha || !colorValues.hsla) return;
+
+    const numValue = Number.parseFloat(nextValue) || 0;
+    const clampedValue =
+      component === "a"
+        ? Math.max(0, Math.min(1, numValue))
+        : component === "h"
+          ? Math.max(0, Math.min(360, numValue))
+          : Math.max(0, Math.min(100, numValue));
+
+    const newHsla = { ...colorValues.hsla, [component]: clampedValue };
+    const rgba = hslaToRgba(newHsla.h, newHsla.s, newHsla.l, newHsla.a);
+    const hex = rgbaToHex(rgba.r, rgba.g, rgba.b, rgba.a);
+
+    setColorValues({
+      ...colorValues,
+      hex: hex.slice(0, 7),
+      rgb: { r: rgba.r, g: rgba.g, b: rgba.b },
+      hsl: { h: newHsla.h, s: newHsla.s, l: newHsla.l },
+      rgba,
+      hsla: newHsla,
+    });
+    setHexInputValue(hex);
+    onChange(hex);
+  };
+
+  const handlePopoverChange = (open: boolean) => {
+    if (!open) {
+      setColorFormat(alpha ? "HEXA" : "HEX");
+      onBlur();
+    }
+  };
+
+  const handleEyeDropper = async () => {
+    const EyeDropper = window.EyeDropper;
+    if (!EyeDropper) return;
+    try {
+      const eyeDropper = new EyeDropper();
+      const result = await eyeDropper.open();
+      const pickedColor = result.sRGBHex;
+      updateColorValues(pickedColor);
+      onChange(pickedColor);
+    } catch {
+      // User canceled the browser picker.
+    }
+  };
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronize controlled color value into the picker fields.
+    updateColorValues(value);
+    setHexInputValue(value.toUpperCase());
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- updateColorValues intentionally derives all picker state from value.
+  }, [value]);
+
+  const getCurrentHexValue = () => {
+    if (colorFormat === "HEX" || colorFormat === "HEXA") {
+      return hexInputValue;
+    }
+    if (alpha && colorValues.rgba) {
+      return rgbaToHex(
+        colorValues.rgba.r,
+        colorValues.rgba.g,
+        colorValues.rgba.b,
+        colorValues.rgba.a,
+      );
+    }
+    return colorValues.hex;
+  };
+
+  return (
+    <div className={cn(className)}>
+      <Label className="mb-3">{label}</Label>
+      <div className="flex items-center gap-4">
+        <Popover onOpenChange={handlePopoverChange}>
+          <PopoverTrigger asChild>
+            <Button
+              className="border-border relative h-12 w-12 overflow-hidden border shadow-none"
+              size="icon"
+              style={{ backgroundColor: hexInputValue }}
+              type="button"
+              variant="outline"
+            >
+              {alpha && colorValues.rgba && colorValues.rgba.a < 1 && (
+                <span
+                  className="absolute inset-0 opacity-20"
+                  style={{
+                    backgroundImage: `linear-gradient(45deg, #ccc 25%, transparent 25%),
+                                    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+                                    linear-gradient(45deg, transparent 75%, #ccc 75%),
+                                    linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
+                    backgroundSize: "8px 8px",
+                    backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+                  }}
+                />
+              )}
+              <span className="sr-only">Open {label} picker</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-3" align="start">
+            <div className="color-picker space-y-3">
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute -top-1.5 -left-1 z-10 flex h-7 w-7 items-center gap-1 bg-transparent hover:bg-transparent"
+                  onClick={handleEyeDropper}
+                  disabled={!isEyeDropperAvailable()}
+                  type="button"
+                >
+                  <PipetteIcon className="h-3 w-3" />
+                  <span className="sr-only">Pick color from screen</span>
+                </Button>
+                {alpha ? (
+                  <HexAlphaColorPicker
+                    className="!aspect-square !h-[244.79px] !w-[244.79px]"
+                    color={value}
+                    onChange={handleColorChange}
+                  />
+                ) : (
+                  <HexColorPicker
+                    className="!aspect-square !h-[244.79px] !w-[244.79px]"
+                    color={value}
+                    onChange={handleColorChange}
+                  />
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Select value={colorFormat} onValueChange={setColorFormat}>
+                  <SelectTrigger className="!h-7 !w-[4.8rem] rounded-sm px-2 py-1 !text-sm">
+                    <SelectValue placeholder="Color" />
+                  </SelectTrigger>
+                  <SelectContent className="min-w-20">
+                    {alpha ? (
+                      <>
+                        <SelectItem value="HEXA" className="h-7 text-sm">
+                          HEXA
+                        </SelectItem>
+                        <SelectItem value="RGBA" className="h-7 text-sm">
+                          RGBA
+                        </SelectItem>
+                        <SelectItem value="HSLA" className="h-7 text-sm">
+                          HSLA
+                        </SelectItem>
+                      </>
+                    ) : (
+                      <>
+                        <SelectItem value="HEX" className="h-7 text-sm">
+                          HEX
+                        </SelectItem>
+                        <SelectItem value="RGB" className="h-7 text-sm">
+                          RGB
+                        </SelectItem>
+                        <SelectItem value="HSL" className="h-7 text-sm">
+                          HSL
+                        </SelectItem>
+                      </>
+                    )}
+                  </SelectContent>
+                </Select>
+                <ColorFormatFields
+                  alpha={alpha}
+                  colorFormat={colorFormat}
+                  colorValues={colorValues}
+                  currentHexValue={getCurrentHexValue()}
+                  handleHexChange={handleHexChange}
+                  handleHslChange={handleHslChange}
+                  handleHslaChange={handleHslaChange}
+                  handleRgbChange={handleRgbChange}
+                  handleRgbaChange={handleRgbaChange}
+                />
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <div className="relative flex-1 sm:flex-none">
+          <Input
+            placeholder={label}
+            value={getCurrentHexValue()}
+            onChange={(event) => handleHexChange(event.target.value)}
+            onBlur={onBlur}
+            className={cn("h-12 uppercase", error && "border-destructive")}
+          />
+          {isLoading && (
+            <span className="absolute inset-y-0 right-0 flex items-center pr-4">
+              <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" />
+            </span>
+          )}
+        </div>
+      </div>
+      {error && <p className="text-destructive mt-1.5 text-sm">{error}</p>}
+      {hexInputError && (
+        <p className="text-destructive mt-1.5 text-sm">{hexInputError}</p>
+      )}
+    </div>
+  );
+}
+
+function ColorFormatFields({
+  alpha,
+  colorFormat,
+  colorValues,
+  currentHexValue,
+  handleHexChange,
+  handleRgbChange,
+  handleRgbaChange,
+  handleHslChange,
+  handleHslaChange,
+}: {
+  alpha: boolean;
+  colorFormat: string;
+  colorValues: ColorValues;
+  currentHexValue: string;
+  handleHexChange: (value: string) => void;
+  handleRgbChange: (component: "r" | "g" | "b", value: string) => void;
+  handleRgbaChange: (component: "r" | "g" | "b" | "a", value: string) => void;
+  handleHslChange: (component: "h" | "s" | "l", value: string) => void;
+  handleHslaChange: (component: "h" | "s" | "l" | "a", value: string) => void;
+}) {
+  if (colorFormat === "HEX" || colorFormat === "HEXA") {
+    return (
+      <Input
+        className="h-7 w-[160px] rounded-sm text-sm"
+        value={currentHexValue}
+        onChange={(event) => handleHexChange(event.target.value)}
+        placeholder={alpha ? "#FF0000FF" : "#FF0000"}
+        maxLength={alpha ? 9 : 7}
+      />
+    );
+  }
+
+  if (colorFormat === "RGB") {
+    return (
+      <div className="flex items-center">
+        <Input
+          className="h-7 w-13 rounded-l-sm rounded-r-none text-center text-sm"
+          value={colorValues.rgb.r}
+          onChange={(event) => handleRgbChange("r", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-13 rounded-none border-x-0 text-center text-sm"
+          value={colorValues.rgb.g}
+          onChange={(event) => handleRgbChange("g", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-13 rounded-l-none rounded-r-sm text-center text-sm"
+          value={colorValues.rgb.b}
+          onChange={(event) => handleRgbChange("b", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+      </div>
+    );
+  }
+
+  if (colorFormat === "RGBA" && alpha && colorValues.rgba) {
+    return (
+      <div className="flex items-center">
+        <Input
+          className="h-7 w-10 rounded-l-sm rounded-r-none px-1 text-center text-sm"
+          value={colorValues.rgba.r}
+          onChange={(event) => handleRgbaChange("r", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-none border-x-0 px-1 text-center text-sm"
+          value={colorValues.rgba.g}
+          onChange={(event) => handleRgbaChange("g", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-none border-x-0 px-1 text-center text-sm"
+          value={colorValues.rgba.b}
+          onChange={(event) => handleRgbaChange("b", event.target.value)}
+          placeholder="255"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-l-none rounded-r-sm px-1 text-center text-sm"
+          value={colorValues.rgba.a.toFixed(2)}
+          onChange={(event) => handleRgbaChange("a", event.target.value)}
+          placeholder="1.00"
+          maxLength={4}
+        />
+      </div>
+    );
+  }
+
+  if (colorFormat === "HSL") {
+    return (
+      <div className="flex items-center">
+        <Input
+          className="h-7 w-13 rounded-l-sm rounded-r-none text-center text-sm"
+          value={colorValues.hsl.h}
+          onChange={(event) => handleHslChange("h", event.target.value)}
+          placeholder="360"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-13 rounded-none border-x-0 text-center text-sm"
+          value={colorValues.hsl.s}
+          onChange={(event) => handleHslChange("s", event.target.value)}
+          placeholder="100"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-13 rounded-l-none rounded-r-sm text-center text-sm"
+          value={colorValues.hsl.l}
+          onChange={(event) => handleHslChange("l", event.target.value)}
+          placeholder="100"
+          maxLength={3}
+        />
+      </div>
+    );
+  }
+
+  if (colorFormat === "HSLA" && alpha && colorValues.hsla) {
+    return (
+      <div className="flex items-center">
+        <Input
+          className="h-7 w-10 rounded-l-sm rounded-r-none px-1 text-center text-sm"
+          value={colorValues.hsla.h}
+          onChange={(event) => handleHslaChange("h", event.target.value)}
+          placeholder="360"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-none border-x-0 px-1 text-center text-sm"
+          value={colorValues.hsla.s}
+          onChange={(event) => handleHslaChange("s", event.target.value)}
+          placeholder="100"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-none border-x-0 px-1 text-center text-sm"
+          value={colorValues.hsla.l}
+          onChange={(event) => handleHslaChange("l", event.target.value)}
+          placeholder="100"
+          maxLength={3}
+        />
+        <Input
+          className="h-7 w-10 rounded-l-none rounded-r-sm px-1 text-center text-sm"
+          value={colorValues.hsla.a.toFixed(2)}
+          onChange={(event) => handleHslaChange("a", event.target.value)}
+          placeholder="1.00"
+          maxLength={4}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function getColorValues(value: string, alpha: boolean): ColorValues {
+  if (alpha) {
+    const rgba = hexToRgba(value);
+    const hsla = rgbaToHsla(rgba.r, rgba.g, rgba.b, rgba.a);
+    return {
+      hex: value.length === 9 ? value.slice(0, 7) : value,
+      rgb: { r: rgba.r, g: rgba.g, b: rgba.b },
+      hsl: rgbToHsl(rgba.r, rgba.g, rgba.b),
+      rgba,
+      hsla,
+    };
+  }
+
+  const rgb = hexToRgb(value);
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  return {
+    hex: value.toUpperCase(),
+    rgb,
+    hsl,
+  };
+}
+
+function isEyeDropperAvailable() {
+  return typeof window !== "undefined" && Boolean(window.EyeDropper);
+}

src/components/ui/label.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Label({
   className,
@@ -14,11 +14,11 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };

src/components/ui/navigation-menu.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function NavigationMenu({
   className,
@@ -11,7 +11,7 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
+  viewport?: boolean;
 }) {
   return (
     <NavigationMenuPrimitive.Root
@@ -19,14 +19,14 @@ function NavigationMenu({
       data-viewport={viewport}
       className={cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       {viewport && <NavigationMenuViewport />}
     </NavigationMenuPrimitive.Root>
-  )
+  );
 }
 
 function NavigationMenuList({
@@ -38,11 +38,11 @@ function NavigationMenuList({
       data-slot="navigation-menu-list"
       className={cn(
         "group flex flex-1 list-none items-center justify-center gap-1",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuItem({
@@ -55,12 +55,12 @@ function NavigationMenuItem({
       className={cn("relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center  bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-foreground-foreground focus:bg-accent focus:text-foreground-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-foreground-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
-)
+  "group inline-flex h-9 w-max items-center justify-center  bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-foreground-foreground focus:bg-accent focus:text-foreground-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-foreground-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
 
 function NavigationMenuTrigger({
   className,
@@ -79,7 +79,7 @@ function NavigationMenuTrigger({
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
-  )
+  );
 }
 
 function NavigationMenuContent({
@@ -91,12 +91,12 @@ function NavigationMenuContent({
       data-slot="navigation-menu-content"
       className={cn(
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu: group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu: group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuViewport({
@@ -106,19 +106,19 @@ function NavigationMenuViewport({
   return (
     <div
       className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center"
+        "absolute top-full left-0 isolate z-50 flex justify-center",
       )}
     >
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden  border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function NavigationMenuLink({
@@ -129,12 +129,12 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-foreground-foreground hover:bg-accent hover:text-foreground-foreground focus:bg-accent focus:text-foreground-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1  p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-foreground-foreground hover:bg-accent hover:text-foreground-foreground focus:bg-accent focus:text-foreground-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuIndicator({
@@ -146,13 +146,13 @@ function NavigationMenuIndicator({
       data-slot="navigation-menu-indicator"
       className={cn(
         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className
+        className,
       )}
       {...props}
     >
       <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
     </NavigationMenuPrimitive.Indicator>
-  )
+  );
 }
 
 export {
@@ -165,4 +165,4 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
-}
+};

src/components/ui/popover.tsx

@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
@@ -30,19 +30,19 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin)  border p-4 shadow-md outline-hidden",
-          className
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) border p-4 shadow-md outline-hidden",
+          className,
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/ui/progress.tsx

@@ -14,7 +14,7 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden ",
+        "bg-primary/20 relative h-2 w-full overflow-hidden",
         className,
       )}
       {...props}

src/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -11,21 +11,21 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
+        "bg-border shrink-0",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator } 
+export { Separator };

src/components/ui/sheet.tsx

@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -37,11 +37,11 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
@@ -50,7 +50,7 @@ function SheetContent({
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
+  side?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <SheetPortal>
@@ -67,7 +67,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
+          className,
         )}
         {...props}
       >
@@ -78,7 +78,7 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  )
+  );
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -88,7 +88,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,7 +98,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({
@@ -111,7 +111,7 @@ function SheetTitle({
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -124,7 +124,7 @@ function SheetDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -136,4 +136,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};

src/components/ui/skeleton.tsx

@@ -4,12 +4,7 @@ function Skeleton({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("bg-muted animate-pulse ", className)}
-      {...props}
-    />
-  );
+  return <div className={cn("bg-muted animate-pulse", className)} {...props} />;
 }
 
 // Modern dashboard skeleton components
@@ -17,12 +12,9 @@ export function DashboardStatsSkeleton() {
   return (
     <div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
       {Array.from({ length: 4 }).map((_, i) => (
-        <div
-          key={i}
-          className=" border border-gray-100 bg-white p-6 shadow-sm"
-        >
+        <div key={i} className="border border-gray-100 bg-white p-6 shadow-sm">
           <div className="mb-4 flex items-center justify-between">
-            <Skeleton className="h-9 w-9 " />
+            <Skeleton className="h-9 w-9" />
             <Skeleton className="h-4 w-12" />
           </div>
           <div>
@@ -39,10 +31,7 @@ export function DashboardCardsSkeleton() {
   return (
     <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
       {Array.from({ length: 2 }).map((_, i) => (
-        <div
-          key={i}
-          className=" border border-gray-100 bg-white p-6 shadow-sm"
-        >
+        <div key={i} className="border border-gray-100 bg-white p-6 shadow-sm">
           <div className="mb-6 flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Skeleton className="h-5 w-5 rounded" />
@@ -69,7 +58,7 @@ export function DashboardCardsSkeleton() {
 
 export function DashboardActivitySkeleton() {
   return (
-    <div className=" border border-gray-100 bg-white p-6 shadow-sm">
+    <div className="border border-gray-100 bg-white p-6 shadow-sm">
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Skeleton className="h-5 w-5 rounded" />
@@ -81,17 +70,17 @@ export function DashboardActivitySkeleton() {
         {Array.from({ length: 5 }).map((_, i) => (
           <div
             key={i}
-            className="flex items-center justify-between  border border-gray-100 p-4"
+            className="flex items-center justify-between border border-gray-100 p-4"
           >
             <div className="flex items-center gap-3">
-              <Skeleton className="h-8 w-8 " />
+              <Skeleton className="h-8 w-8" />
               <div className="space-y-2">
                 <Skeleton className="h-4 w-24" />
                 <Skeleton className="h-3 w-32" />
               </div>
             </div>
             <div className="flex items-center gap-3">
-              <Skeleton className="h-6 w-16 " />
+              <Skeleton className="h-6 w-16" />
               <Skeleton className="h-4 w-16" />
               <Skeleton className="h-8 w-8 rounded" />
             </div>
@@ -115,14 +104,14 @@ export function DashboardHeroSkeleton() {
 
 export function QuickActionsSkeleton() {
   return (
-    <div className=" border border-gray-100 bg-white p-6 shadow-sm">
+    <div className="border border-gray-100 bg-white p-6 shadow-sm">
       <div className="mb-4 flex items-center gap-2">
         <Skeleton className="h-5 w-5 rounded" />
         <Skeleton className="h-6 w-32" />
       </div>
       <div className="space-y-3">
         {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className=" border border-gray-200 p-4">
+          <div key={i} className="border border-gray-200 p-4">
             <div className="flex items-center gap-3">
               <Skeleton className="h-5 w-5" />
               <div className="space-y-2">

src/components/ui/slider.tsx

@@ -113,6 +113,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
       if (lockValue !== null) {
         // Only update internal & emit if changed
         if (!isControlled && internal !== 1) {
+          // eslint-disable-next-line react-hooks/set-state-in-effect -- Force the uncontrolled slider to the reduced-motion lock value.
           setInternal(1);
         }
         if (lastEmittedRef.current !== 1) {

src/components/ui/tabs.tsx

@@ -11,7 +11,7 @@ const Tabs = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Root
     ref={ref}
-    className={cn("flex flex-col gap-2", className)}
+    className={cn("flex flex-col gap-1", className)}
     {...props}
   />
 ));
@@ -24,7 +24,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
+      "bg-muted text-muted-foreground flex h-9 w-full items-center justify-center rounded-lg p-1",
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex flex-1 items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
       className,
     )}
     {...props}
@@ -54,7 +54,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+      "ring-offset-background focus-visible:ring-ring mt-1 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
       className,
     )}
     {...props}

src/components/ui/tooltip.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function TooltipProvider({
   delayDuration = 0,
@@ -15,7 +15,7 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  )
+  );
 }
 
 function Tooltip({
@@ -25,13 +25,13 @@ function Tooltip({
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -47,7 +47,7 @@ function TooltipContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
+          className,
         )}
         {...props}
       >
@@ -55,7 +55,7 @@ function TooltipContent({
         <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/env.js

@@ -19,6 +19,7 @@ export const env = createEnv({
       .enum(["development", "test", "production"])
       .default("development"),
     DB_DISABLE_SSL: z.coerce.boolean().optional(),
+    DISABLE_SIGNUPS: z.coerce.boolean().optional(),
     // SSO / Authentik (optional)
     AUTHENTIK_ISSUER: z.string().url().optional(),
     AUTHENTIK_CLIENT_ID: z.string().optional(),
@@ -41,18 +42,27 @@ export const env = createEnv({
     NEXT_PUBLIC_BRAND_LOGO_TEXT: z.string().optional(),
     NEXT_PUBLIC_BRAND_ICON: z.string().optional(),
     NEXT_PUBLIC_DEFAULT_INTERFACE_THEME: z
-      .enum(["beenvoice", "shadcn", "minimal", "editorial"])
+      .enum([
+        "beenvoice",
+        "frutiger",
+        "frutiger-aero",
+        "shadcn",
+        "minimal",
+        "editorial",
+      ])
       .optional(),
     NEXT_PUBLIC_DEFAULT_FONT: z
-      .enum(["brand", "platform", "inter", "serif"])
+      .enum(["brand", "frutiger", "platform", "inter", "serif"])
       .optional(),
     NEXT_PUBLIC_DEFAULT_BODY_FONT: z
-      .enum(["brand", "platform", "inter", "serif"])
+      .enum(["brand", "frutiger", "platform", "inter", "serif"])
       .optional(),
     NEXT_PUBLIC_DEFAULT_HEADING_FONT: z
-      .enum(["brand", "platform", "inter", "serif"])
+      .enum(["brand", "frutiger", "platform", "inter", "serif"])
+      .optional(),
+    NEXT_PUBLIC_DEFAULT_RADIUS: z
+      .enum(["none", "sm", "md", "lg", "xl"])
       .optional(),
-    NEXT_PUBLIC_DEFAULT_RADIUS: z.enum(["none", "sm", "md", "lg", "xl"]).optional(),
     NEXT_PUBLIC_DEFAULT_SIDEBAR_STYLE: z
       .enum(["floating", "docked"])
       .optional(),
@@ -70,6 +80,7 @@ export const env = createEnv({
     RESEND_DOMAIN: process.env.RESEND_DOMAIN,
     NODE_ENV: process.env.NODE_ENV,
     DB_DISABLE_SSL: process.env.DB_DISABLE_SSL,
+    DISABLE_SIGNUPS: process.env.DISABLE_SIGNUPS,
     AUTHENTIK_ISSUER: process.env.AUTHENTIK_ISSUER,
     AUTHENTIK_CLIENT_ID: process.env.AUTHENTIK_CLIENT_ID,
     AUTHENTIK_CLIENT_SECRET: process.env.AUTHENTIK_CLIENT_SECRET,

src/hooks/useCountUp.ts

@@ -39,6 +39,7 @@ export function useCountUp({
 
   useEffect(() => {
     // Reset when end value changes
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Restart the animation from the configured start value when inputs change.
     setCount(start);
     setIsAnimating(false);
 

src/lib/appearance.ts

@@ -0,0 +1,126 @@
+import { z } from "zod";
+
+export const interfaceThemeValues = [
+  "beenvoice",
+  "frutiger",
+  "frutiger-aero",
+  "shadcn",
+  "minimal",
+  "editorial",
+] as const;
+export const fontPreferenceValues = [
+  "brand",
+  "frutiger",
+  "platform",
+  "inter",
+  "serif",
+] as const;
+export const radiusPreferenceValues = ["none", "sm", "md", "lg", "xl"] as const;
+export const sidebarStyleValues = ["floating", "docked"] as const;
+export const colorModeValues = ["light", "dark", "system"] as const;
+export const colorThemeValues = [
+  "slate",
+  "blue",
+  "green",
+  "rose",
+  "orange",
+  "custom",
+] as const;
+export const pdfTemplateValues = ["classic", "minimal"] as const;
+
+export const interfaceThemeSchema = z.enum(interfaceThemeValues);
+export const fontPreferenceSchema = z.enum(fontPreferenceValues);
+export const radiusPreferenceSchema = z.enum(radiusPreferenceValues);
+export const sidebarStyleSchema = z.enum(sidebarStyleValues);
+export const colorModeSchema = z.enum(colorModeValues);
+export const colorThemeSchema = z.enum(colorThemeValues);
+export const pdfTemplateSchema = z.enum(pdfTemplateValues);
+
+export const hslChannelsSchema = z
+  .string()
+  .trim()
+  .regex(
+    /^(?:360(?:\.0)?|3[0-5]\d(?:\.\d)?|[12]?\d?\d(?:\.\d)?)\s+(?:100(?:\.0)?|\d{1,2}(?:\.\d)?)%\s+(?:100(?:\.0)?|\d{1,2}(?:\.\d)?)%$/,
+    "Use HSL channels like 142.1 76.2% 36.3%",
+  );
+
+export type InterfaceTheme = z.infer<typeof interfaceThemeSchema>;
+export type FontPreference = z.infer<typeof fontPreferenceSchema>;
+export type RadiusPreference = z.infer<typeof radiusPreferenceSchema>;
+export type SidebarStyle = z.infer<typeof sidebarStyleSchema>;
+export type ColorMode = z.infer<typeof colorModeSchema>;
+export type ColorTheme = z.infer<typeof colorThemeSchema>;
+export type PdfTemplate = z.infer<typeof pdfTemplateSchema>;
+
+export const fallbackAppearance = {
+  interfaceTheme: "beenvoice",
+  fontPreference: "brand",
+  bodyFontPreference: "brand",
+  headingFontPreference: "brand",
+  radiusPreference: "xl",
+  sidebarStyle: "floating",
+  colorMode: "system",
+  colorTheme: "slate",
+  customColor: undefined,
+  brandName: "beenvoice",
+  brandTagline:
+    "Simple and efficient invoicing for freelancers and small businesses",
+  brandLogoText: "beenvoice",
+  brandIcon: "$",
+  pdfTemplate: "classic",
+  pdfAccentColor: "#111827",
+  pdfFooterText: "Professional Invoicing",
+  pdfShowLogo: true,
+  pdfShowPageNumbers: true,
+} satisfies {
+  interfaceTheme: InterfaceTheme;
+  fontPreference: FontPreference;
+  bodyFontPreference: FontPreference;
+  headingFontPreference: FontPreference;
+  radiusPreference: RadiusPreference;
+  sidebarStyle: SidebarStyle;
+  colorMode: ColorMode;
+  colorTheme: ColorTheme;
+  customColor?: string;
+  brandName: string;
+  brandTagline: string;
+  brandLogoText: string;
+  brandIcon: string;
+  pdfTemplate: PdfTemplate;
+  pdfAccentColor: string;
+  pdfFooterText: string;
+  pdfShowLogo: boolean;
+  pdfShowPageNumbers: boolean;
+};
+
+export function isInterfaceTheme(value: unknown): value is InterfaceTheme {
+  return interfaceThemeSchema.safeParse(value).success;
+}
+
+export function isFontPreference(value: unknown): value is FontPreference {
+  return fontPreferenceSchema.safeParse(value).success;
+}
+
+export function isColorMode(value: unknown): value is ColorMode {
+  return colorModeSchema.safeParse(value).success;
+}
+
+export function isColorTheme(value: unknown): value is ColorTheme {
+  return colorThemeSchema.safeParse(value).success;
+}
+
+export function isRadiusPreference(value: unknown): value is RadiusPreference {
+  return radiusPreferenceSchema.safeParse(value).success;
+}
+
+export function isSidebarStyle(value: unknown): value is SidebarStyle {
+  return sidebarStyleSchema.safeParse(value).success;
+}
+
+export function isPdfTemplate(value: unknown): value is PdfTemplate {
+  return pdfTemplateSchema.safeParse(value).success;
+}
+
+export function isHslChannels(value: unknown): value is string {
+  return hslChannelsSchema.safeParse(value).success;
+}

src/lib/auth-client.ts

@@ -7,6 +7,6 @@ import { genericOAuthClient } from "better-auth/client/plugins";
  * Auth client configuration
  */
 export const authClient = createAuthClient({
-    baseURL: process.env.NEXT_PUBLIC_APP_URL,
-    plugins: [genericOAuthClient()],
+  baseURL: process.env.NEXT_PUBLIC_APP_URL,
+  plugins: [genericOAuthClient()],
 });

src/lib/auth.ts

@@ -10,6 +10,7 @@ const authentikEnabled = Boolean(
     process.env.AUTHENTIK_CLIENT_ID &&
     process.env.AUTHENTIK_CLIENT_SECRET,
 );
+const signupsDisabled = process.env.DISABLE_SIGNUPS === "true";
 
 export const auth = betterAuth({
   database: drizzleAdapter(db, {
@@ -34,6 +35,7 @@ export const auth = betterAuth({
   }),
   emailAndPassword: {
     enabled: true,
+    disableSignUp: signupsDisabled,
     password: {
       hash: async (password) => {
         const bcrypt = await import("bcryptjs");

src/lib/branding.ts

@@ -1,17 +1,36 @@
 import { env } from "~/env";
+import {
+  fallbackAppearance,
+  type ColorMode,
+  type ColorTheme,
+  type FontPreference,
+  type InterfaceTheme,
+  type PdfTemplate,
+  type RadiusPreference,
+  type SidebarStyle,
+} from "~/lib/appearance";
 
-export type InterfaceTheme = "beenvoice" | "shadcn" | "minimal" | "editorial";
-export type FontPreference = "brand" | "platform" | "inter" | "serif";
-export type RadiusPreference = "none" | "sm" | "md" | "lg" | "xl";
-export type SidebarStyle = "floating" | "docked";
-export type ColorMode = "light" | "dark" | "system";
-export type ColorTheme =
-  | "slate"
-  | "blue"
-  | "green"
-  | "rose"
-  | "orange"
-  | "custom";
+export type {
+  ColorMode,
+  ColorTheme,
+  FontPreference,
+  InterfaceTheme,
+  PdfTemplate,
+  RadiusPreference,
+  SidebarStyle,
+} from "~/lib/appearance";
+
+export {
+  colorModeSchema,
+  colorThemeSchema,
+  fallbackAppearance,
+  fontPreferenceSchema,
+  hslChannelsSchema,
+  interfaceThemeSchema,
+  pdfTemplateSchema,
+  radiusPreferenceSchema,
+  sidebarStyleSchema,
+} from "~/lib/appearance";
 
 export const interfaceThemes: {
   value: InterfaceTheme;
@@ -21,7 +40,20 @@ export const interfaceThemes: {
   {
     value: "beenvoice",
     label: "beenvoice",
-    description: "Opinionated brand system with expressive headings.",
+    description:
+      "Playfair Display headings, Geist body text, and soft product chrome.",
+  },
+  {
+    value: "frutiger",
+    label: "Frutiger Airport",
+    description:
+      "Rectangular blue-and-yellow wayfinding UI with Frutiger typography and docked navigation.",
+  },
+  {
+    value: "frutiger-aero",
+    label: "Frutiger Aero",
+    description:
+      "Glossy sky-and-glass interface with Frutiger typography and softer surfaces.",
   },
   {
     value: "shadcn",
@@ -49,6 +81,8 @@ export const themePresets: Record<
     colorTheme: ColorTheme;
     radiusPreference: RadiusPreference;
     sidebarStyle: SidebarStyle;
+    pdfTemplate: PdfTemplate;
+    pdfAccentColor: string;
   }
 > = {
   beenvoice: {
@@ -58,6 +92,28 @@ export const themePresets: Record<
     colorTheme: "slate",
     radiusPreference: "xl",
     sidebarStyle: "floating",
+    pdfTemplate: "classic",
+    pdfAccentColor: "#111827",
+  },
+  frutiger: {
+    interfaceTheme: "frutiger",
+    bodyFontPreference: "frutiger",
+    headingFontPreference: "frutiger",
+    colorTheme: "blue",
+    radiusPreference: "none",
+    sidebarStyle: "docked",
+    pdfTemplate: "minimal",
+    pdfAccentColor: "#003b5c",
+  },
+  "frutiger-aero": {
+    interfaceTheme: "frutiger-aero",
+    bodyFontPreference: "frutiger",
+    headingFontPreference: "frutiger",
+    colorTheme: "blue",
+    radiusPreference: "lg",
+    sidebarStyle: "floating",
+    pdfTemplate: "classic",
+    pdfAccentColor: "#0077be",
   },
   shadcn: {
     interfaceTheme: "shadcn",
@@ -66,6 +122,8 @@ export const themePresets: Record<
     colorTheme: "slate",
     radiusPreference: "md",
     sidebarStyle: "docked",
+    pdfTemplate: "classic",
+    pdfAccentColor: "#111827",
   },
   minimal: {
     interfaceTheme: "minimal",
@@ -74,6 +132,8 @@ export const themePresets: Record<
     colorTheme: "slate",
     radiusPreference: "sm",
     sidebarStyle: "docked",
+    pdfTemplate: "minimal",
+    pdfAccentColor: "#111827",
   },
   editorial: {
     interfaceTheme: "editorial",
@@ -82,36 +142,11 @@ export const themePresets: Record<
     colorTheme: "rose",
     radiusPreference: "lg",
     sidebarStyle: "floating",
+    pdfTemplate: "classic",
+    pdfAccentColor: "#be123c",
   },
 };
 
-export const fontPreferences: {
-  value: FontPreference;
-  label: string;
-  description: string;
-}[] = [
-  {
-    value: "brand",
-    label: "Brand",
-    description: "Inter body with Playfair headings.",
-  },
-  {
-    value: "platform",
-    label: "Platform",
-    description: "Native system fonts for the current OS.",
-  },
-  {
-    value: "inter",
-    label: "Inter",
-    description: "Inter for both body and headings.",
-  },
-  {
-    value: "serif",
-    label: "Editorial",
-    description: "Serif headings with system body text.",
-  },
-];
-
 export const bodyFontPreferences: {
   value: FontPreference;
   label: string;
@@ -119,8 +154,13 @@ export const bodyFontPreferences: {
 }[] = [
   {
     value: "brand",
-    label: "Brand Sans",
-    description: "Inter body text for a clean product feel.",
+    label: "Geist",
+    description: "Geist body text for the core beenvoice product feel.",
+  },
+  {
+    value: "frutiger",
+    label: "Frutiger",
+    description: "Frutiger body text for signage-like operational screens.",
   },
   {
     value: "platform",
@@ -129,8 +169,8 @@ export const bodyFontPreferences: {
   },
   {
     value: "inter",
-    label: "Inter",
-    description: "Inter body text, explicitly selected.",
+    label: "Geist Legacy",
+    description: "Legacy sans option mapped to Geist for older installs.",
   },
   {
     value: "serif",
@@ -146,8 +186,13 @@ export const headingFontPreferences: {
 }[] = [
   {
     value: "brand",
-    label: "Brand Serif",
-    description: "Playfair headings for the BeenVoice identity.",
+    label: "Playfair Display",
+    description: "Playfair Display headings for the beenvoice identity.",
+  },
+  {
+    value: "frutiger",
+    label: "Frutiger",
+    description: "Frutiger headings for airport-inspired wayfinding.",
   },
   {
     value: "platform",
@@ -156,8 +201,8 @@ export const headingFontPreferences: {
   },
   {
     value: "inter",
-    label: "Inter",
-    description: "Inter headings for a plain shadcn-style baseline.",
+    label: "Geist Legacy",
+    description: "Legacy sans option mapped to Geist for older installs.",
   },
   {
     value: "serif",
@@ -222,10 +267,10 @@ export const colorModes: {
 ];
 
 export const defaultInterfaceTheme: InterfaceTheme =
-  env.NEXT_PUBLIC_DEFAULT_INTERFACE_THEME ?? "beenvoice";
+  env.NEXT_PUBLIC_DEFAULT_INTERFACE_THEME ?? fallbackAppearance.interfaceTheme;
 
 export const defaultFontPreference: FontPreference =
-  env.NEXT_PUBLIC_DEFAULT_FONT ?? "brand";
+  env.NEXT_PUBLIC_DEFAULT_FONT ?? fallbackAppearance.fontPreference;
 
 export const defaultBodyFontPreference: FontPreference =
   env.NEXT_PUBLIC_DEFAULT_BODY_FONT ?? defaultFontPreference;
@@ -234,16 +279,14 @@ export const defaultHeadingFontPreference: FontPreference =
   env.NEXT_PUBLIC_DEFAULT_HEADING_FONT ?? defaultFontPreference;
 
 export const defaultRadiusPreference: RadiusPreference =
-  env.NEXT_PUBLIC_DEFAULT_RADIUS ?? "xl";
+  env.NEXT_PUBLIC_DEFAULT_RADIUS ?? fallbackAppearance.radiusPreference;
 
 export const defaultSidebarStyle: SidebarStyle =
-  env.NEXT_PUBLIC_DEFAULT_SIDEBAR_STYLE ?? "floating";
+  env.NEXT_PUBLIC_DEFAULT_SIDEBAR_STYLE ?? fallbackAppearance.sidebarStyle;
 
 export const brand = {
-  name: env.NEXT_PUBLIC_BRAND_NAME ?? "beenvoice",
-  tagline:
-    env.NEXT_PUBLIC_BRAND_TAGLINE ??
-    "Simple and efficient invoicing for freelancers and small businesses",
-  logoText: env.NEXT_PUBLIC_BRAND_LOGO_TEXT ?? "beenvoice",
-  icon: env.NEXT_PUBLIC_BRAND_ICON ?? "$",
+  name: env.NEXT_PUBLIC_BRAND_NAME ?? fallbackAppearance.brandName,
+  tagline: env.NEXT_PUBLIC_BRAND_TAGLINE ?? fallbackAppearance.brandTagline,
+  logoText: env.NEXT_PUBLIC_BRAND_LOGO_TEXT ?? fallbackAppearance.brandLogoText,
+  icon: env.NEXT_PUBLIC_BRAND_ICON ?? fallbackAppearance.brandIcon,
 };

src/lib/color-converter.ts

@@ -0,0 +1,113 @@
+export function hexToRgb(hex: string) {
+  const normalized = normalizeHex(hex).slice(1, 7);
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16),
+  };
+}
+
+export function rgbToHex(r: number, g: number, b: number) {
+  return `#${[r, g, b]
+    .map((channel) => clamp(channel, 0, 255).toString(16).padStart(2, "0"))
+    .join("")}`.toUpperCase();
+}
+
+export function rgbToHsl(r: number, g: number, b: number) {
+  const red = clamp(r, 0, 255) / 255;
+  const green = clamp(g, 0, 255) / 255;
+  const blue = clamp(b, 0, 255) / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const lightness = (max + min) / 2;
+  const delta = max - min;
+
+  if (delta === 0) {
+    return { h: 0, s: 0, l: Math.round(lightness * 100) };
+  }
+
+  const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+  const hue =
+    max === red
+      ? 60 * (((green - blue) / delta) % 6)
+      : max === green
+        ? 60 * ((blue - red) / delta + 2)
+        : 60 * ((red - green) / delta + 4);
+
+  return {
+    h: Math.round((hue + 360) % 360),
+    s: Math.round(saturation * 100),
+    l: Math.round(lightness * 100),
+  };
+}
+
+export function hslToRgb(h: number, s: number, l: number) {
+  const hue = clamp(h, 0, 360);
+  const saturation = clamp(s, 0, 100) / 100;
+  const lightness = clamp(l, 0, 100) / 100;
+  const c = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = lightness - c / 2;
+  const [red, green, blue] =
+    hue < 60
+      ? [c, x, 0]
+      : hue < 120
+        ? [x, c, 0]
+        : hue < 180
+          ? [0, c, x]
+          : hue < 240
+            ? [0, x, c]
+            : hue < 300
+              ? [x, 0, c]
+              : [c, 0, x];
+
+  return {
+    r: Math.round((red + m) * 255),
+    g: Math.round((green + m) * 255),
+    b: Math.round((blue + m) * 255),
+  };
+}
+
+export function hexToRgba(hex: string) {
+  const normalized = normalizeHex(hex, true);
+  const rgb = hexToRgb(normalized);
+  const alphaHex = normalized.length === 9 ? normalized.slice(7, 9) : "ff";
+  return {
+    ...rgb,
+    a: Number((parseInt(alphaHex, 16) / 255).toFixed(2)),
+  };
+}
+
+export function rgbaToHex(r: number, g: number, b: number, a: number) {
+  const alpha = clamp(Math.round(clampAlpha(a) * 255), 0, 255)
+    .toString(16)
+    .padStart(2, "0");
+  return `${rgbToHex(r, g, b)}${alpha}`.toUpperCase();
+}
+
+export function rgbaToHsla(r: number, g: number, b: number, a: number) {
+  return { ...rgbToHsl(r, g, b), a: clampAlpha(a) };
+}
+
+export function hslaToRgba(h: number, s: number, l: number, a: number) {
+  return { ...hslToRgb(h, s, l), a: clampAlpha(a) };
+}
+
+function normalizeHex(hex: string, alpha = false) {
+  const fallback = alpha ? "#FFFFFFff" : "#FFFFFF";
+  const withHash = hex.startsWith("#") ? hex : `#${hex}`;
+  if (/^#[0-9A-Fa-f]{6}$/.test(withHash)) return withHash;
+  if (alpha && /^#[0-9A-Fa-f]{8}$/.test(withHash)) return withHash;
+  return fallback;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(
+    min,
+    Math.min(max, Math.floor(Number.isFinite(value) ? value : min)),
+  );
+}
+
+function clampAlpha(value: number) {
+  return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 1));
+}

src/lib/color-utils.ts

@@ -36,8 +36,9 @@ export function generateAccentColors(hex: string) {
     "--popover": `oklch(1 ${base.c * 0.02} ${base.h})`,
     "--popover-foreground": `oklch(0.1 ${base.c * 0.1} ${base.h})`,
     "--primary": `oklch(0.6 ${base.c} ${base.h})`,
-    "--primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${base.c * 0.2
-      } ${base.h})`,
+    "--primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${
+      base.c * 0.2
+    } ${base.h})`,
     "--secondary": `oklch(0.9 ${base.c * 0.4} ${base.h})`,
     "--secondary-foreground": `oklch(0.1 ${base.c * 0.8} ${base.h})`,
     "--muted": `oklch(0.95 ${base.c * 0.2} ${base.h})`,
@@ -56,8 +57,9 @@ export function generateAccentColors(hex: string) {
     "--sidebar": `oklch(0.98 ${base.c * 0.05} ${base.h})`,
     "--sidebar-foreground": `oklch(0.1 ${base.c * 0.1} ${base.h})`,
     "--sidebar-primary": `oklch(0.6 ${base.c} ${base.h})`,
-    "--sidebar-primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${base.c * 0.2
-      } ${base.h})`,
+    "--sidebar-primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${
+      base.c * 0.2
+    } ${base.h})`,
     "--sidebar-accent": `oklch(0.9 ${base.c * 0.4} ${base.h})`,
     "--sidebar-accent-foreground": `oklch(0.1 ${base.c * 0.8} ${base.h})`,
     "--sidebar-border": `oklch(0.9 ${base.c * 0.3} ${base.h})`,
@@ -75,11 +77,13 @@ export function generateAccentColors(hex: string) {
     "--popover": `oklch(0.17 ${base.c * 0.2} ${base.h})`,
     "--popover-foreground": `oklch(0.95 ${base.c * 0.05} ${base.h})`,
     "--primary": `oklch(0.7 ${base.c} ${base.h})`,
-    "--primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${base.c * 0.2
-      } ${base.h})`,
+    "--primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${
+      base.c * 0.2
+    } ${base.h})`,
     "--secondary": `oklch(0.3 ${base.c * 0.7} ${base.h})`,
-    "--secondary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${base.c * 0.2
-      } ${base.h})`,
+    "--secondary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${
+      base.c * 0.2
+    } ${base.h})`,
     "--muted": `oklch(0.25 ${base.c * 0.3} ${base.h})`,
     "--muted-foreground": `oklch(0.7 ${base.c * 0.2} ${base.h})`,
     "--accent": `oklch(0.3 ${base.c * 0.5} ${base.h})`,
@@ -96,8 +100,9 @@ export function generateAccentColors(hex: string) {
     "--sidebar": `oklch(0.1 ${base.c * 0.1} ${base.h})`,
     "--sidebar-foreground": `oklch(0.95 ${base.c * 0.05} ${base.h})`,
     "--sidebar-primary": `oklch(0.7 ${base.c} ${base.h})`,
-    "--sidebar-primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${base.c * 0.2
-      } ${base.h})`,
+    "--sidebar-primary-foreground": `oklch(${base.l > 0.6 ? 0.1 : 0.98} ${
+      base.c * 0.2
+    } ${base.h})`,
     "--sidebar-accent": `oklch(0.3 ${base.c * 0.7} ${base.h})`,
     "--sidebar-accent-foreground": `oklch(0.95 ${base.c * 0.05} ${base.h})`,
     "--sidebar-border": `oklch(0.28 ${base.c * 0.4} ${base.h})`,

src/lib/gravatar.ts

@@ -1,7 +1,7 @@
 import { createHash } from "crypto";
 
 export function getGravatarUrl(email: string, size = 200) {
-    const trimmedEmail = email.trim().toLowerCase();
-    const hash = createHash("sha256").update(trimmedEmail).digest("hex");
-    return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=mp`;
+  const trimmedEmail = email.trim().toLowerCase();
+  const hash = createHash("sha256").update(trimmedEmail).digest("hex");
+  return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=mp`;
 }

src/lib/navigation.ts

@@ -6,6 +6,7 @@ import {
   Building,
   Receipt,
   BarChart2,
+  Shield,
 } from "lucide-react";
 
 export interface NavLink {
@@ -35,6 +36,11 @@ export const navigationConfig: NavSection[] = [
     title: "Account",
     links: [
       { name: "Settings", href: "/dashboard/settings", icon: Settings },
+      {
+        name: "Administration",
+        href: "/dashboard/administration",
+        icon: Shield,
+      },
     ],
   },
 ];

src/lib/pdf-export.tsx

@@ -54,7 +54,7 @@ function downloadBlob(blob: Blob, filename: string): void {
   }
 }
 
-interface InvoiceData {
+export interface InvoiceData {
   invoiceNumber: string;
   invoicePrefix?: string | null;
   issueDate: Date;
@@ -537,6 +537,170 @@ const styles = StyleSheet.create({
   },
 });
 
+const minimalStyles = StyleSheet.create({
+  page: {
+    fontSize: 9,
+    paddingTop: 28,
+    paddingBottom: 48,
+    paddingHorizontal: 32,
+  },
+  denseHeader: {
+    marginBottom: 16,
+    paddingBottom: 12,
+  },
+  headerTop: {
+    marginBottom: 10,
+  },
+  businessName: {
+    fontSize: 14,
+    marginBottom: 2,
+  },
+  businessInfo: {
+    fontSize: 8,
+    lineHeight: 1.25,
+    marginBottom: 1,
+  },
+  businessAddress: {
+    fontSize: 8,
+    lineHeight: 1.25,
+    marginTop: 2,
+  },
+  invoiceTitle: {
+    fontSize: 18,
+    marginBottom: 3,
+  },
+  invoiceNumber: {
+    fontSize: 10,
+    marginBottom: 2,
+  },
+  statusBadge: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    backgroundColor: "#ffffff",
+    fontSize: 8,
+  },
+  headerSeparator: {
+    marginVertical: 4,
+  },
+  detailsSection: {
+    marginBottom: 10,
+  },
+  detailsColumn: {
+    marginRight: 14,
+  },
+  sectionTitle: {
+    fontSize: 8,
+    marginBottom: 5,
+  },
+  clientName: {
+    fontSize: 9,
+    marginBottom: 1,
+  },
+  clientInfo: {
+    fontSize: 8,
+    lineHeight: 1.25,
+    marginBottom: 1,
+  },
+  clientAddress: {
+    fontSize: 8,
+    lineHeight: 1.25,
+    marginTop: 2,
+  },
+  detailRow: {
+    marginBottom: 2,
+  },
+  detailLabel: {
+    fontSize: 8,
+  },
+  detailValue: {
+    fontSize: 8,
+  },
+  tableContainer: {
+    marginBottom: 10,
+  },
+  tableHeader: {
+    backgroundColor: "#ffffff",
+    paddingVertical: 4,
+    paddingHorizontal: 0,
+  },
+  tableHeaderCell: {
+    fontSize: 8,
+    paddingHorizontal: 2,
+  },
+  tableRow: {
+    paddingVertical: 3,
+    minHeight: 16,
+  },
+  tableCell: {
+    fontSize: 8,
+    paddingHorizontal: 2,
+    paddingVertical: 1,
+  },
+  tableCellDescription: {
+    lineHeight: 1.2,
+    paddingVertical: 1,
+    paddingHorizontal: 2,
+  },
+  bottomSection: {
+    marginTop: 10,
+  },
+  notesContainer: {
+    width: 260,
+  },
+  notesSection: {
+    padding: 0,
+    backgroundColor: "#ffffff",
+  },
+  notesTitle: {
+    fontSize: 8,
+    marginBottom: 4,
+  },
+  notesContent: {
+    fontSize: 8,
+    lineHeight: 1.25,
+  },
+  totalsContainer: {
+    width: 190,
+  },
+  totalsBox: {
+    padding: 0,
+    backgroundColor: "#ffffff",
+  },
+  totalRow: {
+    marginBottom: 2,
+    paddingVertical: 0,
+  },
+  totalLabel: {
+    fontSize: 8,
+  },
+  totalAmount: {
+    fontSize: 8,
+  },
+  finalTotalRow: {
+    marginTop: 5,
+    paddingTop: 5,
+  },
+  finalTotalLabel: {
+    fontSize: 9,
+  },
+  finalTotalAmount: {
+    fontSize: 10,
+  },
+  itemCount: {
+    fontSize: 7,
+    marginTop: 4,
+  },
+  footer: {
+    bottom: 20,
+    left: 32,
+    right: 32,
+    paddingTop: 7,
+  },
+  pageNumber: {
+    fontSize: 8,
+  },
+});
+
 // Helper functions
 const formatCurrency = (amount: number, currency = "USD") => {
   return new Intl.NumberFormat("en-US", {
@@ -602,109 +766,264 @@ function getColumnWidths(showRate: boolean) {
 const DenseHeader: React.FC<{
   invoice: InvoiceData;
   settings: Required<PDFGenerationSettings>;
-}> = ({ invoice, settings }) => (
-  <View style={styles.denseHeader}>
-    <View style={styles.headerTop}>
-      <View style={styles.businessSection}>
-        <Text style={[styles.businessName, { color: settings.pdfAccentColor }]}>
-          {invoice.business?.name ?? "Your Business Name"}
-        </Text>
-        {invoice.business?.email && (
-          <Text style={styles.businessInfo}>{invoice.business.email}</Text>
-        )}
-        {invoice.business?.phone && (
-          <Text style={styles.businessInfo}>{invoice.business.phone}</Text>
-        )}
-        {(invoice.business?.addressLine1 ??
-          invoice.business?.city ??
-          invoice.business?.state) && (
-          <Text style={styles.businessAddress}>
-            {[
-              invoice.business?.addressLine1,
-              invoice.business?.addressLine2,
-              invoice.business?.city &&
-              invoice.business?.state &&
-              invoice.business?.postalCode
-                ? `${invoice.business.city}, ${invoice.business.state} ${invoice.business.postalCode}`
-                : [
-                    invoice.business?.city,
-                    invoice.business?.state,
-                    invoice.business?.postalCode,
-                  ]
-                    .filter(Boolean)
-                    .join(", "),
-              invoice.business?.country,
-            ]
-              .filter(Boolean)
-              .join("\n")}
+}> = ({ invoice, settings }) => {
+  const isMinimal = settings.pdfTemplate === "minimal";
+
+  return (
+    <View
+      style={[styles.denseHeader, isMinimal ? minimalStyles.denseHeader : {}]}
+    >
+      <View
+        style={[styles.headerTop, isMinimal ? minimalStyles.headerTop : {}]}
+      >
+        <View style={styles.businessSection}>
+          <Text
+            style={[
+              styles.businessName,
+              isMinimal ? minimalStyles.businessName : {},
+              { color: settings.pdfAccentColor },
+            ]}
+          >
+            {invoice.business?.name ?? "Your Business Name"}
           </Text>
-        )}
+          {invoice.business?.email && (
+            <Text
+              style={[
+                styles.businessInfo,
+                isMinimal ? minimalStyles.businessInfo : {},
+              ]}
+            >
+              {invoice.business.email}
+            </Text>
+          )}
+          {invoice.business?.phone && (
+            <Text
+              style={[
+                styles.businessInfo,
+                isMinimal ? minimalStyles.businessInfo : {},
+              ]}
+            >
+              {invoice.business.phone}
+            </Text>
+          )}
+          {(invoice.business?.addressLine1 ??
+            invoice.business?.city ??
+            invoice.business?.state) && (
+            <Text
+              style={[
+                styles.businessAddress,
+                isMinimal ? minimalStyles.businessAddress : {},
+              ]}
+            >
+              {[
+                invoice.business?.addressLine1,
+                invoice.business?.addressLine2,
+                invoice.business?.city &&
+                invoice.business?.state &&
+                invoice.business?.postalCode
+                  ? `${invoice.business.city}, ${invoice.business.state} ${invoice.business.postalCode}`
+                  : [
+                      invoice.business?.city,
+                      invoice.business?.state,
+                      invoice.business?.postalCode,
+                    ]
+                      .filter(Boolean)
+                      .join(", "),
+                invoice.business?.country,
+              ]
+                .filter(Boolean)
+                .join("\n")}
+            </Text>
+          )}
+        </View>
+
+        <View style={styles.invoiceSection}>
+          <Text
+            style={[
+              styles.invoiceTitle,
+              isMinimal ? minimalStyles.invoiceTitle : {},
+              { color: settings.pdfAccentColor },
+            ]}
+          >
+            INVOICE
+          </Text>
+          <Text
+            style={[
+              styles.invoiceNumber,
+              isMinimal ? minimalStyles.invoiceNumber : {},
+            ]}
+          >
+            {invoice.invoicePrefix ?? "#"}
+            {invoice.invoiceNumber}
+          </Text>
+          <View
+            style={[
+              ...getStatusStyle(invoice.status),
+              isMinimal ? minimalStyles.statusBadge : {},
+            ]}
+          >
+            <Text>{getStatusLabel(invoice.status)}</Text>
+          </View>
+        </View>
       </View>
 
-      <View style={styles.invoiceSection}>
-        <Text style={[styles.invoiceTitle, { color: settings.pdfAccentColor }]}>
-          INVOICE
-        </Text>
-        <Text style={styles.invoiceNumber}>
-          {invoice.invoicePrefix ?? "#"}
-          {invoice.invoiceNumber}
-        </Text>
-        <View style={getStatusStyle(invoice.status)}>
-          <Text>{getStatusLabel(invoice.status)}</Text>
+      <View
+        style={[
+          styles.headerSeparator,
+          isMinimal ? minimalStyles.headerSeparator : {},
+        ]}
+      />
+
+      <View
+        style={[
+          styles.detailsSection,
+          isMinimal ? minimalStyles.detailsSection : {},
+        ]}
+      >
+        <View
+          style={[
+            styles.detailsColumn,
+            isMinimal ? minimalStyles.detailsColumn : {},
+          ]}
+        >
+          <Text
+            style={[
+              styles.sectionTitle,
+              isMinimal ? minimalStyles.sectionTitle : {},
+            ]}
+          >
+            BILL TO:
+          </Text>
+          <Text
+            style={[
+              styles.clientName,
+              isMinimal ? minimalStyles.clientName : {},
+            ]}
+          >
+            {invoice.client?.name ?? "N/A"}
+          </Text>
+          {invoice.client?.email && (
+            <Text
+              style={[
+                styles.clientInfo,
+                isMinimal ? minimalStyles.clientInfo : {},
+              ]}
+            >
+              {invoice.client.email}
+            </Text>
+          )}
+          {invoice.client?.phone && (
+            <Text
+              style={[
+                styles.clientInfo,
+                isMinimal ? minimalStyles.clientInfo : {},
+              ]}
+            >
+              {invoice.client.phone}
+            </Text>
+          )}
+          {(invoice.client?.addressLine1 ??
+            invoice.client?.city ??
+            invoice.client?.state) && (
+            <Text
+              style={[
+                styles.clientAddress,
+                isMinimal ? minimalStyles.clientAddress : {},
+              ]}
+            >
+              {[
+                invoice.client?.addressLine1,
+                invoice.client?.addressLine2,
+                invoice.client?.city,
+                invoice.client?.state,
+                invoice.client?.postalCode,
+              ]
+                .filter(Boolean)
+                .join(", ")}
+              {invoice.client?.country ? "\n" + invoice.client.country : ""}
+            </Text>
+          )}
+        </View>
+
+        <View
+          style={[
+            styles.detailsColumn,
+            isMinimal ? minimalStyles.detailsColumn : {},
+          ]}
+        >
+          <Text
+            style={[
+              styles.sectionTitle,
+              isMinimal ? minimalStyles.sectionTitle : {},
+            ]}
+          >
+            INVOICE DETAILS:
+          </Text>
+          <View
+            style={[styles.detailRow, isMinimal ? minimalStyles.detailRow : {}]}
+          >
+            <Text
+              style={[
+                styles.detailLabel,
+                isMinimal ? minimalStyles.detailLabel : {},
+              ]}
+            >
+              Issue Date:
+            </Text>
+            <Text
+              style={[
+                styles.detailValue,
+                isMinimal ? minimalStyles.detailValue : {},
+              ]}
+            >
+              {formatDate(invoice.issueDate)}
+            </Text>
+          </View>
+          <View
+            style={[styles.detailRow, isMinimal ? minimalStyles.detailRow : {}]}
+          >
+            <Text
+              style={[
+                styles.detailLabel,
+                isMinimal ? minimalStyles.detailLabel : {},
+              ]}
+            >
+              Due Date:
+            </Text>
+            <Text
+              style={[
+                styles.detailValue,
+                isMinimal ? minimalStyles.detailValue : {},
+              ]}
+            >
+              {formatDate(invoice.dueDate)}
+            </Text>
+          </View>
+          <View
+            style={[styles.detailRow, isMinimal ? minimalStyles.detailRow : {}]}
+          >
+            <Text
+              style={[
+                styles.detailLabel,
+                isMinimal ? minimalStyles.detailLabel : {},
+              ]}
+            >
+              Invoice #:
+            </Text>
+            <Text
+              style={[
+                styles.detailValue,
+                isMinimal ? minimalStyles.detailValue : {},
+              ]}
+            >
+              {invoice.invoiceNumber}
+            </Text>
+          </View>
         </View>
       </View>
     </View>
-
-    <View style={styles.headerSeparator} />
-
-    <View style={styles.detailsSection}>
-      <View style={styles.detailsColumn}>
-        <Text style={styles.sectionTitle}>BILL TO:</Text>
-        <Text style={styles.clientName}>{invoice.client?.name ?? "N/A"}</Text>
-        {invoice.client?.email && (
-          <Text style={styles.clientInfo}>{invoice.client.email}</Text>
-        )}
-        {invoice.client?.phone && (
-          <Text style={styles.clientInfo}>{invoice.client.phone}</Text>
-        )}
-        {(invoice.client?.addressLine1 ??
-          invoice.client?.city ??
-          invoice.client?.state) && (
-          <Text style={styles.clientAddress}>
-            {[
-              invoice.client?.addressLine1,
-              invoice.client?.addressLine2,
-              invoice.client?.city,
-              invoice.client?.state,
-              invoice.client?.postalCode,
-            ]
-              .filter(Boolean)
-              .join(", ")}
-            {invoice.client?.country ? "\n" + invoice.client.country : ""}
-          </Text>
-        )}
-      </View>
-
-      <View style={styles.detailsColumn}>
-        <Text style={styles.sectionTitle}>INVOICE DETAILS:</Text>
-        <View style={styles.detailRow}>
-          <Text style={styles.detailLabel}>Issue Date:</Text>
-          <Text style={styles.detailValue}>
-            {formatDate(invoice.issueDate)}
-          </Text>
-        </View>
-        <View style={styles.detailRow}>
-          <Text style={styles.detailLabel}>Due Date:</Text>
-          <Text style={styles.detailValue}>{formatDate(invoice.dueDate)}</Text>
-        </View>
-        <View style={styles.detailRow}>
-          <Text style={styles.detailLabel}>Invoice #:</Text>
-          <Text style={styles.detailValue}>{invoice.invoiceNumber}</Text>
-        </View>
-      </View>
-    </View>
-  </View>
-);
+  );
+};
 
 // Table header component
 const TableHeader: React.FC<{
@@ -712,22 +1031,33 @@ const TableHeader: React.FC<{
   showRate: boolean;
 }> = ({ settings, showRate }) => {
   const cols = getColumnWidths(showRate);
+  const isMinimal = settings.pdfTemplate === "minimal";
   return (
     <View
-      style={[
-        styles.tableHeader,
-        settings.pdfTemplate === "minimal"
-          ? { backgroundColor: "#ffffff" }
-          : {},
-      ]}
+      style={[styles.tableHeader, isMinimal ? minimalStyles.tableHeader : {}]}
     >
-      <Text style={[styles.tableHeaderCell, { width: cols.date }]}>Date</Text>
-      <Text style={[styles.tableHeaderCell, { width: cols.description }]}>
+      <Text
+        style={[
+          styles.tableHeaderCell,
+          isMinimal ? minimalStyles.tableHeaderCell : {},
+          { width: cols.date },
+        ]}
+      >
+        Date
+      </Text>
+      <Text
+        style={[
+          styles.tableHeaderCell,
+          isMinimal ? minimalStyles.tableHeaderCell : {},
+          { width: cols.description },
+        ]}
+      >
         Description
       </Text>
       <Text
         style={[
           styles.tableHeaderCell,
+          isMinimal ? minimalStyles.tableHeaderCell : {},
           styles.tableHeaderHours,
           { width: cols.hours },
         ]}
@@ -738,6 +1068,7 @@ const TableHeader: React.FC<{
         <Text
           style={[
             styles.tableHeaderCell,
+            isMinimal ? minimalStyles.tableHeaderCell : {},
             styles.tableHeaderRate,
             { width: cols.rate },
           ]}
@@ -748,6 +1079,7 @@ const TableHeader: React.FC<{
       <Text
         style={[
           styles.tableHeaderCell,
+          isMinimal ? minimalStyles.tableHeaderCell : {},
           styles.tableHeaderAmount,
           { width: cols.amount },
         ]}
@@ -759,14 +1091,39 @@ const TableHeader: React.FC<{
 };
 
 // Footer component
-const NotesSection: React.FC<{ invoice: InvoiceData }> = ({ invoice }) => {
+const NotesSection: React.FC<{
+  invoice: InvoiceData;
+  settings: Required<PDFGenerationSettings>;
+}> = ({ invoice, settings }) => {
   if (!invoice.notes) return null;
+  const isMinimal = settings.pdfTemplate === "minimal";
 
   return (
-    <View style={styles.notesContainer}>
-      <View style={styles.notesSection}>
-        <Text style={styles.notesTitle}>NOTES</Text>
-        <Text style={styles.notesContent}>{invoice.notes}</Text>
+    <View
+      style={[
+        styles.notesContainer,
+        isMinimal ? minimalStyles.notesContainer : {},
+      ]}
+    >
+      <View
+        style={[
+          styles.notesSection,
+          isMinimal ? minimalStyles.notesSection : {},
+        ]}
+      >
+        <Text
+          style={[styles.notesTitle, isMinimal ? minimalStyles.notesTitle : {}]}
+        >
+          NOTES
+        </Text>
+        <Text
+          style={[
+            styles.notesContent,
+            isMinimal ? minimalStyles.notesContent : {},
+          ]}
+        >
+          {invoice.notes}
+        </Text>
       </View>
     </View>
   );
@@ -774,40 +1131,45 @@ const NotesSection: React.FC<{ invoice: InvoiceData }> = ({ invoice }) => {
 
 const Footer: React.FC<{ settings: Required<PDFGenerationSettings> }> = ({
   settings,
-}) => (
-  <View style={styles.footer} fixed>
-    <View style={styles.footerLogo}>
-      {settings.pdfShowLogo && (
-        <Image
-          src="/beenvoice-logo.png"
+}) => {
+  const isMinimal = settings.pdfTemplate === "minimal";
+
+  return (
+    <View style={[styles.footer, isMinimal ? minimalStyles.footer : {}]} fixed>
+      <View style={styles.footerLogo}>
+        {settings.pdfShowLogo && (
+          // eslint-disable-next-line jsx-a11y/alt-text -- @react-pdf/renderer Image does not support alt.
+          <Image
+            src="/beenvoice-logo.png"
+            style={{
+              width: 120,
+              height: 18,
+              marginRight: 8,
+            }}
+          />
+        )}
+        <Text
           style={{
-            width: 120,
-            height: 18,
-            marginRight: 8,
+            fontSize: isMinimal ? 8 : 9,
+            fontFamily: "Helvetica",
+            color: "#6b7280",
+            marginLeft: settings.pdfShowLogo ? 8 : 0,
           }}
+        >
+          {settings.pdfFooterText}
+        </Text>
+      </View>
+      {settings.pdfShowPageNumbers && (
+        <Text
+          style={[styles.pageNumber, isMinimal ? minimalStyles.pageNumber : {}]}
+          render={({ pageNumber, totalPages }) =>
+            `Page ${pageNumber} of ${totalPages}`
+          }
         />
       )}
-      <Text
-        style={{
-          fontSize: 9,
-          fontFamily: "Helvetica",
-          color: "#6b7280",
-          marginLeft: settings.pdfShowLogo ? 8 : 0,
-        }}
-      >
-        {settings.pdfFooterText}
-      </Text>
     </View>
-    {settings.pdfShowPageNumbers && (
-      <Text
-        style={styles.pageNumber}
-        render={({ pageNumber, totalPages }) =>
-          `Page ${pageNumber} of ${totalPages}`
-        }
-      />
-    )}
-  </View>
-);
+  );
+};
 
 // Enhanced totals section component
 const TotalsSection: React.FC<{
@@ -819,14 +1181,21 @@ const TotalsSection: React.FC<{
   const subtotal = items.reduce((sum, item) => sum + (item?.amount ?? 0), 0);
   const taxAmount = (subtotal * invoice.taxRate) / 100;
   const total = subtotal + taxAmount;
+  const isMinimal = settings.pdfTemplate === "minimal";
 
   return (
-    <View style={styles.totalsContainer}>
+    <View
+      style={[
+        styles.totalsContainer,
+        isMinimal ? minimalStyles.totalsContainer : {},
+      ]}
+    >
       <View
         style={[
           styles.totalsBox,
-          settings.pdfTemplate === "minimal"
+          isMinimal
             ? {
+                ...minimalStyles.totalsBox,
                 backgroundColor: "#ffffff",
                 borderTop: "1px solid #e5e7eb",
                 paddingHorizontal: 0,
@@ -836,38 +1205,79 @@ const TotalsSection: React.FC<{
       >
         <Text
           style={{
-            fontSize: 11,
+            fontSize: isMinimal ? 8 : 11,
             fontFamily: "Helvetica-Bold",
             color: "#0f0f0f",
-            textAlign: "center",
-            marginBottom: 8,
-            paddingBottom: 6,
+            textAlign: isMinimal ? "left" : "center",
+            marginBottom: isMinimal ? 5 : 8,
+            paddingBottom: isMinimal ? 3 : 6,
           }}
         >
           INVOICE SUMMARY
         </Text>
 
-        <View style={styles.totalRow}>
-          <Text style={styles.totalLabel}>Subtotal:</Text>
-          <Text style={styles.totalAmount}>
+        <View
+          style={[styles.totalRow, isMinimal ? minimalStyles.totalRow : {}]}
+        >
+          <Text
+            style={[
+              styles.totalLabel,
+              isMinimal ? minimalStyles.totalLabel : {},
+            ]}
+          >
+            Subtotal:
+          </Text>
+          <Text
+            style={[
+              styles.totalAmount,
+              isMinimal ? minimalStyles.totalAmount : {},
+            ]}
+          >
             {formatCurrency(subtotal, currency)}
           </Text>
         </View>
 
         {invoice.taxRate > 0 && (
-          <View style={styles.totalRow}>
-            <Text style={styles.totalLabel}>Tax ({invoice.taxRate}%):</Text>
-            <Text style={styles.totalAmount}>
+          <View
+            style={[styles.totalRow, isMinimal ? minimalStyles.totalRow : {}]}
+          >
+            <Text
+              style={[
+                styles.totalLabel,
+                isMinimal ? minimalStyles.totalLabel : {},
+              ]}
+            >
+              Tax ({invoice.taxRate}%):
+            </Text>
+            <Text
+              style={[
+                styles.totalAmount,
+                isMinimal ? minimalStyles.totalAmount : {},
+              ]}
+            >
               {formatCurrency(taxAmount, currency)}
             </Text>
           </View>
         )}
 
-        <View style={styles.finalTotalRow}>
-          <Text style={styles.finalTotalLabel}>TOTAL:</Text>
+        <View
+          style={[
+            styles.finalTotalRow,
+            isMinimal ? minimalStyles.finalTotalRow : {},
+          ]}
+        >
+          <Text
+            style={[
+              styles.finalTotalLabel,
+              isMinimal ? minimalStyles.finalTotalLabel : {},
+            ]}
+          >
+            TOTAL:
+          </Text>
           <Text
             style={[
               styles.finalTotalAmount,
+              isMinimal ? minimalStyles.finalTotalAmount : {},
               { color: settings.pdfAccentColor },
             ]}
           >
@@ -875,7 +1285,9 @@ const TotalsSection: React.FC<{
           </Text>
         </View>
 
-        <Text style={styles.itemCount}>
+        <Text
+          style={[styles.itemCount, isMinimal ? minimalStyles.itemCount : {}]}
+        >
           {items.length} line item{items.length !== 1 ? "s" : ""}
         </Text>
       </View>
@@ -893,14 +1305,23 @@ export const InvoicePDF: React.FC<{
   const currency = invoice.currency ?? "USD";
   const showRate = new Set(items.map((item) => item?.rate)).size > 1;
   const cols = getColumnWidths(showRate);
+  const isMinimal = settings.pdfTemplate === "minimal";
 
   return (
     <Document>
-      <Page size="LETTER" style={styles.page}>
+      <Page
+        size="LETTER"
+        style={[styles.page, isMinimal ? minimalStyles.page : {}]}
+      >
         <DenseHeader invoice={invoice} settings={settings} />
 
         {items.length > 0 && (
-          <View style={styles.tableContainer}>
+          <View
+            style={[
+              styles.tableContainer,
+              isMinimal ? minimalStyles.tableContainer : {},
+            ]}
+          >
             <TableHeader settings={settings} showRate={showRate} />
             {items.map(
               (item, index) =>
@@ -910,6 +1331,7 @@ export const InvoicePDF: React.FC<{
                     wrap={false}
                     style={[
                       styles.tableRow,
+                      isMinimal ? minimalStyles.tableRow : {},
                       settings.pdfTemplate === "classic" && index % 2 === 0
                         ? styles.tableRowAlt
                         : {},
@@ -918,6 +1340,7 @@ export const InvoicePDF: React.FC<{
                     <Text
                       style={[
                         styles.tableCell,
+                        isMinimal ? minimalStyles.tableCell : {},
                         styles.tableCellDate,
                         { width: cols.date },
                       ]}
@@ -927,7 +1350,9 @@ export const InvoicePDF: React.FC<{
                     <Text
                       style={[
                         styles.tableCell,
+                        isMinimal ? minimalStyles.tableCell : {},
                         styles.tableCellDescription,
+                        isMinimal ? minimalStyles.tableCellDescription : {},
                         { width: cols.description },
                       ]}
                     >
@@ -936,6 +1361,7 @@ export const InvoicePDF: React.FC<{
                     <Text
                       style={[
                         styles.tableCell,
+                        isMinimal ? minimalStyles.tableCell : {},
                         styles.tableCellHours,
                         { width: cols.hours },
                       ]}
@@ -946,6 +1372,7 @@ export const InvoicePDF: React.FC<{
                       <Text
                         style={[
                           styles.tableCell,
+                          isMinimal ? minimalStyles.tableCell : {},
                           styles.tableCellRate,
                           { width: cols.rate },
                         ]}
@@ -956,6 +1383,7 @@ export const InvoicePDF: React.FC<{
                     <Text
                       style={[
                         styles.tableCell,
+                        isMinimal ? minimalStyles.tableCell : {},
                         styles.tableCellAmount,
                         { width: cols.amount },
                       ]}
@@ -968,8 +1396,16 @@ export const InvoicePDF: React.FC<{
           </View>
         )}
 
-        <View style={styles.bottomSection} wrap={false}>
-          {invoice.notes && <NotesSection invoice={invoice} />}
+        <View
+          style={[
+            styles.bottomSection,
+            isMinimal ? minimalStyles.bottomSection : {},
+          ]}
+          wrap={false}
+        >
+          {invoice.notes && (
+            <NotesSection invoice={invoice} settings={settings} />
+          )}
           <TotalsSection invoice={invoice} items={items} settings={settings} />
         </View>
 

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

src/proxy.ts

@@ -4,6 +4,12 @@ import type { NextRequest } from "next/server";
 export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
+  if (pathname === "/auth/register" && process.env.DISABLE_SIGNUPS === "true") {
+    const signInUrl = new URL("/auth/signin", request.url);
+    signInUrl.searchParams.set("signup", "disabled");
+    return NextResponse.redirect(signInUrl);
+  }
+
   // Define public routes that don't require authentication
   const publicRoutes = ["/", "/auth/signin", "/auth/register"];
 

src/server/api/routers/dashboard.ts

@@ -3,123 +3,128 @@ import { invoices, clients } from "~/server/db/schema";
 import { eq, desc } from "drizzle-orm";
 
 export const dashboardRouter = createTRPCRouter({
-    getStats: protectedProcedure.query(async ({ ctx }) => {
-        const userId = ctx.session.user.id;
-        const now = new Date();
-        const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
-        const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  getStats: protectedProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+    const now = new Date();
+    const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+    const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
 
-        // 1. Fetch all invoices for the user to calculate stats
-        // Note: For very large datasets, we should use separate count/sum queries,
-        // but for typical usage, fetching fields is fine and allows flexible JS calculation
-        // where SQL complexity might be high (e.g. dynamic status).
-        // However, let's try to be efficient with SQL where possible.
+    // 1. Fetch all invoices for the user to calculate stats
+    // Note: For very large datasets, we should use separate count/sum queries,
+    // but for typical usage, fetching fields is fine and allows flexible JS calculation
+    // where SQL complexity might be high (e.g. dynamic status).
+    // However, let's try to be efficient with SQL where possible.
 
-        const userInvoices = await ctx.db.query.invoices.findMany({
-            where: eq(invoices.createdById, userId),
-            columns: {
-                id: true,
-                totalAmount: true,
-                status: true,
-                dueDate: true,
-                issueDate: true,
-            },
-        });
+    const userInvoices = await ctx.db.query.invoices.findMany({
+      where: eq(invoices.createdById, userId),
+      columns: {
+        id: true,
+        totalAmount: true,
+        status: true,
+        dueDate: true,
+        issueDate: true,
+      },
+    });
 
-        const userClientsCount = await ctx.db.$count(
-            clients,
-            eq(clients.createdById, userId),
-        );
+    const userClientsCount = await ctx.db.$count(
+      clients,
+      eq(clients.createdById, userId),
+    );
 
-        // Helper to check status
-        const getStatus = (inv: typeof userInvoices[0]) => {
-            if (inv.status === "paid") return "paid";
-            if (inv.status === "draft") return "draft";
-            if (new Date(inv.dueDate) < now && inv.status !== "paid") return "overdue";
-            return "sent";
-        };
+    // Helper to check status
+    const getStatus = (inv: (typeof userInvoices)[0]) => {
+      if (inv.status === "paid") return "paid";
+      if (inv.status === "draft") return "draft";
+      if (new Date(inv.dueDate) < now && inv.status !== "paid")
+        return "overdue";
+      return "sent";
+    };
 
-        // Calculate Stats
-        let totalRevenue = 0;
-        let pendingAmount = 0;
-        let overdueCount = 0;
+    // Calculate Stats
+    let totalRevenue = 0;
+    let pendingAmount = 0;
+    let overdueCount = 0;
 
-        let currentMonthRevenue = 0;
-        let lastMonthRevenue = 0;
+    let currentMonthRevenue = 0;
+    let lastMonthRevenue = 0;
 
-        for (const inv of userInvoices) {
-            const status = getStatus(inv);
-            const amount = inv.totalAmount;
-            const issueDate = new Date(inv.issueDate);
+    for (const inv of userInvoices) {
+      const status = getStatus(inv);
+      const amount = inv.totalAmount;
+      const issueDate = new Date(inv.issueDate);
 
-            if (status === "paid") {
-                totalRevenue += amount;
+      if (status === "paid") {
+        totalRevenue += amount;
 
-                if (issueDate >= currentMonthStart) {
-                    currentMonthRevenue += amount;
-                } else if (issueDate >= lastMonthStart && issueDate < currentMonthStart) {
-                    lastMonthRevenue += amount;
-                }
-            } else if (status === "sent" || status === "overdue") {
-                pendingAmount += amount;
-            }
-
-            if (status === "overdue") {
-                overdueCount++;
-            }
+        if (issueDate >= currentMonthStart) {
+          currentMonthRevenue += amount;
+        } else if (
+          issueDate >= lastMonthStart &&
+          issueDate < currentMonthStart
+        ) {
+          lastMonthRevenue += amount;
         }
+      } else if (status === "sent" || status === "overdue") {
+        pendingAmount += amount;
+      }
 
-        // Revenue Trend (Last 6 months)
-        const revenueByMonth: Record<string, number> = {};
-        for (let i = 0; i < 6; i++) {
-            const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-            const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
-            revenueByMonth[key] = 0;
+      if (status === "overdue") {
+        overdueCount++;
+      }
+    }
+
+    // Revenue Trend (Last 6 months)
+    const revenueByMonth: Record<string, number> = {};
+    for (let i = 0; i < 6; i++) {
+      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+      revenueByMonth[key] = 0;
+    }
+
+    for (const inv of userInvoices) {
+      if (getStatus(inv) === "paid") {
+        const d = new Date(inv.issueDate);
+        const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+        if (revenueByMonth[key] !== undefined) {
+          revenueByMonth[key] += inv.totalAmount;
         }
+      }
+    }
 
-        for (const inv of userInvoices) {
-            if (getStatus(inv) === "paid") {
-                const d = new Date(inv.issueDate);
-                const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
-                if (revenueByMonth[key] !== undefined) {
-                    revenueByMonth[key] += inv.totalAmount;
-                }
-            }
-        }
+    const revenueChartData = Object.entries(revenueByMonth)
+      .map(([month, revenue]) => ({
+        month,
+        revenue,
+        monthLabel: new Date(month + "-01").toLocaleDateString("en-US", {
+          month: "short",
+          year: "2-digit",
+        }),
+      }))
+      .sort((a, b) => a.month.localeCompare(b.month));
 
-        const revenueChartData = Object.entries(revenueByMonth)
-            .map(([month, revenue]) => ({
-                month,
-                revenue,
-                monthLabel: new Date(month + "-01").toLocaleDateString("en-US", {
-                    month: "short",
-                    year: "2-digit",
-                }),
-            }))
-            .sort((a, b) => a.month.localeCompare(b.month));
+    // Recent Activity
+    const recentInvoices = await ctx.db.query.invoices.findMany({
+      where: eq(invoices.createdById, userId),
+      orderBy: [desc(invoices.issueDate)],
+      limit: 5,
+      with: {
+        client: {
+          columns: { name: true },
+        },
+      },
+    });
 
-        // Recent Activity
-        const recentInvoices = await ctx.db.query.invoices.findMany({
-            where: eq(invoices.createdById, userId),
-            orderBy: [desc(invoices.issueDate)],
-            limit: 5,
-            with: {
-                client: {
-                    columns: { name: true },
-                },
-            },
-        });
-
-        return {
-            totalRevenue,
-            pendingAmount,
-            overdueCount,
-            totalClients: userClientsCount,
-            revenueChange: lastMonthRevenue > 0
-                ? ((currentMonthRevenue - lastMonthRevenue) / lastMonthRevenue) * 100
-                : 0,
-            revenueChartData,
-            recentInvoices,
-        };
-    }),
+    return {
+      totalRevenue,
+      pendingAmount,
+      overdueCount,
+      totalClients: userClientsCount,
+      revenueChange:
+        lastMonthRevenue > 0
+          ? ((currentMonthRevenue - lastMonthRevenue) / lastMonthRevenue) * 100
+          : 0,
+      revenueChartData,
+      recentInvoices,
+    };
+  }),
 });

src/server/api/routers/expenses.ts

@@ -47,7 +47,10 @@ export const expensesRouter = createTRPCRouter({
       });
 
       if (!expense) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Expense not found" });
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Expense not found",
+        });
       }
 
       return expense;
@@ -58,11 +61,11 @@ export const expensesRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       const clean = {
         ...input,
-        clientId: input.clientId?.trim() || null,
-        businessId: input.businessId?.trim() || null,
-        invoiceId: input.invoiceId?.trim() || null,
-        category: input.category?.trim() || null,
-        notes: input.notes?.trim() || null,
+        clientId: input.clientId?.trim() ?? null,
+        businessId: input.businessId?.trim() ?? null,
+        invoiceId: input.invoiceId?.trim() ?? null,
+        category: input.category?.trim() ?? null,
+        notes: input.notes?.trim() ?? null,
       };
 
       if (clean.clientId) {
@@ -72,7 +75,11 @@ export const expensesRouter = createTRPCRouter({
             eq(clients.createdById, ctx.session.user.id),
           ),
         });
-        if (!client) throw new TRPCError({ code: "FORBIDDEN", message: "Client not found" });
+        if (!client)
+          throw new TRPCError({
+            code: "FORBIDDEN",
+            message: "Client not found",
+          });
       }
 
       if (clean.businessId) {
@@ -82,7 +89,11 @@ export const expensesRouter = createTRPCRouter({
             eq(businesses.createdById, ctx.session.user.id),
           ),
         });
-        if (!business) throw new TRPCError({ code: "FORBIDDEN", message: "Business not found" });
+        if (!business)
+          throw new TRPCError({
+            code: "FORBIDDEN",
+            message: "Business not found",
+          });
       }
 
       if (clean.invoiceId) {
@@ -92,7 +103,11 @@ export const expensesRouter = createTRPCRouter({
             eq(invoices.createdById, ctx.session.user.id),
           ),
         });
-        if (!invoice) throw new TRPCError({ code: "FORBIDDEN", message: "Invoice not found" });
+        if (!invoice)
+          throw new TRPCError({
+            code: "FORBIDDEN",
+            message: "Invoice not found",
+          });
       }
 
       const [expense] = await ctx.db
@@ -116,16 +131,19 @@ export const expensesRouter = createTRPCRouter({
       });
 
       if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Expense not found" });
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Expense not found",
+        });
       }
 
       const clean = {
         ...data,
-        clientId: data.clientId?.trim() || null,
-        businessId: data.businessId?.trim() || null,
-        invoiceId: data.invoiceId?.trim() || null,
-        category: data.category?.trim() || null,
-        notes: data.notes?.trim() || null,
+        clientId: data.clientId?.trim() ?? null,
+        businessId: data.businessId?.trim() ?? null,
+        invoiceId: data.invoiceId?.trim() ?? null,
+        category: data.category?.trim() ?? null,
+        notes: data.notes?.trim() ?? null,
         updatedAt: new Date(),
       };
 
@@ -145,7 +163,10 @@ export const expensesRouter = createTRPCRouter({
       });
 
       if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Expense not found" });
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Expense not found",
+        });
       }
 
       await ctx.db.delete(expenses).where(eq(expenses.id, input.id));

src/server/api/routers/invoiceTemplates.ts

@@ -72,7 +72,10 @@ export const invoiceTemplatesRouter = createTRPCRouter({
       });
 
       if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Template not found" });
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Template not found",
+        });
       }
 
       // If setting as default, unset others of same type
@@ -108,7 +111,10 @@ export const invoiceTemplatesRouter = createTRPCRouter({
       });
 
       if (!existing) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "Template not found" });
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Template not found",
+        });
       }
 
       await ctx.db

src/server/api/routers/settings.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import { TRPCError } from "@trpc/server";
 import bcrypt from "bcryptjs";
 import {
@@ -8,6 +8,7 @@ import {
   publicProcedure,
 } from "~/server/api/trpc";
 import {
+  accounts,
   users,
   clients,
   businesses,
@@ -16,12 +17,20 @@ import {
   platformSettings,
 } from "~/server/db/schema";
 import {
+  colorModeSchema,
+  colorThemeSchema,
   defaultBodyFontPreference,
-  defaultFontPreference,
   defaultHeadingFontPreference,
   defaultInterfaceTheme,
   defaultRadiusPreference,
   defaultSidebarStyle,
+  fallbackAppearance,
+  fontPreferenceSchema,
+  hslChannelsSchema,
+  interfaceThemeSchema,
+  pdfTemplateSchema,
+  radiusPreferenceSchema,
+  sidebarStyleSchema,
   type ColorMode,
   type ColorTheme,
   type FontPreference,
@@ -29,9 +38,10 @@ import {
   type RadiusPreference,
   type SidebarStyle,
 } from "~/lib/branding";
+import type { db as database } from "~/server/db";
 
 async function requireAdmin(ctx: {
-  db: typeof import("~/server/db").db;
+  db: typeof database;
   session: { user: { id: string } };
 }) {
   const user = await ctx.db.query.users.findFirst({
@@ -217,12 +227,12 @@ export const settingsRouter = createTRPCRouter({
     });
 
     return {
-      colorTheme: (settings?.colorTheme as ColorTheme) ?? "slate",
+      colorTheme:
+        (settings?.colorTheme as ColorTheme) ?? fallbackAppearance.colorTheme,
       customColor: settings?.customColor ?? undefined,
-      theme: (settings?.theme as ColorMode) ?? "system",
+      theme: (settings?.theme as ColorMode) ?? fallbackAppearance.colorMode,
       interfaceTheme:
         (settings?.interfaceTheme as InterfaceTheme) ?? defaultInterfaceTheme,
-      fontPreference: defaultFontPreference,
       bodyFontPreference:
         (settings?.bodyFontPreference as FontPreference) ??
         defaultBodyFontPreference,
@@ -234,18 +244,21 @@ export const settingsRouter = createTRPCRouter({
         defaultRadiusPreference,
       sidebarStyle:
         (settings?.sidebarStyle as SidebarStyle) ?? defaultSidebarStyle,
-      brandName: settings?.brandName ?? "beenvoice",
-      brandTagline:
-        settings?.brandTagline ??
-        "Simple and efficient invoicing for freelancers and small businesses",
-      brandLogoText: settings?.brandLogoText ?? "beenvoice",
-      brandIcon: settings?.brandIcon ?? "$",
+      brandName: settings?.brandName ?? fallbackAppearance.brandName,
+      brandTagline: settings?.brandTagline ?? fallbackAppearance.brandTagline,
+      brandLogoText:
+        settings?.brandLogoText ?? fallbackAppearance.brandLogoText,
+      brandIcon: settings?.brandIcon ?? fallbackAppearance.brandIcon,
       pdfTemplate:
-        (settings?.pdfTemplate as "classic" | "minimal") ?? "classic",
-      pdfAccentColor: settings?.pdfAccentColor ?? "#111827",
-      pdfFooterText: settings?.pdfFooterText ?? "Professional Invoicing",
-      pdfShowLogo: settings?.pdfShowLogo ?? true,
-      pdfShowPageNumbers: settings?.pdfShowPageNumbers ?? true,
+        (settings?.pdfTemplate as "classic" | "minimal") ??
+        fallbackAppearance.pdfTemplate,
+      pdfAccentColor:
+        settings?.pdfAccentColor ?? fallbackAppearance.pdfAccentColor,
+      pdfFooterText:
+        settings?.pdfFooterText ?? fallbackAppearance.pdfFooterText,
+      pdfShowLogo: settings?.pdfShowLogo ?? fallbackAppearance.pdfShowLogo,
+      pdfShowPageNumbers:
+        settings?.pdfShowPageNumbers ?? fallbackAppearance.pdfShowPageNumbers,
     };
   }),
 
@@ -253,30 +266,19 @@ export const settingsRouter = createTRPCRouter({
   updateTheme: protectedProcedure
     .input(
       z.object({
-        colorTheme: z
-          .enum(["slate", "blue", "green", "rose", "orange", "custom"])
-          .optional(),
-        customColor: z.string().optional(),
-        theme: z.enum(["light", "dark", "system"]).optional(),
-        interfaceTheme: z
-          .enum(["beenvoice", "shadcn", "minimal", "editorial"])
-          .optional(),
-        fontPreference: z
-          .enum(["brand", "platform", "inter", "serif"])
-          .optional(),
-        bodyFontPreference: z
-          .enum(["brand", "platform", "inter", "serif"])
-          .optional(),
-        headingFontPreference: z
-          .enum(["brand", "platform", "inter", "serif"])
-          .optional(),
-        radiusPreference: z.enum(["none", "sm", "md", "lg", "xl"]).optional(),
-        sidebarStyle: z.enum(["floating", "docked"]).optional(),
+        colorTheme: colorThemeSchema.optional(),
+        customColor: hslChannelsSchema.optional(),
+        theme: colorModeSchema.optional(),
+        interfaceTheme: interfaceThemeSchema.optional(),
+        bodyFontPreference: fontPreferenceSchema.optional(),
+        headingFontPreference: fontPreferenceSchema.optional(),
+        radiusPreference: radiusPreferenceSchema.optional(),
+        sidebarStyle: sidebarStyleSchema.optional(),
         brandName: z.string().min(1).max(100).optional(),
         brandTagline: z.string().min(1).max(255).optional(),
         brandLogoText: z.string().min(1).max(100).optional(),
         brandIcon: z.string().min(1).max(20).optional(),
-        pdfTemplate: z.enum(["classic", "minimal"]).optional(),
+        pdfTemplate: pdfTemplateSchema.optional(),
         pdfAccentColor: z.string().min(4).max(50).optional(),
         pdfFooterText: z.string().min(1).max(120).optional(),
         pdfShowLogo: z.boolean().optional(),
@@ -289,15 +291,14 @@ export const settingsRouter = createTRPCRouter({
         .insert(platformSettings)
         .values({
           id: "global",
-          brandName: input.brandName ?? "beenvoice",
-          brandTagline:
-            input.brandTagline ??
-            "Simple and efficient invoicing for freelancers and small businesses",
-          brandLogoText: input.brandLogoText ?? "beenvoice",
-          brandIcon: input.brandIcon ?? "$",
-          colorTheme: input.colorTheme ?? "slate",
+          brandName: input.brandName ?? fallbackAppearance.brandName,
+          brandTagline: input.brandTagline ?? fallbackAppearance.brandTagline,
+          brandLogoText:
+            input.brandLogoText ?? fallbackAppearance.brandLogoText,
+          brandIcon: input.brandIcon ?? fallbackAppearance.brandIcon,
+          colorTheme: input.colorTheme ?? fallbackAppearance.colorTheme,
           customColor: input.customColor,
-          theme: input.theme ?? "system",
+          theme: input.theme ?? fallbackAppearance.colorMode,
           interfaceTheme: input.interfaceTheme ?? defaultInterfaceTheme,
           bodyFontPreference:
             input.bodyFontPreference ?? defaultBodyFontPreference,
@@ -305,11 +306,14 @@ export const settingsRouter = createTRPCRouter({
             input.headingFontPreference ?? defaultHeadingFontPreference,
           radiusPreference: input.radiusPreference ?? defaultRadiusPreference,
           sidebarStyle: input.sidebarStyle ?? defaultSidebarStyle,
-          pdfTemplate: input.pdfTemplate ?? "classic",
-          pdfAccentColor: input.pdfAccentColor ?? "#111827",
-          pdfFooterText: input.pdfFooterText ?? "Professional Invoicing",
-          pdfShowLogo: input.pdfShowLogo ?? true,
-          pdfShowPageNumbers: input.pdfShowPageNumbers ?? true,
+          pdfTemplate: input.pdfTemplate ?? fallbackAppearance.pdfTemplate,
+          pdfAccentColor:
+            input.pdfAccentColor ?? fallbackAppearance.pdfAccentColor,
+          pdfFooterText:
+            input.pdfFooterText ?? fallbackAppearance.pdfFooterText,
+          pdfShowLogo: input.pdfShowLogo ?? fallbackAppearance.pdfShowLogo,
+          pdfShowPageNumbers:
+            input.pdfShowPageNumbers ?? fallbackAppearance.pdfShowPageNumbers,
         })
         .onConflictDoUpdate({
           target: platformSettings.id,
@@ -425,13 +429,38 @@ export const settingsRouter = createTRPCRouter({
         saltRounds,
       );
 
-      // Update the password
-      await ctx.db
-        .update(users)
-        .set({
-          password: hashedNewPassword,
-        })
-        .where(eq(users.id, userId));
+      await ctx.db.transaction(async (tx) => {
+        await tx
+          .update(users)
+          .set({
+            password: hashedNewPassword,
+          })
+          .where(eq(users.id, userId));
+
+        const credentialAccount = await tx.query.accounts.findFirst({
+          where: and(
+            eq(accounts.userId, userId),
+            eq(accounts.providerId, "credential"),
+          ),
+        });
+
+        if (credentialAccount) {
+          await tx
+            .update(accounts)
+            .set({
+              password: hashedNewPassword,
+              updatedAt: new Date(),
+            })
+            .where(eq(accounts.id, credentialAccount.id));
+        } else {
+          await tx.insert(accounts).values({
+            userId,
+            accountId: userId,
+            providerId: "credential",
+            password: hashedNewPassword,
+          });
+        }
+      });
 
       return { success: true };
     }),

src/server/umami.ts

@@ -1,65 +1,65 @@
 import { env } from "~/env";
 
 type UmamiPayload = {
-    payload: {
-        hostname: string;
-        language: string;
-        referrer: string;
-        screen: string;
-        title: string;
-        url: string;
-        website: string;
-        name: string;
-        data?: Record<string, unknown>;
-    };
-    type: "event";
+  payload: {
+    hostname: string;
+    language: string;
+    referrer: string;
+    screen: string;
+    title: string;
+    url: string;
+    website: string;
+    name: string;
+    data?: Record<string, unknown>;
+  };
+  type: "event";
 };
 
 export async function trackServerEvent(
-    eventName: string,
-    eventData?: Record<string, unknown>,
+  eventName: string,
+  eventData?: Record<string, unknown>,
 ) {
-    if (!env.NEXT_PUBLIC_UMAMI_WEBSITE_ID || !env.NEXT_PUBLIC_UMAMI_SCRIPT_URL) {
-        console.warn("Umami not configured, skipping server-side event tracking");
-        return;
-    }
-
-    // Extract API endpoint from script URL (e.g., https://analytics.umami.is/script.js -> https://analytics.umami.is/api/send)
-    const scriptUrl = new URL(env.NEXT_PUBLIC_UMAMI_SCRIPT_URL);
-    const apiUrl = `${scriptUrl.origin}/api/send`;
-
-    const payload: UmamiPayload = {
-        payload: {
-            hostname: env.NEXT_PUBLIC_APP_URL
-                ? new URL(env.NEXT_PUBLIC_APP_URL).hostname
-                : "localhost",
-            language: "en-US",
-            referrer: "",
-            screen: "",
-            title: "Server Event",
-            url: "/",
-            website: env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
-            name: eventName,
-            data: eventData,
-        },
-        type: "event",
-    };
-
-    try {
-        const response = await fetch(apiUrl, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "User-Agent":
-                    "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
-            },
-            body: JSON.stringify(payload),
-        });
-
-        if (!response.ok) {
-            console.error("Failed to send Umami event:", await response.text());
-        }
-    } catch (error) {
-        console.error("Error sending Umami event:", error);
+  if (!env.NEXT_PUBLIC_UMAMI_WEBSITE_ID || !env.NEXT_PUBLIC_UMAMI_SCRIPT_URL) {
+    console.warn("Umami not configured, skipping server-side event tracking");
+    return;
+  }
+
+  // Extract API endpoint from script URL (e.g., https://analytics.umami.is/script.js -> https://analytics.umami.is/api/send)
+  const scriptUrl = new URL(env.NEXT_PUBLIC_UMAMI_SCRIPT_URL);
+  const apiUrl = `${scriptUrl.origin}/api/send`;
+
+  const payload: UmamiPayload = {
+    payload: {
+      hostname: env.NEXT_PUBLIC_APP_URL
+        ? new URL(env.NEXT_PUBLIC_APP_URL).hostname
+        : "localhost",
+      language: "en-US",
+      referrer: "",
+      screen: "",
+      title: "Server Event",
+      url: "/",
+      website: env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
+      name: eventName,
+      data: eventData,
+    },
+    type: "event",
+  };
+
+  try {
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "User-Agent":
+          "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      console.error("Failed to send Umami event:", await response.text());
     }
+  } catch (error) {
+    console.error("Error sending Umami event:", error);
+  }
 }