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.

.dockerignore

@@ -6,6 +6,7 @@ Dockerfile*
 docker-compose*
 README.md
 *.log
+.DS_Store
 .env*
 !.env.example
 .vscode
@@ -14,4 +15,3 @@ coverage
 *.tsbuildinfo
 dist
 build
-

.env.example

@@ -1,43 +1,51 @@
-# Base application env
-NODE_ENV="development"
-PORT="3000"
-HOSTNAME="0.0.0.0"
+# Copy this file to .env before running Docker Compose:
+# cp .env.example .env
+
+# Runtime
+NODE_ENV=production
+WEB_PORT=3000
 
 # Auth
-# You can generate a new secret on the command line with:
-# openssl rand -base64 32
-AUTH_SECRET="your-auth-secret"
-BETTER_AUTH_URL="http://localhost:3000" # Set to your production URL in production
+# Generate with: openssl rand -base64 32
+AUTH_SECRET=change-me-generate-a-real-secret
+BETTER_AUTH_URL=http://localhost:3000
 
-# App URL
-# Used for client-side redirects and base URLs
-NEXT_PUBLIC_APP_URL="http://localhost:3000"
+# Public app URL
+NEXT_PUBLIC_APP_URL=http://localhost:3000
 
-# Database (Postgres)
-# These are required for Docker container initialization
-POSTGRES_USER="postgres"
-POSTGRES_PASSWORD="postgres"
-POSTGRES_DB="postgres"
+# Postgres used by docker-compose.yml
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+POSTGRES_DB=postgres
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/postgres
+DB_DISABLE_SSL=true
 
-# Connect string for the app
-DATABASE_URL="postgres://postgres:postgres@localhost:5432/postgres"
-# Disable SSL for Docker local Postgres; set to false or remove for managed Postgres
-DB_DISABLE_SSL="true"
+# White-label defaults used at image build time.
+# Admin-managed platform branding in the app can override these after setup.
+NEXT_PUBLIC_BRAND_NAME="beenvoice"
+NEXT_PUBLIC_BRAND_TAGLINE="Simple and efficient invoicing for freelancers and small businesses"
+NEXT_PUBLIC_BRAND_LOGO_TEXT="beenvoice"
+NEXT_PUBLIC_BRAND_ICON="$"
+NEXT_PUBLIC_DEFAULT_INTERFACE_THEME="beenvoice"
+NEXT_PUBLIC_DEFAULT_FONT="brand"
+NEXT_PUBLIC_DEFAULT_BODY_FONT="brand"
+NEXT_PUBLIC_DEFAULT_HEADING_FONT="brand"
+NEXT_PUBLIC_DEFAULT_RADIUS="xl"
+NEXT_PUBLIC_DEFAULT_SIDEBAR_STYLE="floating"
 
-# Email (Resend). Replace with real keys in production
-RESEND_API_KEY="your-resend-api-key"
-RESEND_DOMAIN=""
+# Email delivery via Resend (optional)
+# Leave blank to disable invoice/password-reset email delivery.
+RESEND_API_KEY=
+RESEND_DOMAIN=
 
-# Analytics
-NEXT_PUBLIC_UMAMI_WEBSITE_ID="your-website-id-here"
-NEXT_PUBLIC_UMAMI_SCRIPT_URL="https://analytics.umami.is/script.js"
-# Build tweaks
-# SKIP_ENV_VALIDATION=1
+# Analytics via Umami (optional)
+# Leave website ID blank to disable analytics.
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.umami.is/script.js
 
-# SSO / Authentik (Optional - only needed if using SSO authentication)
-# Configure these if you want to enable Single Sign-On with Authentik OIDC
-# The issuer should be your Authentik application's OAuth2 provider URL
-# Example: https://auth.example.com/application/o/your-app-slug
-AUTHENTIK_ISSUER=""
-AUTHENTIK_CLIENT_ID=""
-AUTHENTIK_CLIENT_SECRET=""
+# SSO via Authentik OIDC (optional)
+NEXT_PUBLIC_AUTHENTIK_ENABLED=false
+AUTHENTIK_ISSUER=
+AUTHENTIK_CLIENT_ID=
+AUTHENTIK_CLIENT_SECRET=
+AUTHENTIK_ORIGIN=

.gitignore

@@ -34,6 +34,7 @@ yarn-error.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
+.env.prod
 .env*.local
 .env*.production
 
@@ -41,4 +42,4 @@ yarn-error.log*
 *.tsbuildinfo
 
 # idea files
-.idea
+.idea

Dockerfile

@@ -1,59 +1,36 @@
-FROM oven/bun:1.2.19 as deps
-WORKDIR /app
+# syntax=docker/dockerfile:1
+FROM oven/bun:1 AS base
+WORKDIR /usr/src/app
 
-# Install dependencies (only package manifests copied first for better caching)
+FROM base AS install
 COPY package.json bun.lock ./
-# Install minimal toolchain for native devDependencies (e.g., better-sqlite3) during build
-# Minimal toolchain (kept for safety, but we skip dev deps)
-RUN apt-get update \
-  && apt-get install -y --no-install-recommends python3 make g++ \
-  && ln -sf /usr/bin/python3 /usr/bin/python \
-  && rm -rf /var/lib/apt/lists/*
-# Install all deps (including dev) for build tooling like @tailwindcss/postcss
-RUN bun install --frozen-lockfile --verbose
+RUN bun install --frozen-lockfile
 
-FROM oven/bun:1.2.19 as builder
-WORKDIR /app
-
-ENV NODE_ENV=production
-ENV SKIP_ENV_VALIDATION=1
-ENV NEXT_TELEMETRY_DISABLED=1
-
-COPY --from=deps /app/node_modules ./node_modules
+FROM base AS build
+COPY --from=install /usr/src/app/node_modules node_modules
 COPY . .
 
-# Build Next.js app (no memory constraints)
-RUN bun run build
+ENV NODE_ENV=production \
+    SKIP_ENV_VALIDATION=1 \
+    NODE_OPTIONS=--max-old-space-size=4096 \
+    BETTER_AUTH_URL=http://localhost:3000 \
+    AUTH_SECRET=docker-build-placeholder-secret-do-not-use \
+    DATABASE_URL=postgres://postgres:postgres@localhost:5432/postgres
+RUN bun run build && bun build src/server/db/migrate.ts --target=bun --outfile=migrate.js
 
-FROM oven/bun:1.2.19 as runner
-WORKDIR /app
+FROM base AS release
+ENV NODE_ENV=production \
+    PORT=3000 \
+    HOSTNAME=0.0.0.0
 
-ENV NODE_ENV=production
-ENV PORT=3000
+COPY --from=build /usr/src/app/.next/standalone ./
+COPY --from=build /usr/src/app/.next/static ./.next/static
+COPY --from=build /usr/src/app/public ./public
+COPY --from=build /usr/src/app/migrate.js ./migrate.js
+COPY --from=build /usr/src/app/drizzle ./drizzle
 
-# Create non-root user and group
-RUN addgroup --system --gid 1001 beenvoice \
-  && adduser  --system --uid 1001 --ingroup beenvoice beenvoice
-
-# Copy runtime artifacts and install production deps
-COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/package.json ./package.json
-COPY --from=builder /app/bun.lock ./bun.lock
-RUN bun install --frozen-lockfile --production --verbose
-COPY --from=builder /app/start.sh ./start.sh
-COPY --from=builder /app/next.config.js ./next.config.js
-COPY --from=builder /app/src ./src
-COPY --from=builder /app/drizzle ./drizzle
-COPY --from=builder /app/drizzle.config.ts ./drizzle.config.ts
-COPY --from=builder /app/.env.example ./.env.example
-
-RUN chmod +x ./start.sh
-
-USER 1001
+RUN chmod -R a+rX drizzle migrate.js public
 
+USER bun
 EXPOSE 3000
-
-CMD ["./start.sh"]
-
-
+CMD ["sh", "-c", "bun migrate.js && bun server.js"]

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
    ```

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

@@ -1,21 +1,47 @@
 services:
+  app:
+    build:
+      context: .
+    image: beenvoice:local
+    environment:
+      NODE_ENV: production
+      AUTH_SECRET: ${AUTH_SECRET:?Set AUTH_SECRET in .env}
+      DATABASE_URL: postgres://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD:-postgres}@db:5432/${POSTGRES_DB:-postgres}
+      DB_DISABLE_SSL: "true"
+      BETTER_AUTH_URL: ${BETTER_AUTH_URL:-http://localhost:3000}
+      NEXT_PUBLIC_APP_URL: ${NEXT_PUBLIC_APP_URL:-http://localhost:3000}
+      RESEND_API_KEY: ${RESEND_API_KEY:-}
+      RESEND_DOMAIN: ${RESEND_DOMAIN:-}
+      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:-}
+      AUTHENTIK_ORIGIN: ${AUTHENTIK_ORIGIN:-}
+    ports:
+      - "${WEB_PORT:-3000}:3000"
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: unless-stopped
+
   db:
     image: postgres:17-alpine
-    container_name: beenvoice-db
-    env_file:
-      - .env.local
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-postgres}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+      POSTGRES_DB: ${POSTGRES_DB:-postgres}
     volumes:
       - beenvoice_pg_data:/var/lib/postgresql/data
-    ports:
-      - "5432:5432"
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      test:
+        ["CMD-SHELL", 'pg_isready -U "$${POSTGRES_USER}" -d "$${POSTGRES_DB}"']
       interval: 5s
       timeout: 5s
       retries: 10
+    restart: unless-stopped
 
 volumes:
   beenvoice_pg_data:
-    driver: local
-
-

drizzle/0003_appearance_preferences.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "beenvoice_user" ADD COLUMN "interfaceTheme" varchar(50) DEFAULT 'beenvoice' NOT NULL;
+ALTER TABLE "beenvoice_user" ADD COLUMN "fontPreference" varchar(50) DEFAULT 'brand' NOT NULL;

drizzle/0004_platform_appearance_controls.sql

@@ -0,0 +1,11 @@
+ALTER TABLE "beenvoice_user"
+ADD COLUMN "bodyFontPreference" varchar(50) DEFAULT 'brand' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_user"
+ADD COLUMN "headingFontPreference" varchar(50) DEFAULT 'brand' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_user"
+ADD COLUMN "radiusPreference" varchar(20) DEFAULT 'xl' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_user"
+ADD COLUMN "sidebarStyle" varchar(20) DEFAULT 'floating' NOT NULL;

drizzle/0005_platform_settings_and_roles.sql

@@ -0,0 +1,59 @@
+ALTER TABLE "beenvoice_user"
+ADD COLUMN "role" varchar(20) DEFAULT 'user' NOT NULL;
+--> statement-breakpoint
+UPDATE "beenvoice_user"
+SET "role" = 'admin'
+WHERE "id" = (
+  SELECT "id"
+  FROM "beenvoice_user"
+  ORDER BY "createdAt" ASC
+  LIMIT 1
+);
+--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "beenvoice_platform_setting" (
+  "id" varchar(50) PRIMARY KEY DEFAULT 'global' NOT NULL,
+  "brandName" varchar(100) DEFAULT 'beenvoice' NOT NULL,
+  "brandTagline" varchar(255) DEFAULT 'Simple and efficient invoicing for freelancers and small businesses' NOT NULL,
+  "brandLogoText" varchar(100) DEFAULT 'beenvoice' NOT NULL,
+  "brandIcon" varchar(20) DEFAULT '$' NOT NULL,
+  "colorTheme" varchar(50) DEFAULT 'slate' NOT NULL,
+  "customColor" varchar(50),
+  "theme" varchar(20) DEFAULT 'system' NOT NULL,
+  "interfaceTheme" varchar(50) DEFAULT 'beenvoice' NOT NULL,
+  "bodyFontPreference" varchar(50) DEFAULT 'brand' NOT NULL,
+  "headingFontPreference" varchar(50) DEFAULT 'brand' NOT NULL,
+  "radiusPreference" varchar(20) DEFAULT 'xl' NOT NULL,
+  "sidebarStyle" varchar(20) DEFAULT 'floating' NOT NULL,
+  "createdAt" timestamp DEFAULT now() NOT NULL,
+  "updatedAt" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+INSERT INTO "beenvoice_platform_setting" (
+  "id",
+  "brandName",
+  "brandTagline",
+  "brandLogoText",
+  "brandIcon",
+  "colorTheme",
+  "customColor",
+  "theme",
+  "interfaceTheme",
+  "bodyFontPreference",
+  "headingFontPreference",
+  "radiusPreference",
+  "sidebarStyle"
+) VALUES (
+  'global',
+  'beenvoice',
+  'Simple and efficient invoicing for freelancers and small businesses',
+  'beenvoice',
+  '$',
+  'slate',
+  NULL,
+  'system',
+  'beenvoice',
+  'brand',
+  'brand',
+  'xl',
+  'floating'
+) ON CONFLICT ("id") DO NOTHING;

drizzle/0006_pdf_generation_settings.sql

@@ -0,0 +1,14 @@
+ALTER TABLE "beenvoice_platform_setting"
+ADD COLUMN "pdfTemplate" varchar(20) DEFAULT 'classic' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_platform_setting"
+ADD COLUMN "pdfAccentColor" varchar(50) DEFAULT '#111827' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_platform_setting"
+ADD COLUMN "pdfFooterText" varchar(120) DEFAULT 'Professional Invoicing' NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_platform_setting"
+ADD COLUMN "pdfShowLogo" boolean DEFAULT true NOT NULL;
+--> statement-breakpoint
+ALTER TABLE "beenvoice_platform_setting"
+ADD COLUMN "pdfShowPageNumbers" boolean DEFAULT true NOT NULL;

drizzle/0007_invoice_email_message.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "beenvoice_invoice"
+ADD COLUMN "emailMessage" varchar(2000);

drizzle/meta/_journal.json

@@ -15,13 +15,48 @@
       "when": 1775356013998,
       "tag": "0001_supreme_the_enforcers",
       "breakpoints": true
-    }
-    ,{
+    },
+    {
       "idx": 2,
       "version": "7",
       "when": 1775400000000,
       "tag": "0002_tax_deductible",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "7",
+      "when": 1775600000000,
+      "tag": "0003_appearance_preferences",
+      "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "7",
+      "when": 1777336000000,
+      "tag": "0004_platform_appearance_controls",
+      "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "7",
+      "when": 1777337000000,
+      "tag": "0005_platform_settings_and_roles",
+      "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "7",
+      "when": 1777338000000,
+      "tag": "0006_pdf_generation_settings",
+      "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1777339000000,
+      "tag": "0007_invoice_email_message",
+      "breakpoints": true
     }
   ]
-}
+}

next.config.js

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

package.json

@@ -7,12 +7,13 @@
     "build": "next build",
     "check": "eslint . && tsc --noEmit",
     "db:generate": "drizzle-kit generate",
-    "db:migrate": "bun src/server/db/migrate.ts",
+    "db:migrate": "bun drizzle-kit migrate",
     "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",
@@ -64,15 +66,17 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dotenv": "^17.2.3",
     "drizzle-orm": "^0.44.7",
     "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",
@@ -89,13 +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",
-    "dotenv": "^17.2.3",
+    "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/forgot-password/route.ts

@@ -55,6 +55,20 @@ export async function POST(request: NextRequest) {
       })
       .where(eq(users.id, user.id));
 
+    if (!env.RESEND_API_KEY) {
+      console.warn(
+        "Password reset requested, but RESEND_API_KEY is not configured.",
+      );
+      return NextResponse.json(
+        {
+          success: true,
+          message:
+            "If an account with that email exists, password reset instructions have been sent.",
+        },
+        { status: 200 },
+      );
+    }
+
     // Send password reset email using Resend
     try {
       const resend = new Resend(env.RESEND_API_KEY);

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,277 +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 {
-  Mail,
-  Lock,
-  ArrowRight,
-  Users,
-  FileText,
-  TrendingUp,
-  Shield,
-} from "lucide-react";
-
-function SignInForm() {
-  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="flex min-h-screen items-center justify-center relative overflow-hidden">
-      {/* Blob Background */}
-      <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
-        <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="w-[800px] h-[800px] bg-neutral-400/30 dark:bg-neutral-500/20 rounded-full blur-3xl animate-blob"></div>
-      </div>
-
-      <Card className="mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:border md:shadow-2xl md:bg-background/80 md:backdrop-blur-xl md:border-border/50 md:rounded-3xl">
-        <CardContent className="grid h-full p-0 md:grid-cols-2">
-          {/* Hero Section - Hidden on mobile */}
-          <div className="bg-primary/5 relative hidden md:flex md:flex-col md:justify-center md:p-12 border-r border-border/50">
-            <div className="space-y-8">
-              <div className="space-y-4">
-                <Logo size="xl" />
-                <div className="space-y-3">
-                  <h1 className="text-3xl font-bold lg:text-4xl font-heading">
-                    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="font-semibold text-foreground">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="font-semibold text-foreground">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="font-semibold text-foreground">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="text-3xl font-bold font-heading">Sign In</h1>
-                <p className="text-muted-foreground">
-                  Enter your credentials to access your account
-                </p>
-              </div>
-
-              <div className="space-y-4">
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="w-full h-11 relative 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="w-full border-t border-border/50" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background px-2 text-muted-foreground">
-                      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="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background 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="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background transition-all"
-                      placeholder="Enter your password"
-                    />
-                  </div>
-                </div>
-
-                <Button
-                  type="submit"
-                  className="h-11 w-full rounded-xl text-base shadow-lg shadow-primary/20 hover:shadow-primary/30"
-                  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 { Suspense } from "react";
+import { env } from "~/env";
+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-details-skeleton.tsx

@@ -30,15 +30,15 @@ export function InvoiceDetailsSkeleton() {
                       <Skeleton className="h-8 w-48" />
                       <Skeleton className="h-6 w-24 rounded-full" />
                     </div>
-                    <div className="space-y-1 sm:space-y-0 text-sm">
+                    <div className="space-y-1 text-sm sm:space-y-0">
                       <div className="flex gap-2">
                         <Skeleton className="h-4 w-32" />
-                        <Skeleton className="h-4 w-32 hidden sm:block" />
+                        <Skeleton className="hidden h-4 w-32 sm:block" />
                       </div>
                     </div>
                   </div>
                   <div className="flex-shrink-0 text-left sm:text-right">
-                    <Skeleton className="h-4 w-24 mb-1 sm:ml-auto" />
+                    <Skeleton className="mb-1 h-4 w-24 sm:ml-auto" />
                     <Skeleton className="h-9 w-32 sm:ml-auto" />
                   </div>
                 </div>
@@ -118,7 +118,7 @@ export function InvoiceDetailsSkeleton() {
                     <div className="space-y-3">
                       <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                         <div className="min-w-0 flex-1">
-                          <Skeleton className="h-5 w-3/4 mb-2" />
+                          <Skeleton className="mb-2 h-5 w-3/4" />
                           <div className="flex gap-4">
                             <Skeleton className="h-4 w-24" />
                             <Skeleton className="h-4 w-16" />
@@ -156,7 +156,7 @@ export function InvoiceDetailsSkeleton() {
 
         {/* Right Column - Actions */}
         <div className="space-y-6">
-          <Card className="sticky top-20">
+          <Card className="lg:sticky lg:top-6">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Skeleton className="h-5 w-5 rounded-full" />

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]/_components/pdf-download-button.tsx

@@ -25,6 +25,9 @@ export function PDFDownloadButton({
     { id: invoiceId },
     { enabled: false },
   );
+  const { data: platformTheme } = api.settings.getTheme.useQuery(undefined, {
+    staleTime: 60_000,
+  });
 
   const handleDownloadPDF = async () => {
     if (isGenerating) return;
@@ -55,7 +58,13 @@ export function PDFDownloadButton({
         items: invoiceData.items,
       };
 
-      await generateInvoicePDF(pdfData);
+      await generateInvoicePDF(pdfData, {
+        pdfTemplate: platformTheme?.pdfTemplate,
+        pdfAccentColor: platformTheme?.pdfAccentColor,
+        pdfFooterText: platformTheme?.pdfFooterText,
+        pdfShowLogo: platformTheme?.pdfShowLogo,
+        pdfShowPageNumbers: platformTheme?.pdfShowPageNumbers,
+      });
       toast.success("PDF downloaded successfully");
     } catch (error) {
       console.error("PDF generation error:", error);

src/app/dashboard/invoices/[id]/_components/send-invoice-button.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "~/components/ui/button";
-import { toast } from "sonner";
-import { api } from "~/trpc/react";
-import { Send, Loader2 } from "lucide-react";
-
-interface SendInvoiceButtonProps {
-  invoiceId: string;
-  variant?: "default" | "outline" | "ghost" | "icon";
-  className?: string;
-  showResend?: boolean;
-}
-
-export function SendInvoiceButton({
-  invoiceId,
-  variant = "outline",
-  className,
-  showResend = false,
-}: SendInvoiceButtonProps) {
-  const [isSending, setIsSending] = useState(false);
-
-  // Get utils for cache invalidation
-  const utils = api.useUtils();
-
-  // Use the new email API mutation
-  const sendInvoiceMutation = api.email.sendInvoice.useMutation({
-    onSuccess: (data) => {
-      // Show detailed success message with delivery info
-      toast.success(data.message, {
-        description: `Email ID: ${data.emailId}`,
-        duration: 5000,
-      });
-
-      // Refresh invoice data to show updated status
-      void utils.invoices.getById.invalidate({ id: invoiceId });
-    },
-    onError: (error) => {
-      // Enhanced error handling with specific error types
-      console.error("Email send error:", error);
-
-      let errorMessage = "Failed to send invoice email";
-      let errorDescription = "";
-
-      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.";
-      } else {
-        errorDescription = error.message;
-      }
-
-      toast.error(errorMessage, {
-        description: errorDescription,
-        duration: 6000,
-      });
-    },
-  });
-
-  const handleSendInvoice = async () => {
-    if (isSending) return;
-
-    setIsSending(true);
-
-    try {
-      await sendInvoiceMutation.mutateAsync({
-        invoiceId,
-      });
-    } catch (error) {
-      // Error is already handled by the mutation's onError
-      console.error("Send invoice error:", error);
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  if (variant === "icon") {
-    return (
-      <Button
-        onClick={handleSendInvoice}
-        disabled={isSending}
-        variant="ghost"
-        size="sm"
-        className={className}
-      >
-        {isSending ? (
-          <Loader2 className="h-3 w-3 animate-spin sm:h-4 sm:w-4" />
-        ) : (
-          <Send className="h-3 w-3 sm:h-4 sm:w-4" />
-        )}
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      onClick={handleSendInvoice}
-      disabled={isSending}
-      variant={variant}
-      size="default"
-      className={`w-full shadow-sm ${className}`}
-      data-testid="send-invoice-button"
-    >
-      {isSending ? (
-        <>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          <span>Sending Email...</span>
-        </>
-      ) : (
-        <>
-          <Send className="mr-2 h-4 w-4" />
-          <span>{showResend ? "Resend Invoice" : "Send Invoice"}</span>
-        </>
-      )}
-    </Button>
-  );
-}

src/app/dashboard/invoices/[id]/_components/unified-invoice-page.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { InvoiceView } from "~/components/data/invoice-view";
-import InvoiceForm from "~/components/forms/invoice-form";
-
-interface UnifiedInvoicePageProps {
-  invoiceId: string;
-  mode: string;
-}
-
-export function UnifiedInvoicePage({
-  invoiceId,
-  mode,
-}: UnifiedInvoicePageProps) {
-  return (
-    <div>
-      {/* Always render InvoiceForm to preserve state, but hide when in view mode */}
-      <div className={mode === "edit" ? "block" : "hidden"}>
-        <InvoiceForm invoiceId={invoiceId} />
-      </div>
-
-      {/* Show InvoiceView only when in view mode */}
-      {mode === "view" && <InvoiceView invoiceId={invoiceId} />}
-    </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",
     });
   };
 
@@ -99,27 +99,25 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
     }).format(new Date(date));
   };
 
-  const formatCurrency = (amount: number) => {
+  const formatCurrency = (amount: number, currency = invoice.currency) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
-      currency: "USD",
+      currency,
     }).format(amount);
   };
 
   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 (
@@ -411,7 +409,7 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
 
         {/* Right Column - Actions */}
         <div className="space-y-6">
-          <Card className="sticky top-20">
+          <Card className="lg:sticky lg:top-6">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Check className="h-5 w-5" />

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

@@ -54,6 +54,32 @@ function SendEmailPageSkeleton() {
   );
 }
 
+function plainTextToHtml(value: string) {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+    .replace(/\n/g, "<br>");
+}
+
+function normalizeEmailNoteHtml(value: string) {
+  const visibleText = value
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/p>/gi, "\n")
+    .replace(/<[^>]*>/g, "")
+    .replace(/&nbsp;|\u00a0/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .trim();
+
+  return visibleText ? value.trim() : "";
+}
+
 export default function SendEmailPage() {
   const params = useParams();
   const router = useRouter();
@@ -136,9 +162,9 @@ export default function SendEmailPage() {
         action:
           canRetry && retryCount < 2
             ? {
-              label: "Retry",
-              onClick: () => handleRetry(),
-            }
+                label: "Retry",
+                onClick: () => handleRetry(),
+              }
             : undefined,
       });
 
@@ -150,34 +176,45 @@ export default function SendEmailPage() {
   const invoice = useMemo(() => {
     return invoiceData
       ? {
-        id: invoiceData.id,
-        invoiceNumber: invoiceData.invoiceNumber,
-        issueDate: invoiceData.issueDate,
-        dueDate: invoiceData.dueDate,
-        status: invoiceData.status,
-        taxRate: invoiceData.taxRate,
-        client: invoiceData.client
-          ? {
-            name: invoiceData.client.name,
-            email: invoiceData.client.email,
-          }
-          : undefined,
-        business: invoiceData.business
-          ? {
-            name: invoiceData.business.name,
-            nickname: invoiceData.business.nickname,
-            email: invoiceData.business.email,
-          }
-          : undefined,
-        items: invoiceData.items?.map((item) => ({
-          id: item.id,
-          hours: item.hours,
-          rate: item.rate,
-        })),
-      }
+          id: invoiceData.id,
+          invoiceNumber: invoiceData.invoiceNumber,
+          issueDate: invoiceData.issueDate,
+          dueDate: invoiceData.dueDate,
+          status: invoiceData.status,
+          totalAmount: invoiceData.totalAmount,
+          taxRate: invoiceData.taxRate,
+          currency: invoiceData.currency,
+          emailMessage: invoiceData.emailMessage,
+          client: invoiceData.client
+            ? {
+                name: invoiceData.client.name,
+                email: invoiceData.client.email,
+              }
+            : undefined,
+          business: invoiceData.business
+            ? {
+                name: invoiceData.business.name,
+                nickname: invoiceData.business.nickname,
+                email: invoiceData.business.email,
+              }
+            : undefined,
+          items: invoiceData.items?.map((item) => ({
+            id: item.id,
+            date: item.date,
+            description: item.description,
+            hours: item.hours,
+            rate: item.rate,
+            amount: item.amount,
+          })),
+        }
       : undefined;
   }, [invoiceData]);
 
+  const normalizedCustomMessage = useMemo(
+    () => normalizeEmailNoteHtml(customMessage),
+    [customMessage],
+  );
+
   // Initialize email content when invoice loads
   useEffect(() => {
     if (!invoice || isInitialized) return;
@@ -191,6 +228,9 @@ export default function SendEmailPage() {
     const defaultContent = ``;
 
     setEmailContent(defaultContent);
+    setCustomMessage(
+      invoice.emailMessage ? plainTextToHtml(invoice.emailMessage) : "",
+    );
     setIsInitialized(true);
   }, [invoice, isInitialized]);
 
@@ -222,7 +262,7 @@ export default function SendEmailPage() {
         invoiceId,
         customSubject: subject,
         customContent: emailContent,
-        customMessage: customMessage?.trim() || undefined,
+        customMessage: normalizedCustomMessage,
         useHtml: true,
         ccEmails: ccEmail.trim() || undefined,
         bccEmails: bccEmail.trim() || undefined,
@@ -252,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>
@@ -262,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(
@@ -366,7 +406,7 @@ export default function SendEmailPage() {
                         ccEmail={ccEmail}
                         bccEmail={bccEmail}
                         content={emailContent}
-                        customMessage={customMessage}
+                        customMessage={normalizedCustomMessage}
                         invoice={invoice}
                         className="min-w-0 border-0"
                       />
@@ -552,10 +592,9 @@ export default function SendEmailPage() {
       <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Send Invoice Email?</DialogTitle>
+            <DialogTitle>Confirm</DialogTitle>
             <DialogDescription>
-              This will send invoice #{invoice.invoiceNumber} to{" "}
-              <strong>{invoice.client?.email}</strong>
+              Send this invoice email to <strong>{toEmail}</strong>
               {ccEmail && (
                 <>
                   {" "}
@@ -568,14 +607,30 @@ export default function SendEmailPage() {
                   and BCC to <strong>{bccEmail}</strong>
                 </>
               )}
-              .
-              {retryCount > 0 && (
-                <div className="text-muted-foreground mt-2 text-sm">
-                  Retry attempt {retryCount} of 2
-                </div>
-              )}
+              ?
             </DialogDescription>
+            {retryCount > 0 && (
+              <p className="text-muted-foreground text-sm">
+                Retry attempt {retryCount} of 2
+              </p>
+            )}
           </DialogHeader>
+          <div className="bg-muted/30 space-y-2 border p-3 text-sm">
+            <div>
+              <span className="text-muted-foreground">Subject: </span>
+              <span className="font-medium">{subject}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Attachment: </span>
+              <span>invoice-{invoice.invoiceNumber}.pdf</span>
+            </div>
+            {normalizedCustomMessage && (
+              <div>
+                <span className="text-muted-foreground">Email note: </span>
+                <span>Included</span>
+              </div>
+            )}
+          </div>
           <DialogFooter>
             <Button
               variant="outline"
@@ -584,8 +639,7 @@ export default function SendEmailPage() {
               Cancel
             </Button>
             <Button onClick={confirmSendEmail} variant="default">
-              <Send className="mr-2 h-4 w-4" />
-              Send Email
+              Confirm
             </Button>
           </DialogFooter>
         </DialogContent>

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/reports/page.tsx

@@ -6,7 +6,13 @@ import { PageHeader } from "~/components/layout/page-header";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { StatusBadge } from "~/components/data/status-badge";
 import { Button } from "~/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
 import { Separator } from "~/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import { formatCurrency } from "~/lib/currency";
@@ -23,23 +29,38 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
-import { TrendingUp, DollarSign, Clock, Users, Download, Receipt, FileText } from "lucide-react";
+import {
+  TrendingUp,
+  DollarSign,
+  Clock,
+  Users,
+  Download,
+  Receipt,
+  FileText,
+} from "lucide-react";
+
+function toNumericChartValue(value: unknown) {
+  const numericValue = typeof value === "number" ? value : Number(value ?? 0);
+  return Number.isFinite(numericValue) ? numericValue : 0;
+}
 
 export default function ReportsPage() {
-  const { data: invoices = [], isLoading: invoicesLoading } = api.invoices.getAll.useQuery();
-  const { data: expenses = [], isLoading: expensesLoading } = api.expenses.getAll.useQuery();
+  const { data: invoices = [], isLoading: invoicesLoading } =
+    api.invoices.getAll.useQuery();
+  const { data: expenses = [], isLoading: expensesLoading } =
+    api.expenses.getAll.useQuery();
   const { data: stats } = api.dashboard.getStats.useQuery();
 
   const isLoading = invoicesLoading || expensesLoading;
 
-  const now = new Date();
-  const currentYear = now.getFullYear();
+  const currentYear = new Date().getFullYear();
   const [taxYear, setTaxYear] = useState(String(currentYear));
 
   // Overview data (last 12 months)
   const overviewData = useMemo(() => {
     if (!invoices.length) return null;
 
+    const now = new Date();
     const monthMap: Record<string, number> = {};
     for (let i = 11; i >= 0; i--) {
       const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
@@ -52,7 +73,10 @@ export default function ReportsPage() {
     let totalHours = 0;
 
     for (const inv of invoices) {
-      const status = getEffectiveInvoiceStatus(inv.status as StoredInvoiceStatus, inv.dueDate);
+      const status = getEffectiveInvoiceStatus(
+        inv.status as StoredInvoiceStatus,
+        inv.dueDate,
+      );
       if (status === "paid") {
         totalRevenue += inv.totalAmount;
         const key = `${new Date(inv.issueDate).getFullYear()}-${String(new Date(inv.issueDate).getMonth() + 1).padStart(2, "0")}`;
@@ -64,28 +88,54 @@ export default function ReportsPage() {
     }
 
     const revenueByMonth = Object.entries(monthMap).map(([month, revenue]) => ({
-      month: new Date(month + "-01").toLocaleDateString("en-US", { month: "short", year: "2-digit" }),
+      month: new Date(month + "-01").toLocaleDateString("en-US", {
+        month: "short",
+        year: "2-digit",
+      }),
       revenue,
     }));
 
     const clientMap: Record<string, { name: string; revenue: number }> = {};
     for (const inv of invoices) {
-      const status = getEffectiveInvoiceStatus(inv.status as StoredInvoiceStatus, inv.dueDate);
+      const status = getEffectiveInvoiceStatus(
+        inv.status as StoredInvoiceStatus,
+        inv.dueDate,
+      );
       if (status === "paid" && inv.client) {
         const id = inv.client.id;
-        if (!clientMap[id]) clientMap[id] = { name: inv.client.name, revenue: 0 };
-        clientMap[id]!.revenue += inv.totalAmount;
+        const entry = (clientMap[id] ??= {
+          name: inv.client.name,
+          revenue: 0,
+        });
+        entry.revenue += inv.totalAmount;
       }
     }
-    const topClients = Object.values(clientMap).sort((a, b) => b.revenue - a.revenue).slice(0, 6);
+    const topClients = Object.values(clientMap)
+      .sort((a, b) => b.revenue - a.revenue)
+      .slice(0, 6);
 
-    const statusCount: Record<string, number> = { draft: 0, sent: 0, paid: 0, overdue: 0 };
+    const statusCount: Record<string, number> = {
+      draft: 0,
+      sent: 0,
+      paid: 0,
+      overdue: 0,
+    };
     for (const inv of invoices) {
-      const s = getEffectiveInvoiceStatus(inv.status as StoredInvoiceStatus, inv.dueDate);
+      const s = getEffectiveInvoiceStatus(
+        inv.status as StoredInvoiceStatus,
+        inv.dueDate,
+      );
       statusCount[s] = (statusCount[s] ?? 0) + 1;
     }
 
-    return { revenueByMonth, topClients, totalRevenue, totalPending, totalHours, statusCount };
+    return {
+      revenueByMonth,
+      topClients,
+      totalRevenue,
+      totalPending,
+      totalHours,
+      statusCount,
+    };
   }, [invoices]);
 
   // Tax summary for selected year
@@ -93,16 +143,45 @@ export default function ReportsPage() {
     const year = parseInt(taxYear);
 
     const yearInvoices = invoices.filter((inv) => {
-      const status = getEffectiveInvoiceStatus(inv.status as StoredInvoiceStatus, inv.dueDate);
-      return status === "paid" && new Date(inv.issueDate).getFullYear() === year;
+      const status = getEffectiveInvoiceStatus(
+        inv.status as StoredInvoiceStatus,
+        inv.dueDate,
+      );
+      return (
+        status === "paid" && new Date(inv.issueDate).getFullYear() === year
+      );
     });
-    const yearExpenses = expenses.filter((exp) => new Date(exp.date).getFullYear() === year);
+    const yearExpenses = expenses.filter(
+      (exp) => new Date(exp.date).getFullYear() === year,
+    );
 
-    const grossIncome = yearInvoices.reduce((s, inv) => s + inv.totalAmount, 0);
-    const taxCollected = yearInvoices.reduce((s, inv) => s + inv.totalAmount * (inv.taxRate ?? 0), 0);
+    const getSubtotal = (inv: (typeof yearInvoices)[number]) => {
+      const itemSubtotal = (inv.items ?? []).reduce(
+        (s, item) => s + item.amount,
+        0,
+      );
+      if (itemSubtotal > 0) return itemSubtotal;
+
+      const taxMultiplier = 1 + (inv.taxRate ?? 0) / 100;
+      return taxMultiplier > 0
+        ? inv.totalAmount / taxMultiplier
+        : inv.totalAmount;
+    };
+
+    const grossIncome = yearInvoices.reduce(
+      (s, inv) => s + getSubtotal(inv),
+      0,
+    );
+    const taxCollected = yearInvoices.reduce(
+      (s, inv) => s + (inv.totalAmount - getSubtotal(inv)),
+      0,
+    );
     const totalExpenses = yearExpenses.reduce((s, exp) => s + exp.amount, 0);
     const deductibleExpenses = yearExpenses
-      .filter((exp) => (exp as typeof exp & { taxDeductible?: boolean }).taxDeductible)
+      .filter(
+        (exp) =>
+          (exp as typeof exp & { taxDeductible?: boolean }).taxDeductible,
+      )
       .reduce((s, exp) => s + exp.amount, 0);
 
     const netProfit = grossIncome - deductibleExpenses;
@@ -116,24 +195,50 @@ export default function ReportsPage() {
       const qMonths = [(q - 1) * 3, (q - 1) * 3 + 1, (q - 1) * 3 + 2];
       return {
         label: `Q${q}`,
-        income: yearInvoices.filter((inv) => qMonths.includes(new Date(inv.issueDate).getMonth())).reduce((s, inv) => s + inv.totalAmount, 0),
-        expenses: yearExpenses.filter((exp) => qMonths.includes(new Date(exp.date).getMonth())).reduce((s, exp) => s + exp.amount, 0),
+        income: yearInvoices
+          .filter((inv) => qMonths.includes(new Date(inv.issueDate).getMonth()))
+          .reduce((s, inv) => s + getSubtotal(inv), 0),
+        expenses: yearExpenses
+          .filter((exp) => qMonths.includes(new Date(exp.date).getMonth()))
+          .reduce((s, exp) => s + exp.amount, 0),
       };
     });
 
-    return { grossIncome, taxCollected, totalInvoiced: grossIncome + taxCollected, totalExpenses, deductibleExpenses, netProfit, selfEmploymentTax, federalEstimate, totalEstimated, quarters, yearInvoices, yearExpenses };
+    return {
+      grossIncome,
+      taxCollected,
+      totalInvoiced: grossIncome + taxCollected,
+      totalExpenses,
+      deductibleExpenses,
+      netProfit,
+      selfEmploymentTax,
+      federalEstimate,
+      totalEstimated,
+      quarters,
+      yearInvoices,
+      yearExpenses,
+    };
   }, [invoices, expenses, taxYear]);
 
   const availableYears = useMemo(() => {
     const years = new Set<number>([currentYear, currentYear - 1]);
-    for (const inv of invoices) years.add(new Date(inv.issueDate).getFullYear());
+    for (const inv of invoices)
+      years.add(new Date(inv.issueDate).getFullYear());
     for (const exp of expenses) years.add(new Date(exp.date).getFullYear());
     return Array.from(years).sort((a, b) => b - a);
   }, [invoices, expenses, currentYear]);
 
-  const avgInvoice = invoices.length > 0
-    ? (overviewData?.totalRevenue ?? 0) / (invoices.filter((i) => getEffectiveInvoiceStatus(i.status as StoredInvoiceStatus, i.dueDate) === "paid").length || 1)
-    : 0;
+  const avgInvoice =
+    invoices.length > 0
+      ? (overviewData?.totalRevenue ?? 0) /
+        (invoices.filter(
+          (i) =>
+            getEffectiveInvoiceStatus(
+              i.status as StoredInvoiceStatus,
+              i.dueDate,
+            ) === "paid",
+        ).length || 1)
+      : 0;
 
   function exportCSV() {
     const rows: string[] = [
@@ -143,23 +248,42 @@ export default function ReportsPage() {
       "INCOME (Paid Invoices)",
       "Date,Invoice #,Client,Subtotal,Tax Rate,Tax Amount,Total",
       ...taxData.yearInvoices.map((inv) => {
-        const taxAmt = inv.totalAmount * (inv.taxRate ?? 0);
-        return [new Date(inv.issueDate).toLocaleDateString("en-US"), inv.invoiceNumber, `"${inv.client?.name ?? ""}"`, inv.totalAmount.toFixed(2), `${((inv.taxRate ?? 0) * 100).toFixed(1)}%`, taxAmt.toFixed(2), (inv.totalAmount + taxAmt).toFixed(2)].join(",");
+        const subtotal = (inv.items ?? []).reduce(
+          (s, item) => s + item.amount,
+          0,
+        );
+        const fallbackSubtotal =
+          inv.totalAmount / (1 + (inv.taxRate ?? 0) / 100);
+        const invoiceSubtotal = subtotal > 0 ? subtotal : fallbackSubtotal;
+        const taxAmt = inv.totalAmount - invoiceSubtotal;
+        return [
+          new Date(inv.issueDate).toLocaleDateString("en-US"),
+          inv.invoiceNumber,
+          `"${inv.client?.name ?? ""}"`,
+          invoiceSubtotal.toFixed(2),
+          `${(inv.taxRate ?? 0).toFixed(1)}%`,
+          taxAmt.toFixed(2),
+          inv.totalAmount.toFixed(2),
+        ].join(",");
       }),
       `,,Totals,${taxData.grossIncome.toFixed(2)},,${taxData.taxCollected.toFixed(2)},${taxData.totalInvoiced.toFixed(2)}`,
       "",
       "EXPENSES",
       "Date,Description,Category,Amount,Currency,Billable,Reimbursable,Tax Deductible",
-      ...taxData.yearExpenses.map((exp) => [
-        new Date(exp.date).toLocaleDateString("en-US"),
-        `"${exp.description}"`,
-        `"${exp.category ?? ""}"`,
-        exp.amount.toFixed(2),
-        exp.currency,
-        exp.billable ? "Yes" : "No",
-        exp.reimbursable ? "Yes" : "No",
-        (exp as typeof exp & { taxDeductible?: boolean }).taxDeductible ? "Yes" : "No",
-      ].join(",")),
+      ...taxData.yearExpenses.map((exp) =>
+        [
+          new Date(exp.date).toLocaleDateString("en-US"),
+          `"${exp.description}"`,
+          `"${exp.category ?? ""}"`,
+          exp.amount.toFixed(2),
+          exp.currency,
+          exp.billable ? "Yes" : "No",
+          exp.reimbursable ? "Yes" : "No",
+          (exp as typeof exp & { taxDeductible?: boolean }).taxDeductible
+            ? "Yes"
+            : "No",
+        ].join(","),
+      ),
       `,,Totals,${taxData.totalExpenses.toFixed(2)},,,,"Deductible: ${taxData.deductibleExpenses.toFixed(2)}"`,
       "",
       "TAX SUMMARY",
@@ -171,7 +295,9 @@ export default function ReportsPage() {
       `Est. Federal Income Tax (22%),${taxData.federalEstimate.toFixed(2)}`,
       `Total Estimated Tax,${taxData.totalEstimated.toFixed(2)}`,
     ];
-    const blob = new Blob([rows.join("\n")], { type: "text/csv;charset=utf-8;" });
+    const blob = new Blob([rows.join("\n")], {
+      type: "text/csv;charset=utf-8;",
+    });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
@@ -183,9 +309,15 @@ export default function ReportsPage() {
   if (isLoading) {
     return (
       <div className="page-enter space-y-6">
-        <PageHeader title="Reports" description="Revenue and tax analytics" variant="gradient" />
+        <PageHeader
+          title="Reports"
+          description="Revenue and tax analytics"
+          variant="gradient"
+        />
         <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
-          {[...Array(4)].map((_, i) => <div key={i} className="bg-muted h-24 animate-pulse rounded-xl" />)}
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="bg-muted h-24 animate-pulse rounded-xl" />
+          ))}
         </div>
       </div>
     );
@@ -193,12 +325,20 @@ export default function ReportsPage() {
 
   return (
     <div className="page-enter space-y-6 pb-6">
-      <PageHeader title="Reports" description="Revenue and tax analytics" variant="gradient" />
+      <PageHeader
+        title="Reports"
+        description="Revenue and tax analytics"
+        variant="gradient"
+      />
 
       <Tabs defaultValue="overview">
         <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="overview"><TrendingUp className="mr-1.5 h-4 w-4" /> Overview</TabsTrigger>
-          <TabsTrigger value="tax"><FileText className="mr-1.5 h-4 w-4" /> Tax Summary</TabsTrigger>
+          <TabsTrigger value="overview">
+            <TrendingUp className="mr-1.5 h-4 w-4" /> Overview
+          </TabsTrigger>
+          <TabsTrigger value="tax">
+            <FileText className="mr-1.5 h-4 w-4" /> Tax Summary
+          </TabsTrigger>
         </TabsList>
 
         {/* ── OVERVIEW TAB ── */}
@@ -207,60 +347,139 @@ export default function ReportsPage() {
             <Card>
               <CardContent className="p-4">
                 <div className="flex items-center gap-2">
-                  <div className="bg-primary/10 rounded p-1.5"><DollarSign className="text-primary h-4 w-4" /></div>
-                  <p className="text-muted-foreground text-xs font-medium">Total Revenue</p>
+                  <div className="bg-primary/10 rounded p-1.5">
+                    <DollarSign className="text-primary h-4 w-4" />
+                  </div>
+                  <p className="text-muted-foreground text-xs font-medium">
+                    Total Revenue
+                  </p>
                 </div>
-                <p className="mt-2 text-2xl font-bold">{formatCurrency(overviewData?.totalRevenue ?? 0)}</p>
+                <p className="mt-2 text-2xl font-bold">
+                  {formatCurrency(overviewData?.totalRevenue ?? 0)}
+                </p>
               </CardContent>
             </Card>
             <Card>
               <CardContent className="p-4">
                 <div className="flex items-center gap-2">
-                  <div className="bg-yellow-500/10 rounded p-1.5"><Clock className="h-4 w-4 text-yellow-500" /></div>
-                  <p className="text-muted-foreground text-xs font-medium">Pending</p>
+                  <div className="rounded bg-yellow-500/10 p-1.5">
+                    <Clock className="h-4 w-4 text-yellow-500" />
+                  </div>
+                  <p className="text-muted-foreground text-xs font-medium">
+                    Pending
+                  </p>
                 </div>
-                <p className="mt-2 text-2xl font-bold">{formatCurrency(overviewData?.totalPending ?? 0)}</p>
+                <p className="mt-2 text-2xl font-bold">
+                  {formatCurrency(overviewData?.totalPending ?? 0)}
+                </p>
               </CardContent>
             </Card>
             <Card>
               <CardContent className="p-4">
                 <div className="flex items-center gap-2">
-                  <div className="bg-blue-500/10 rounded p-1.5"><TrendingUp className="h-4 w-4 text-blue-500" /></div>
-                  <p className="text-muted-foreground text-xs font-medium">Avg Invoice</p>
+                  <div className="rounded bg-blue-500/10 p-1.5">
+                    <TrendingUp className="h-4 w-4 text-blue-500" />
+                  </div>
+                  <p className="text-muted-foreground text-xs font-medium">
+                    Avg Invoice
+                  </p>
                 </div>
-                <p className="mt-2 text-2xl font-bold">{formatCurrency(isNaN(avgInvoice) ? 0 : avgInvoice)}</p>
+                <p className="mt-2 text-2xl font-bold">
+                  {formatCurrency(isNaN(avgInvoice) ? 0 : avgInvoice)}
+                </p>
               </CardContent>
             </Card>
             <Card>
               <CardContent className="p-4">
                 <div className="flex items-center gap-2">
-                  <div className="bg-green-500/10 rounded p-1.5"><Users className="h-4 w-4 text-green-500" /></div>
-                  <p className="text-muted-foreground text-xs font-medium">Total Hours</p>
+                  <div className="rounded bg-green-500/10 p-1.5">
+                    <Users className="h-4 w-4 text-green-500" />
+                  </div>
+                  <p className="text-muted-foreground text-xs font-medium">
+                    Total Hours
+                  </p>
                 </div>
-                <p className="mt-2 text-2xl font-bold">{(overviewData?.totalHours ?? 0).toFixed(1)}h</p>
+                <p className="mt-2 text-2xl font-bold">
+                  {(overviewData?.totalHours ?? 0).toFixed(1)}h
+                </p>
               </CardContent>
             </Card>
           </div>
 
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2"><TrendingUp className="h-5 w-5" /> Revenue (Last 12 Months)</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <TrendingUp className="h-5 w-5" /> Revenue (Last 12 Months)
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <div className="h-48 w-full md:h-64">
                 <ResponsiveContainer width="100%" height="100%">
                   <AreaChart data={overviewData?.revenueByMonth ?? []}>
                     <defs>
-                      <linearGradient id="revenueGrad" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%" stopColor="hsl(142, 76%, 36%)" stopOpacity={0.3} />
-                        <stop offset="95%" stopColor="hsl(142, 76%, 36%)" stopOpacity={0.02} />
+                      <linearGradient
+                        id="revenueGrad"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="5%"
+                          stopColor="hsl(142, 76%, 36%)"
+                          stopOpacity={0.3}
+                        />
+                        <stop
+                          offset="95%"
+                          stopColor="hsl(142, 76%, 36%)"
+                          stopOpacity={0.02}
+                        />
                       </linearGradient>
                     </defs>
-                    <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
-                    <XAxis dataKey="month" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
-                    <YAxis tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
-                    <Tooltip formatter={(v: number) => [formatCurrency(v), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
-                    <Area type="monotone" dataKey="revenue" stroke="hsl(142, 76%, 36%)" fill="url(#revenueGrad)" strokeWidth={2} dot={false} />
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      className="stroke-border"
+                    />
+                    <XAxis
+                      dataKey="month"
+                      tick={{
+                        fontSize: 11,
+                        fill: "hsl(var(--muted-foreground))",
+                      }}
+                      axisLine={false}
+                      tickLine={false}
+                    />
+                    <YAxis
+                      tick={{
+                        fontSize: 11,
+                        fill: "hsl(var(--muted-foreground))",
+                      }}
+                      axisLine={false}
+                      tickLine={false}
+                      tickFormatter={(v: number) =>
+                        `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`
+                      }
+                    />
+                    <Tooltip
+                      formatter={(value) => [
+                        formatCurrency(toNumericChartValue(value)),
+                        "Revenue",
+                      ]}
+                      contentStyle={{
+                        background: "hsl(var(--card))",
+                        border: "1px solid hsl(var(--border))",
+                        borderRadius: "8px",
+                        fontSize: 12,
+                      }}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="revenue"
+                      stroke="hsl(142, 76%, 36%)"
+                      fill="url(#revenueGrad)"
+                      strokeWidth={2}
+                      dot={false}
+                    />
                   </AreaChart>
                 </ResponsiveContainer>
               </div>
@@ -270,19 +489,62 @@ export default function ReportsPage() {
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
             <Card>
               <CardHeader>
-                <CardTitle className="flex items-center gap-2"><Users className="h-5 w-5" /> Top Clients by Revenue</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Users className="h-5 w-5" /> Top Clients by Revenue
+                </CardTitle>
               </CardHeader>
               <CardContent>
                 {!overviewData?.topClients.length ? (
-                  <p className="text-muted-foreground py-6 text-center text-sm">No paid invoices yet.</p>
+                  <p className="text-muted-foreground py-6 text-center text-sm">
+                    No paid invoices yet.
+                  </p>
                 ) : (
                   <div className="h-48 md:h-56">
                     <ResponsiveContainer width="100%" height="100%">
-                      <BarChart data={overviewData.topClients} layout="vertical">
-                        <XAxis type="number" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
-                        <YAxis type="category" dataKey="name" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} width={80} />
-                        <Tooltip formatter={(v: number) => [formatCurrency(v), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
-                        <Bar dataKey="revenue" fill="hsl(142, 76%, 36%)" radius={[0, 4, 4, 0]} />
+                      <BarChart
+                        data={overviewData.topClients}
+                        layout="vertical"
+                      >
+                        <XAxis
+                          type="number"
+                          tick={{
+                            fontSize: 11,
+                            fill: "hsl(var(--muted-foreground))",
+                          }}
+                          axisLine={false}
+                          tickLine={false}
+                          tickFormatter={(v: number) =>
+                            `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`
+                          }
+                        />
+                        <YAxis
+                          type="category"
+                          dataKey="name"
+                          tick={{
+                            fontSize: 11,
+                            fill: "hsl(var(--muted-foreground))",
+                          }}
+                          axisLine={false}
+                          tickLine={false}
+                          width={80}
+                        />
+                        <Tooltip
+                          formatter={(value) => [
+                            formatCurrency(toNumericChartValue(value)),
+                            "Revenue",
+                          ]}
+                          contentStyle={{
+                            background: "hsl(var(--card))",
+                            border: "1px solid hsl(var(--border))",
+                            borderRadius: "8px",
+                            fontSize: 12,
+                          }}
+                        />
+                        <Bar
+                          dataKey="revenue"
+                          fill="hsl(142, 76%, 36%)"
+                          radius={[0, 4, 4, 0]}
+                        />
                       </BarChart>
                     </ResponsiveContainer>
                   </div>
@@ -291,38 +553,76 @@ export default function ReportsPage() {
             </Card>
 
             <Card>
-              <CardHeader><CardTitle>Invoice Status Breakdown</CardTitle></CardHeader>
+              <CardHeader>
+                <CardTitle>Invoice Status Breakdown</CardTitle>
+              </CardHeader>
               <CardContent className="space-y-3">
-                {Object.entries(overviewData?.statusCount ?? {}).map(([status, count]) => (
-                  <div key={status} className="flex items-center justify-between">
-                    <StatusBadge status={status as never} />
-                    <div className="flex items-center gap-3">
-                      <div className="bg-muted h-2 w-24 overflow-hidden rounded-full sm:w-32">
-                        <div className="bg-primary h-full rounded-full" style={{ width: `${invoices.length ? (count / invoices.length) * 100 : 0}%` }} />
+                {Object.entries(overviewData?.statusCount ?? {}).map(
+                  ([status, count]) => (
+                    <div
+                      key={status}
+                      className="flex items-center justify-between"
+                    >
+                      <StatusBadge status={status as never} />
+                      <div className="flex items-center gap-3">
+                        <div className="bg-muted h-2 w-24 overflow-hidden rounded-full sm:w-32">
+                          <div
+                            className="bg-primary h-full rounded-full"
+                            style={{
+                              width: `${invoices.length ? (count / invoices.length) * 100 : 0}%`,
+                            }}
+                          />
+                        </div>
+                        <span className="text-muted-foreground w-8 text-right text-sm">
+                          {count}
+                        </span>
                       </div>
-                      <span className="text-muted-foreground w-8 text-right text-sm">{count}</span>
                     </div>
-                  </div>
-                ))}
-                {invoices.length === 0 && <p className="text-muted-foreground py-6 text-center text-sm">No invoices yet.</p>}
+                  ),
+                )}
+                {invoices.length === 0 && (
+                  <p className="text-muted-foreground py-6 text-center text-sm">
+                    No invoices yet.
+                  </p>
+                )}
               </CardContent>
             </Card>
           </div>
 
           {stats && (
             <Card>
-              <CardHeader><CardTitle>Recent Activity</CardTitle></CardHeader>
+              <CardHeader>
+                <CardTitle>Recent Activity</CardTitle>
+              </CardHeader>
               <CardContent>
                 <div className="divide-y">
                   {stats.recentInvoices.map((inv) => (
-                    <div key={inv.id} className="flex items-center justify-between py-3">
+                    <div
+                      key={inv.id}
+                      className="flex items-center justify-between py-3"
+                    >
                       <div>
                         <p className="font-medium">{inv.client?.name ?? "—"}</p>
-                        <p className="text-muted-foreground text-xs">{new Date(inv.issueDate).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</p>
+                        <p className="text-muted-foreground text-xs">
+                          {new Date(inv.issueDate).toLocaleDateString("en-US", {
+                            month: "short",
+                            day: "numeric",
+                            year: "numeric",
+                          })}
+                        </p>
                       </div>
                       <div className="flex items-center gap-3">
-                        <StatusBadge status={getEffectiveInvoiceStatus(inv.status as StoredInvoiceStatus, inv.dueDate) as never} />
-                        <p className="font-semibold">{formatCurrency(inv.totalAmount)}</p>
+                        <StatusBadge
+                          status={
+                            getEffectiveInvoiceStatus(
+                              inv.status as StoredInvoiceStatus,
+                              inv.dueDate,
+                            ) as never
+                          }
+                        />
+                        <p className="font-semibold">
+                          {formatCurrency(inv.totalAmount)}
+                        </p>
                       </div>
                     </div>
                   ))}
@@ -338,9 +638,15 @@ export default function ReportsPage() {
             <div className="flex items-center gap-3">
               <span className="text-sm font-medium">Tax Year</span>
               <Select value={taxYear} onValueChange={setTaxYear}>
-                <SelectTrigger className="w-28"><SelectValue /></SelectTrigger>
+                <SelectTrigger className="w-28">
+                  <SelectValue />
+                </SelectTrigger>
                 <SelectContent>
-                  {availableYears.map((y) => <SelectItem key={y} value={String(y)}>{y}</SelectItem>)}
+                  {availableYears.map((y) => (
+                    <SelectItem key={y} value={String(y)}>
+                      {y}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
@@ -352,17 +658,27 @@ export default function ReportsPage() {
           {/* Income */}
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2"><DollarSign className="h-5 w-5" /> Income</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <DollarSign className="h-5 w-5" /> Income
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">Gross Income (paid invoices)</span>
-                <span className="font-medium">{formatCurrency(taxData.grossIncome)}</span>
+                <span className="text-muted-foreground">
+                  Gross Income (paid invoices)
+                </span>
+                <span className="font-medium">
+                  {formatCurrency(taxData.grossIncome)}
+                </span>
               </div>
               {taxData.taxCollected > 0 && (
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Tax Collected from Clients</span>
-                  <span className="font-medium">{formatCurrency(taxData.taxCollected)}</span>
+                  <span className="text-muted-foreground">
+                    Tax Collected from Clients
+                  </span>
+                  <span className="font-medium">
+                    {formatCurrency(taxData.taxCollected)}
+                  </span>
                 </div>
               )}
               <Separator />
@@ -376,74 +692,151 @@ export default function ReportsPage() {
           {/* Expenses */}
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2"><Receipt className="h-5 w-5" /> Expenses & Deductions</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <Receipt className="h-5 w-5" /> Expenses & Deductions
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <div className="flex justify-between text-sm">
                 <span className="text-muted-foreground">Total Expenses</span>
-                <span className="font-medium">{formatCurrency(taxData.totalExpenses)}</span>
+                <span className="font-medium">
+                  {formatCurrency(taxData.totalExpenses)}
+                </span>
               </div>
               <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">Tax-Deductible Expenses</span>
-                <span className="font-medium text-green-600">{formatCurrency(taxData.deductibleExpenses)}</span>
+                <span className="text-muted-foreground">
+                  Tax-Deductible Expenses
+                </span>
+                <span className="font-medium text-green-600">
+                  {formatCurrency(taxData.deductibleExpenses)}
+                </span>
               </div>
-              {taxData.totalExpenses > 0 && taxData.deductibleExpenses === 0 && (
-                <p className="text-muted-foreground text-xs">Mark expenses as "Tax Deductible" in the Expenses page to include them here.</p>
-              )}
+              {taxData.totalExpenses > 0 &&
+                taxData.deductibleExpenses === 0 && (
+                  <p className="text-muted-foreground text-xs">
+                    Mark expenses as &quot;Tax Deductible&quot; in the Expenses
+                    page to include them here.
+                  </p>
+                )}
             </CardContent>
           </Card>
 
           {/* Estimated tax */}
           <Card>
             <CardHeader>
-              <CardTitle className="flex items-center gap-2"><FileText className="h-5 w-5" /> Estimated Tax Liability</CardTitle>
+              <CardTitle className="flex items-center gap-2">
+                <FileText className="h-5 w-5" /> Estimated Tax Liability
+              </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">Net Profit (income − deductible expenses)</span>
-                <span className="font-medium">{formatCurrency(taxData.netProfit)}</span>
+                <span className="text-muted-foreground">
+                  Net Profit (income − deductible expenses)
+                </span>
+                <span className="font-medium">
+                  {formatCurrency(taxData.netProfit)}
+                </span>
               </div>
               <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">Self-Employment Tax (15.3% on 92.35% of net)</span>
-                <span className="font-medium">{formatCurrency(taxData.selfEmploymentTax)}</span>
+                <span className="text-muted-foreground">
+                  Self-Employment Tax (15.3% on 92.35% of net)
+                </span>
+                <span className="font-medium">
+                  {formatCurrency(taxData.selfEmploymentTax)}
+                </span>
               </div>
               <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">Federal Income Tax (est. 22% bracket)</span>
-                <span className="font-medium">{formatCurrency(taxData.federalEstimate)}</span>
+                <span className="text-muted-foreground">
+                  Federal Income Tax (est. 22% bracket)
+                </span>
+                <span className="font-medium">
+                  {formatCurrency(taxData.federalEstimate)}
+                </span>
               </div>
               <Separator />
               <div className="flex justify-between text-lg font-bold">
                 <span>Total Estimated Tax</span>
-                <span className="text-destructive">{formatCurrency(taxData.totalEstimated)}</span>
+                <span className="text-destructive">
+                  {formatCurrency(taxData.totalEstimated)}
+                </span>
               </div>
-              <p className="text-muted-foreground text-xs pt-1">
-                Assumes US self-employment tax rules and the 22% federal bracket. Consult a tax professional for accurate filing.
+              <p className="text-muted-foreground pt-1 text-xs">
+                Assumes US self-employment tax rules and the 22% federal
+                bracket. Consult a tax professional for accurate filing.
               </p>
             </CardContent>
           </Card>
 
           {/* Quarterly chart */}
           <Card>
-            <CardHeader><CardTitle>Quarterly Breakdown</CardTitle></CardHeader>
+            <CardHeader>
+              <CardTitle>Quarterly Breakdown</CardTitle>
+            </CardHeader>
             <CardContent>
               <div className="h-48 md:h-64">
                 <ResponsiveContainer width="100%" height="100%">
                   <BarChart data={taxData.quarters}>
-                    <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
-                    <XAxis dataKey="label" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
-                    <YAxis tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
-                    <Tooltip
-                      formatter={(v: number, name: string) => [formatCurrency(v), name === "income" ? "Income" : "Expenses"]}
-                      contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }}
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      className="stroke-border"
+                    />
+                    <XAxis
+                      dataKey="label"
+                      tick={{
+                        fontSize: 11,
+                        fill: "hsl(var(--muted-foreground))",
+                      }}
+                      axisLine={false}
+                      tickLine={false}
+                    />
+                    <YAxis
+                      tick={{
+                        fontSize: 11,
+                        fill: "hsl(var(--muted-foreground))",
+                      }}
+                      axisLine={false}
+                      tickLine={false}
+                      tickFormatter={(v: number) =>
+                        `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`
+                      }
+                    />
+                    <Tooltip
+                      formatter={(value, name) => [
+                        formatCurrency(toNumericChartValue(value)),
+                        name === "income" ? "Income" : "Expenses",
+                      ]}
+                      contentStyle={{
+                        background: "hsl(var(--card))",
+                        border: "1px solid hsl(var(--border))",
+                        borderRadius: "8px",
+                        fontSize: 12,
+                      }}
+                    />
+                    <Bar
+                      dataKey="income"
+                      name="income"
+                      fill="hsl(142, 76%, 36%)"
+                      radius={[4, 4, 0, 0]}
+                    />
+                    <Bar
+                      dataKey="expenses"
+                      name="expenses"
+                      fill="hsl(0, 84%, 60%)"
+                      radius={[4, 4, 0, 0]}
+                      opacity={0.75}
                     />
-                    <Bar dataKey="income" name="income" fill="hsl(142, 76%, 36%)" radius={[4, 4, 0, 0]} />
-                    <Bar dataKey="expenses" name="expenses" fill="hsl(0, 84%, 60%)" radius={[4, 4, 0, 0]} opacity={0.75} />
                   </BarChart>
                 </ResponsiveContainer>
               </div>
-              <div className="mt-2 flex justify-center gap-6 text-xs text-muted-foreground">
-                <span className="flex items-center gap-1.5"><span className="inline-block h-2.5 w-2.5 rounded-sm bg-green-600" /> Income</span>
-                <span className="flex items-center gap-1.5"><span className="inline-block h-2.5 w-2.5 rounded-sm bg-red-500/75" /> Expenses</span>
+              <div className="text-muted-foreground mt-2 flex justify-center gap-6 text-xs">
+                <span className="flex items-center gap-1.5">
+                  <span className="inline-block h-2.5 w-2.5 rounded-sm bg-green-600" />{" "}
+                  Income
+                </span>
+                <span className="flex items-center gap-1.5">
+                  <span className="inline-block h-2.5 w-2.5 rounded-sm bg-red-500/75" />{" "}
+                  Expenses
+                </span>
               </div>
             </CardContent>
           </Card>

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

@@ -18,7 +18,12 @@ import {
   User,
   Users,
   Link as LinkIcon,
+  Monitor,
+  PanelLeft,
+  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";
@@ -58,13 +63,118 @@ 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";
+import { env } from "~/env";
+import { Badge } from "~/components/ui/badge";
 import { Switch } from "~/components/ui/switch";
 import { Slider } from "~/components/ui/slider";
 import { useAnimationPreferences } from "~/components/providers/animation-preferences-provider";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { useAppearance } from "~/components/providers/appearance-provider";
+import {
+  bodyFontPreferences,
+  colorModes,
+  colorThemes,
+  type ColorTheme,
+  headingFontPreferences,
+  interfaceThemes,
+  radiusPreferences,
+  sidebarStyles,
+  themePresets,
+  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) ?? [];
+
+  if (
+    hue === undefined ||
+    saturation === undefined ||
+    lightness === undefined
+  ) {
+    return "#16a34a";
+  }
+
+  const s = saturation / 100;
+  const l = lightness / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+  const [r, g, b] =
+    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, g, b]
+    .map((channel) =>
+      Math.round((channel + m) * 255)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+}
+
+function hexToHslChannels(hex: string) {
+  const normalized = hex.replace("#", "");
+  const red = parseInt(normalized.slice(0, 2), 16) / 255;
+  const green = parseInt(normalized.slice(2, 4), 16) / 255;
+  const blue = parseInt(normalized.slice(4, 6), 16) / 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 `0 0% ${Number((lightness * 100).toFixed(1))}%`;
+  }
+
+  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 `${Number(((hue + 360) % 360).toFixed(1))} ${Number(
+    (saturation * 100).toFixed(1),
+  )}% ${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();
@@ -83,6 +193,45 @@ export function SettingsContent() {
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLinking, setIsLinking] = useState(false);
+  const authentikEnabled = env.NEXT_PUBLIC_AUTHENTIK_ENABLED === true;
+  const {
+    interfaceTheme,
+    bodyFontPreference,
+    headingFontPreference,
+    radiusPreference,
+    sidebarStyle,
+    colorMode,
+    colorTheme,
+    customColor,
+    brandName,
+    brandTagline,
+    brandLogoText,
+    brandIcon,
+    pdfTemplate,
+    pdfAccentColor,
+    pdfFooterText,
+    pdfShowLogo,
+    pdfShowPageNumbers,
+    updateAppearance,
+    updateAppearanceDebounced,
+    isUpdating: appearanceUpdating,
+  } = useAppearance();
+  const activePreset = themePresets[interfaceTheme];
+  const themeModified =
+    activePreset.bodyFontPreference !== bodyFontPreference ||
+    activePreset.headingFontPreference !== headingFontPreference ||
+    activePreset.colorTheme !== colorTheme ||
+    activePreset.radiusPreference !== radiusPreference ||
+    activePreset.sidebarStyle !== sidebarStyle ||
+    activePreset.pdfTemplate !== pdfTemplate ||
+    activePreset.pdfAccentColor !== pdfAccentColor;
+  const customColorValue = customColor ?? "142.1 76.2% 36.3%";
+  const selectAccent = (nextColorTheme: ColorTheme) => {
+    updateAppearance({
+      colorTheme: nextColorTheme,
+      ...(nextColorTheme === "custom" ? { customColor: customColorValue } : {}),
+    });
+  };
 
   const handleLinkAuthentik = async () => {
     setIsLinking(true);
@@ -91,7 +240,7 @@ export function SettingsContent() {
         providerId: "authentik",
         callbackURL: "/dashboard/settings",
       });
-    } catch (error) {
+    } catch {
       toast.error("Failed to link account");
       setIsLinking(false);
     }
@@ -119,6 +268,7 @@ export function SettingsContent() {
   // Queries
   const { data: profile, refetch: refetchProfile } =
     api.settings.getProfile.useQuery();
+  const isAdmin = profile?.role === "admin";
   const { data: dataStats } = api.settings.getDataStats.useQuery();
 
   // Mutations
@@ -188,7 +338,6 @@ export function SettingsContent() {
       toast.error(`Delete failed: ${error.message}`);
     },
   });
-
   const handleUpdateProfile = (e: React.FormEvent) => {
     e.preventDefault();
     if (!name.trim()) {
@@ -307,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) {
@@ -341,8 +491,8 @@ export function SettingsContent() {
   ];
 
   return (
-    <Tabs defaultValue="general" className="space-y-4">
-      <TabsList className="bg-muted/50 grid w-full 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>
         <TabsTrigger value="data">Data</TabsTrigger>
@@ -426,7 +576,9 @@ export function SettingsContent() {
                       variant="ghost"
                       size="sm"
                       className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
-                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                      onClick={() =>
+                        setShowCurrentPassword(!showCurrentPassword)
+                      }
                     >
                       {showCurrentPassword ? (
                         <EyeOff className="h-4 w-4" />
@@ -481,7 +633,9 @@ export function SettingsContent() {
                       variant="ghost"
                       size="sm"
                       className="absolute top-1/2 right-2 h-6 w-6 -translate-y-1/2 p-0"
-                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
                     >
                       {showConfirmPassword ? (
                         <EyeOff className="h-4 w-4" />
@@ -505,47 +659,623 @@ export function SettingsContent() {
             </CardContent>
           </Card>
 
-          {/* Connected Accounts */}
-          <Card className="bg-card border-border border">
-            <CardHeader>
-              <CardTitle className="text-foreground flex items-center gap-2">
-                <LinkIcon className="text-primary h-5 w-5" />
-                Connected Accounts
-              </CardTitle>
-              <CardDescription>
-                Manage your linked social accounts and SSO providers
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="flex items-center justify-between rounded-lg border p-4">
-                  <div className="flex items-center gap-4">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10">
-                      <Shield className="h-5 w-5 text-blue-500" />
-                    </div>
-                    <div className="space-y-1">
-                      <p className="font-medium leading-none">Authentik SSO</p>
-                      <p className="text-muted-foreground text-sm">
-                        Connect your corporate account
-                      </p>
+          {authentikEnabled && (
+            <Card className="bg-card border-border border">
+              <CardHeader>
+                <CardTitle className="text-foreground flex items-center gap-2">
+                  <LinkIcon className="text-primary h-5 w-5" />
+                  Connected Accounts
+                </CardTitle>
+                <CardDescription>
+                  Manage your linked social accounts and SSO providers
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between rounded-lg border p-4">
+                    <div className="flex items-center gap-4">
+                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10">
+                        <Shield className="h-5 w-5 text-blue-500" />
+                      </div>
+                      <div className="space-y-1">
+                        <p className="leading-none font-medium">
+                          Authentik SSO
+                        </p>
+                        <p className="text-muted-foreground text-sm">
+                          Connect your corporate account
+                        </p>
+                      </div>
                     </div>
+                    <Button
+                      variant="outline"
+                      disabled={isLinking}
+                      onClick={handleLinkAuthentik}
+                    >
+                      {isLinking ? "Connecting..." : "Connect"}
+                    </Button>
                   </div>
-                  <Button
-                    variant="outline"
-                    disabled={isLinking}
-                    onClick={handleLinkAuthentik}
-                  >
-                    {isLinking ? "Connecting..." : "Connect"}
-                  </Button>
                 </div>
-              </div>
-            </CardContent>
-          </Card>
+              </CardContent>
+            </Card>
+          )}
         </div>
       </TabsContent>
 
       <TabsContent value="preferences" className="space-y-8">
-        {/* Theme follows system preferences automatically via CSS media queries */}
+        <Card className="bg-card border-border border">
+          <CardHeader>
+            <CardTitle className="text-foreground flex items-center gap-2">
+              <Palette className="text-primary h-5 w-5" />
+              Appearance
+            </CardTitle>
+            <CardDescription>
+              Select the app skin, color mode, accent, and font stack.
+            </CardDescription>
+          </CardHeader>
+          {!isAdmin ? (
+            <CardContent>
+              <p className="text-muted-foreground text-sm">
+                Platform appearance and branding are managed by an
+                administrator.
+              </p>
+            </CardContent>
+          ) : (
+            <CardContent className="space-y-8">
+              <section className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium">Brand</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Public-facing name, logo text, and short product tagline.
+                  </p>
+                </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label>Brand Name</Label>
+                    <Input
+                      value={brandName}
+                      onChange={(event) =>
+                        updateAppearanceDebounced({
+                          brandName: event.target.value,
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Logo Text</Label>
+                    <Input
+                      value={brandLogoText}
+                      onChange={(event) =>
+                        updateAppearanceDebounced({
+                          brandLogoText: event.target.value,
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Brand Icon</Label>
+                    <Input
+                      value={brandIcon}
+                      onChange={(event) =>
+                        updateAppearanceDebounced({
+                          brandIcon: event.target.value,
+                        })
+                      }
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Tagline</Label>
+                    <Input
+                      value={brandTagline}
+                      onChange={(event) =>
+                        updateAppearanceDebounced({
+                          brandTagline: event.target.value,
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+              </section>
+
+              <section className="space-y-4 border-t pt-6">
+                <div>
+                  <h3 className="text-sm font-medium">Theme</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Presets establish the broad visual language; color mode and
+                    accent can still be tuned independently.
+                  </p>
+                </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between gap-3">
+                      <Label className="flex items-center gap-2">
+                        <Paintbrush className="h-4 w-4" />
+                        Theme Preset
+                      </Label>
+                      <div className="flex items-center gap-2">
+                        {themeModified && (
+                          <Badge variant="secondary" className="shrink-0">
+                            modified
+                          </Badge>
+                        )}
+                        {themeModified && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-2 text-xs"
+                            onClick={() => updateAppearance(activePreset)}
+                          >
+                            Reset
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                    <Select
+                      value={interfaceTheme}
+                      onValueChange={(value) => {
+                        const nextTheme = value as InterfaceTheme;
+                        updateAppearance(themePresets[nextTheme]);
+                      }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {interfaceThemes.map((themeOption) => (
+                          <SelectItem
+                            key={themeOption.value}
+                            value={themeOption.value}
+                          >
+                            {themeOption.label}
+                            {themeOption.value === interfaceTheme &&
+                            themeModified
+                              ? " (modified)"
+                              : ""}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      Applies the theme, fonts, accent, corner radius,
+                      navigation chrome, and PDF defaults.
+                    </p>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        interfaceThemes.find(
+                          (themeOption) => themeOption.value === interfaceTheme,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <Monitor className="h-4 w-4" />
+                      Color Mode
+                    </Label>
+                    <Select
+                      value={colorMode}
+                      onValueChange={(value) =>
+                        updateAppearance({
+                          colorMode: value as typeof colorMode,
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {colorModes.map((modeOption) => (
+                          <SelectItem
+                            key={modeOption.value}
+                            value={modeOption.value}
+                          >
+                            {modeOption.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        colorModes.find(
+                          (modeOption) => modeOption.value === colorMode,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              <section className="space-y-4 border-t pt-6">
+                <div>
+                  <h3 className="text-sm font-medium">Typography</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Body and heading fonts are separate so white-label installs
+                    can feel native without losing hierarchy.
+                  </p>
+                </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <Type className="h-4 w-4" />
+                      Body Font
+                    </Label>
+                    <Select
+                      value={bodyFontPreference}
+                      onValueChange={(value) =>
+                        updateAppearance({
+                          bodyFontPreference:
+                            value as typeof bodyFontPreference,
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {bodyFontPreferences.map((fontOption) => (
+                          <SelectItem
+                            key={fontOption.value}
+                            value={fontOption.value}
+                          >
+                            {fontOption.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        bodyFontPreferences.find(
+                          (fontOption) =>
+                            fontOption.value === bodyFontPreference,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <Type className="h-4 w-4" />
+                      Heading Font
+                    </Label>
+                    <Select
+                      value={headingFontPreference}
+                      onValueChange={(value) =>
+                        updateAppearance({
+                          headingFontPreference:
+                            value as typeof headingFontPreference,
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {headingFontPreferences.map((fontOption) => (
+                          <SelectItem
+                            key={fontOption.value}
+                            value={fontOption.value}
+                          >
+                            {fontOption.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        headingFontPreferences.find(
+                          (fontOption) =>
+                            fontOption.value === headingFontPreference,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              <section className="space-y-4 border-t pt-6">
+                <div>
+                  <h3 className="text-sm font-medium">Color</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Accent controls primary actions, focus rings, and branded
+                    highlights.
+                  </p>
+                </div>
+                <div className="space-y-3">
+                  <Label>Accent</Label>
+                  <div className="grid gap-2 sm:grid-cols-3">
+                    {colorThemes.map((themeOption) => (
+                      <button
+                        key={themeOption.value}
+                        type="button"
+                        onClick={() => selectAccent(themeOption.value)}
+                        className={`border-border bg-background hover:bg-muted flex items-center gap-2 rounded-lg border p-2 text-left text-sm transition-colors ${
+                          colorTheme === themeOption.value
+                            ? "border-primary bg-muted text-foreground"
+                            : ""
+                        }`}
+                      >
+                        <span
+                          className="size-4 rounded-full border"
+                          style={{ backgroundColor: themeOption.swatch }}
+                        />
+                        {themeOption.label}
+                      </button>
+                    ))}
+                    <button
+                      type="button"
+                      onClick={() => selectAccent("custom")}
+                      className={`border-border bg-background hover:bg-muted flex items-center gap-2 rounded-lg border p-2 text-left text-sm transition-colors ${
+                        colorTheme === "custom"
+                          ? "border-primary bg-muted text-foreground"
+                          : ""
+                      }`}
+                    >
+                      <span
+                        className="size-4 rounded-full border"
+                        style={{
+                          backgroundColor: customColor
+                            ? `hsl(${customColor})`
+                            : "hsl(142.1 76.2% 36.3%)",
+                        }}
+                      />
+                      Custom
+                    </button>
+                  </div>
+                  {colorTheme === "custom" && (
+                    <div className="space-y-2">
+                      <InputColor
+                        label="Custom Accent"
+                        value={hslChannelsToHex(customColorValue)}
+                        onBlur={() => undefined}
+                        onChange={(value) => {
+                          if (isFullHexColor(value)) {
+                            updateAppearanceDebounced({
+                              colorTheme: "custom",
+                              customColor: hexToHslChannels(value),
+                            });
+                          }
+                        }}
+                        className="mt-0"
+                      />
+                      <Input
+                        value={customColorValue}
+                        onChange={(event) =>
+                          updateAppearanceDebounced({
+                            colorTheme: "custom",
+                            customColor: event.target.value,
+                          })
+                        }
+                        placeholder="142.1 76.2% 36.3%"
+                      />
+                    </div>
+                  )}
+                  <p className="text-muted-foreground text-xs leading-snug">
+                    Custom values use HSL channels, for example 142.1 76.2%
+                    36.3%.
+                  </p>
+                </div>
+              </section>
+
+              <section className="space-y-4 border-t pt-6">
+                <div>
+                  <h3 className="text-sm font-medium">Layout</h3>
+                  <p className="text-muted-foreground text-xs">
+                    Control global rounding and whether navigation floats or
+                    sits flush with the viewport.
+                  </p>
+                </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <Paintbrush className="h-4 w-4" />
+                      Corner Radius
+                    </Label>
+                    <Select
+                      value={radiusPreference}
+                      onValueChange={(value) =>
+                        updateAppearance({
+                          radiusPreference: value as typeof radiusPreference,
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {radiusPreferences.map((radiusOption) => (
+                          <SelectItem
+                            key={radiusOption.value}
+                            value={radiusOption.value}
+                          >
+                            {radiusOption.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        radiusPreferences.find(
+                          (radiusOption) =>
+                            radiusOption.value === radiusPreference,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="flex items-center gap-2">
+                      <PanelLeft className="h-4 w-4" />
+                      Navigation Chrome
+                    </Label>
+                    <Select
+                      value={sidebarStyle}
+                      onValueChange={(value) =>
+                        updateAppearance({
+                          sidebarStyle: value as typeof sidebarStyle,
+                        })
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sidebarStyles.map((styleOption) => (
+                          <SelectItem
+                            key={styleOption.value}
+                            value={styleOption.value}
+                          >
+                            {styleOption.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground text-xs leading-snug">
+                      {
+                        sidebarStyles.find(
+                          (styleOption) => styleOption.value === sidebarStyle,
+                        )?.description
+                      }
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              {appearanceUpdating && (
+                <p className="text-muted-foreground text-xs">
+                  Saving appearance...
+                </p>
+              )}
+            </CardContent>
+          )}
+        </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">
@@ -556,13 +1286,16 @@ export function SettingsContent() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <form onSubmit={handleSaveAnimationPreferences} className="space-y-6">
+            <form
+              onSubmit={handleSaveAnimationPreferences}
+              className="space-y-6"
+            >
               <div className="flex items-start justify-between gap-4">
                 <div className="space-y-1.5">
                   <Label>Reduce Motion</Label>
                   <p className="text-muted-foreground text-xs leading-snug">
-                    Turn this on to reduce or remove non-essential animations and
-                    transitions.
+                    Turn this on to reduce or remove non-essential animations
+                    and transitions.
                   </p>
                 </div>
                 <Switch
@@ -706,7 +1439,9 @@ export function SettingsContent() {
                   className="w-full sm:flex-1"
                 >
                   <Download className="mr-2 h-4 w-4" />
-                  {exportDataQuery.isFetching ? "Exporting..." : "Export Backup"}
+                  {exportDataQuery.isFetching
+                    ? "Exporting..."
+                    : "Export Backup"}
                 </Button>
 
                 <Dialog
@@ -723,8 +1458,8 @@ export function SettingsContent() {
                     <DialogHeader>
                       <DialogTitle>Import Backup Data</DialogTitle>
                       <DialogDescription>
-                        Upload your backup JSON file or paste the contents below.
-                        This will add the data to your existing account.
+                        Upload your backup JSON file or paste the contents
+                        below. This will add the data to your existing account.
                       </DialogDescription>
                     </DialogHeader>
                     <div className="space-y-4">
@@ -759,7 +1494,9 @@ export function SettingsContent() {
                       {/* File Upload Method */}
                       {importMethod === "file" && (
                         <div className="space-y-2">
-                          <Label htmlFor="backup-file">Select Backup File</Label>
+                          <Label htmlFor="backup-file">
+                            Select Backup File
+                          </Label>
                           <Input
                             id="backup-file"
                             type="file"
@@ -820,7 +1557,10 @@ export function SettingsContent() {
               {/* Backup Information */}
               <Collapsible>
                 <CollapsibleTrigger asChild>
-                  <Button variant="ghost" className="w-full justify-between p-0">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-between p-0"
+                  >
                     <div className="flex items-center gap-2">
                       <Info className="h-4 w-4" />
                       <span className="font-medium">Backup Information</span>
@@ -838,7 +1578,8 @@ export function SettingsContent() {
                         • Backup files contain all data in secure JSON format
                       </li>
                       <li>
-                        • Import adds to existing data without replacing anything
+                        • Import adds to existing data without replacing
+                        anything
                       </li>
                       <li>
                         • Upload JSON files directly or paste content manually
@@ -876,14 +1617,14 @@ export function SettingsContent() {
                 <AlertDialogHeader>
                   <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                   <AlertDialogDescription>
-                    This action cannot be undone. This will permanently delete your
-                    account and remove your data from our servers.
+                    This action cannot be undone. This will permanently delete
+                    your account and remove your data from our servers.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <div className="my-4 space-y-2">
                   <Label htmlFor="confirm-delete">
-                    Type <span className="font-bold">delete all my data</span> to
-                    confirm
+                    Type <span className="font-bold">delete all my data</span>{" "}
+                    to confirm
                   </Label>
                   <Input
                     id="confirm-delete"

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,36 +1,60 @@
 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";
 import { AnimationPreferencesProvider } from "~/components/providers/animation-preferences-provider";
-
+import { AppearanceProvider } from "~/components/providers/appearance-provider";
+import {
+  brand,
+  defaultBodyFontPreference,
+  defaultHeadingFontPreference,
+  defaultInterfaceTheme,
+  defaultRadiusPreference,
+  defaultSidebarStyle,
+} from "~/lib/branding";
 
 import { UmamiScript } from "~/components/analytics/umami-script";
 
 export const metadata: Metadata = {
-  title: "beenvoice - Invoicing Made Simple",
-  description:
-    "Simple and efficient invoicing for freelancers and small businesses",
+  title: `${brand.name} - Invoicing Made Simple`,
+  description: brand.tagline,
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
+const geistSans = localFont({
+  src: "../../public/fonts/geist/sans/Geist-VariableFont_wght.ttf",
+  variable: "--font-geist-sans",
   display: "swap",
 });
 
-const playfair = Playfair_Display({
-  subsets: ["latin"],
-  variable: "--font-heading",
+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",
 });
@@ -42,20 +66,59 @@ export default function RootLayout({
     <html
       suppressHydrationWarning
       lang="en"
-      className={`${inter.variable} ${playfair.variable} ${geistMono.variable}`}
+      data-interface-theme={defaultInterfaceTheme}
+      data-body-font={defaultBodyFontPreference}
+      data-heading-font={defaultHeadingFontPreference}
+      data-radius={defaultRadiusPreference}
+      data-sidebar-style={defaultSidebarStyle}
+      data-color-mode="system"
+      data-color-theme="slate"
+      className={`${geistSans.variable} ${playfair.variable} ${frutiger.variable} ${geistMono.variable}`}
     >
+      <head>
+        <script
+          id="appearance-init"
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                var defaults = {
+                  interfaceTheme: "${defaultInterfaceTheme}",
+                  bodyFontPreference: "${defaultBodyFontPreference}",
+                  headingFontPreference: "${defaultHeadingFontPreference}",
+                  radiusPreference: "${defaultRadiusPreference}",
+                  sidebarStyle: "${defaultSidebarStyle}",
+                  colorMode: "system",
+                  colorTheme: "slate"
+                };
+                var stored = JSON.parse(localStorage.getItem("bv.appearance") || "{}");
+                var appearance = Object.assign(defaults, stored);
+                var root = document.documentElement;
+                root.dataset.interfaceTheme = appearance.interfaceTheme;
+                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;
+                root.dataset.colorTheme = appearance.colorTheme;
+                if (appearance.colorMode === "dark") root.classList.add("dark");
+                if (appearance.customColor) root.style.setProperty("--custom-primary", appearance.customColor);
+              } catch {}
+            `,
+          }}
+        />
+      </head>
       <body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
-        <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
+        <div className="brand-background 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="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
+          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
         </div>
 
         <TRPCReactProvider>
-          <AnimationPreferencesProvider>
-            <div className="relative z-10">
-              {children}
-            </div>
-          </AnimationPreferencesProvider>
+          <AppearanceProvider>
+            <AnimationPreferencesProvider>
+              <div className="relative z-10">{children}</div>
+            </AnimationPreferencesProvider>
+          </AppearanceProvider>
           <Toaster />
           <UmamiScript />
         </TRPCReactProvider>

src/app/page.tsx

@@ -1,242 +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="min-h-screen relative overflow-x-hidden">
+    <main className="bg-background text-foreground min-h-screen">
       <AuthRedirect />
 
-      {/* Blob Background for Homepage */}
-      <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
-        <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="w-[800px] h-[800px] bg-neutral-400/30 dark:bg-neutral-500/20 rounded-full blur-3xl animate-blob"></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="fixed top-4 left-4 right-4 z-50 m-4 rounded-2xl border border-border/60 bg-background/80 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 border px-4 py-1 text-sm rounded-full">
-              <Zap className="mr-2 h-3.5 w-3.5" />
-              Completely Free for Everyone
-            </Badge>
-
-            <h1 className="text-foreground mb-8 text-6xl font-heading font-bold tracking-tight sm:text-7xl lg:text-8xl leading-tight">
-              Invoicing Made <br />
-              <span className="text-primary italic">Beautifully Simple.</span>
-            </h1>
-
-            <p className="text-muted-foreground mx-auto mb-12 max-w-2xl text-xl leading-relaxed font-sans">
-              Create professional invoices, manage clients, and track payments with a tool that feels as good as it looks.
-            </p>
-
-            <div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
-              <Link href="/auth/register">
-                <Button
-                  size="lg"
-                  className="h-14 px-10 text-lg rounded-2xl shadow-xl shadow-primary/20 hover:shadow-2xl hover:shadow-primary/30 transition-all duration-300"
-                >
-                  Start For Free
-                  <ArrowRight className="ml-2 h-5 w-5" />
-                </Button>
-              </Link>
-              <a href="#features">
-                <Button
-                  variant="outline"
-                  size="lg"
-                  className="h-14 px-10 text-lg rounded-2xl border-border/50 bg-background/50 hover:bg-background/80 backdrop-blur-sm"
-                >
-                  Learn More
-                </Button>
-              </a>
-            </div>
-
-            <div className="mt-16 text-muted-foreground/80 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="py-24 relative">
-        <div className="container mx-auto px-4 relative z-10">
-          <div className="mb-20 text-center">
-            <h2 className="text-foreground mb-6 text-4xl font-heading font-bold sm:text-5xl">
-              Everything you need to <span className="italic text-primary">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 hover:-translate-y-2 transition-transform duration-500 border-border/40 bg-background/60 backdrop-blur-xl">
-                <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 mb-4 text-2xl font-bold font-heading">
-                    {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="flex items-center gap-3 text-sm text-foreground/80">
-                        <div className="h-1.5 w-1.5 rounded-full bg-primary" />
-                        {item}
-                      </li>
-                    ))}
-                  </ul>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="py-24 relative overflow-hidden">
-        <div className="container mx-auto px-4 relative z-10">
-          <div className="max-w-4xl mx-auto text-center mb-16">
-            <h2 className="text-5xl font-heading font-bold mb-6">Simple Pricing</h2>
-            <p className="text-xl text-muted-foreground">Focus on your work, not on fees.</p>
-          </div>
-
-          <div className="max-w-md mx-auto">
-            <Card className="relative overflow-visible border-primary/50 shadow-2xl shadow-primary/5 bg-background/80 backdrop-blur-xl">
-              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-6 py-1.5 rounded-full text-sm font-medium shadow-lg">
-                Forever Free
-              </div>
-              <CardContent className="p-10 text-center">
-                <div className="mb-2 text-6xl font-bold font-heading">$0</div>
-                <div className="text-muted-foreground mb-8">No credit card required.</div>
-
-                <div className="space-y-4 mb-10 text-left pl-8">
-                  {[
-                    "Unlimited Invoices",
-                    "Unlimited Clients",
-                    "PDF Downloads",
-                    "Payment Tracking",
-                    "Email Support"
-                  ].map((item, i) => (
-                    <div key={i} className="flex items-center gap-3">
-                      <Check className="h-5 w-5 text-primary shrink-0" />
-                      <span className="text-foreground/90">{item}</span>
-                    </div>
-                  ))}
-                </div>
-
-                <Link href="/auth/register" className="block">
-                  <Button size="lg" className="w-full text-lg h-12 rounded-xl">
-                    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-t border-border/40 bg-background/50 backdrop-blur-sm py-12 mt-12">
-        <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
-          <div className="flex items-center gap-3">
-            <Logo size="sm" />
-            <span className="text-sm text-muted-foreground">© 2024 beenvoice</span>
-          </div>
-          <div className="flex gap-8 text-sm text-muted-foreground">
-            <a href="#" className="hover:text-foreground transition-colors">Privacy</a>
-            <a href="#" className="hover:text-foreground transition-colors">Terms</a>
-            <a href="#" className="hover:text-foreground transition-colors">Contact</a>
-          </div>
-        </div>
-      </footer>
+          <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>
+              <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>
+        </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
+            </Link>
+            <Link href="/terms" className="hover:text-foreground">
+              Terms
+            </Link>
+          </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

@@ -1,6 +1,8 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { brand } from "~/lib/branding";
+import { useAppearance } from "~/components/providers/appearance-provider";
 import { cn } from "~/lib/utils";
 
 interface LogoProps {
@@ -9,7 +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",
@@ -19,7 +38,16 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
   };
 
   if (!animated) {
-    return <LogoContent className={className} size={size} sizeClasses={sizeClasses} />;
+    return (
+      <LogoContent
+        className={className}
+        size={size}
+        sizeClasses={sizeClasses}
+        logoPrefix={logoPrefix}
+        logoSuffix={logoSuffix}
+        icon={icon}
+      />
+    );
   }
 
   return (
@@ -27,7 +55,11 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.1, ease: "easeOut" }}
-      className={cn("flex items-center font-mono", sizeClasses[size], className)}
+      className={cn(
+        "flex items-center font-mono",
+        sizeClasses[size],
+        className,
+      )}
     >
       <motion.span
         initial={{ opacity: 0 }}
@@ -35,7 +67,7 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
         transition={{ delay: 0.02, duration: 0.05, ease: "easeOut" }}
         className="text-primary font-bold tracking-tight"
       >
-        $
+        {icon}
       </motion.span>
       {size !== "icon" && (
         <>
@@ -51,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"
           >
-            been
+            {logoPrefix}
           </motion.span>
           <motion.span
             initial={{ opacity: 0 }}
@@ -59,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"
           >
-            voice
+            {logoSuffix}
           </motion.span>
         </>
       )}
@@ -71,19 +103,35 @@ function LogoContent({
   className,
   size,
   sizeClasses,
+  logoPrefix,
+  logoSuffix,
+  icon,
 }: {
   className?: string;
   size: "sm" | "md" | "lg" | "xl" | "icon";
   sizeClasses: Record<string, string>;
+  logoPrefix: string;
+  logoSuffix: string;
+  icon: string;
 }) {
   return (
-    <div className={cn("flex items-center font-mono", sizeClasses[size], className)}>
-      <span className="text-primary font-bold tracking-tight">$</span>
+    <div
+      className={cn(
+        "flex items-center font-mono",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      <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">been</span>
-          <span className="text-foreground/70 font-bold tracking-tight">voice</span>
+          <span className="text-foreground font-bold tracking-tight">
+            {logoPrefix}
+          </span>
+          <span className="text-foreground/70 font-bold tracking-tight">
+            {logoSuffix}
+          </span>
         </>
       )}
     </div>

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/invoice-view.tsx

@@ -1,516 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { api } from "~/trpc/react";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-
-import { StatusBadge, type StatusType } from "~/components/data/status-badge";
-import { Separator } from "~/components/ui/separator";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import { toast } from "sonner";
-import { format } from "date-fns";
-import {
-  FileText,
-  User,
-  DollarSign,
-  Trash2,
-  Download,
-  Send,
-  Clock,
-  MapPin,
-  Mail,
-  Phone,
-  AlertCircle,
-} from "lucide-react";
-import Link from "next/link";
-import { generateInvoicePDF } from "~/lib/pdf-export";
-import { Skeleton } from "~/components/ui/skeleton";
-
-interface InvoiceViewProps {
-  invoiceId: string;
-}
-
-const statusIconConfig = {
-  draft: FileText,
-  sent: Send,
-  paid: DollarSign,
-  overdue: AlertCircle,
-} as const;
-
-export function InvoiceView({ invoiceId }: InvoiceViewProps) {
-  const router = useRouter();
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [isExportingPDF, setIsExportingPDF] = useState(false);
-
-  // Fetch invoice data
-  const {
-    data: invoice,
-    isLoading,
-    refetch,
-  } = api.invoices.getById.useQuery({ id: invoiceId });
-
-  // Delete mutation
-  const deleteInvoice = api.invoices.delete.useMutation({
-    onSuccess: () => {
-      toast.success("Invoice deleted successfully");
-      setDeleteDialogOpen(false);
-      router.push("/dashboard/invoices");
-    },
-    onError: (error) => {
-      toast.error(error.message ?? "Failed to delete invoice");
-    },
-  });
-
-  // Update status mutation
-  const updateStatus = api.invoices.updateStatus.useMutation({
-    onSuccess: () => {
-      toast.success("Status updated successfully");
-      void refetch();
-    },
-    onError: (error) => {
-      toast.error(error.message ?? "Failed to update status");
-    },
-  });
-
-  const handleDelete = () => {
-    setDeleteDialogOpen(true);
-  };
-
-  const confirmDelete = () => {
-    deleteInvoice.mutate({ id: invoiceId });
-  };
-
-  const handleStatusUpdate = (newStatus: "draft" | "sent" | "paid") => {
-    updateStatus.mutate({ id: invoiceId, status: newStatus });
-  };
-
-  const handlePDFExport = async () => {
-    if (!invoice) return;
-
-    setIsExportingPDF(true);
-    try {
-      await generateInvoicePDF(invoice);
-      toast.success("PDF exported successfully");
-    } catch (error) {
-      console.error("PDF export error:", error);
-      toast.error("Failed to export PDF. Please try again.");
-    } finally {
-      setIsExportingPDF(false);
-    }
-  };
-
-  const formatCurrency = (amount: number, currency = "USD") => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency,
-    }).format(amount);
-  };
-
-  const formatDate = (date: Date) => {
-    return format(new Date(date), "MMM dd, yyyy");
-  };
-
-  const isOverdue =
-    invoice &&
-    new Date(invoice.dueDate) < new Date() &&
-    invoice.status !== "paid";
-
-  if (isLoading) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-8 w-48" />
-            <Skeleton className="h-4 w-24" />
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-3/4" />
-              <Skeleton className="h-4 w-1/2" />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
-  if (!invoice) {
-    return (
-      <div className="py-12 text-center">
-        <FileText className="text-muted mx-auto mb-4 h-12 w-12" />
-        <h3 className="text-foreground mb-2 text-lg font-medium">
-          Invoice not found
-        </h3>
-        <p className="text-muted mb-4">
-          The invoice you&apos;re looking for doesn&apos;t exist or has been
-          deleted.
-        </p>
-        <Button asChild>
-          <Link href="/dashboard/invoices">Back to Invoices</Link>
-        </Button>
-      </div>
-    );
-  }
-
-  const StatusIcon =
-    statusIconConfig[invoice.status as keyof typeof statusIconConfig];
-
-  return (
-    <div className="space-y-6">
-      {/* Status Alert */}
-      {isOverdue && (
-        <Card className="border-destructive/20 bg-destructive/10">
-          <CardContent className="p-4">
-            <div className="text-destructive flex items-center gap-2">
-              <AlertCircle className="h-5 w-5" />
-              <span className="font-medium">This invoice is overdue</span>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Main Content */}
-        <div className="space-y-6 lg:col-span-2">
-          {/* Invoice Header Card */}
-          <Card className="bg-card border-border border">
-            <CardContent>
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                <div className="min-w-0 flex-1 space-y-4">
-                  <div className="flex items-center gap-3">
-                    <div className="bg-primary/10 flex-shrink-0 p-2">
-                      <FileText className="text-primary h-6 w-6" />
-                    </div>
-                    <div className="min-w-0">
-                      <h2 className="text-foreground truncate text-2xl font-bold">
-                        {invoice.invoiceNumber}
-                      </h2>
-                      <p className="text-muted-foreground">
-                        Professional Invoice
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-6 text-sm">
-                    <div>
-                      <span className="text-muted-foreground">Issue Date</span>
-                      <p className="text-foreground font-medium">
-                        {formatDate(invoice.issueDate)}
-                      </p>
-                    </div>
-                    <div>
-                      <span className="text-muted-foreground">Due Date</span>
-                      <p className="text-foreground font-medium">
-                        {formatDate(invoice.dueDate)}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex flex-row items-center justify-between gap-3 sm:flex-col sm:items-end sm:text-right">
-                  <div>
-                    <StatusBadge
-                      status={invoice.status as StatusType}
-                      className="px-3 py-1 text-sm font-medium"
-                    >
-                      <StatusIcon className="mr-1 h-3 w-3" />
-                    </StatusBadge>
-                    <div className="text-primary mt-1 text-2xl font-bold sm:text-3xl">
-                      {formatCurrency(invoice.totalAmount)}
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handlePDFExport}
-                    disabled={isExportingPDF}
-                    variant="default"
-                    className="flex-shrink-0 transform-none"
-                  >
-                    {isExportingPDF ? (
-                      <>
-                        <div className="mr-2 h-4 w-4 animate-spin border-2 border-white border-t-transparent" />
-                        Generating PDF...
-                      </>
-                    ) : (
-                      <>
-                        <Download className="mr-2 h-4 w-4" />
-                        Download PDF
-                      </>
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Client Information */}
-          <Card className="bg-card border-border border">
-            <CardHeader>
-              <CardTitle className="text-primary flex items-center gap-2">
-                <User className="h-5 w-5" />
-                Bill To
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <h3 className="text-foreground text-lg font-semibold">
-                  {invoice.client?.name}
-                </h3>
-              </div>
-
-              <div className="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
-                {invoice.client?.email && (
-                  <div className="text-muted-foreground flex items-center gap-2">
-                    <Mail className="text-muted-foreground h-4 w-4" />
-                    {invoice.client.email}
-                  </div>
-                )}
-                {invoice.client?.phone && (
-                  <div className="text-muted-foreground flex items-center gap-2">
-                    <Phone className="text-muted-foreground h-4 w-4" />
-                    {invoice.client.phone}
-                  </div>
-                )}
-                {(invoice.client?.addressLine1 ??
-                  invoice.client?.city ??
-                  invoice.client?.state) && (
-                  <div className="text-muted-foreground flex items-start gap-2 md:col-span-2">
-                    <MapPin className="text-muted-foreground mt-0.5 h-4 w-4 flex-shrink-0" />
-                    <div>
-                      {invoice.client?.addressLine1 && (
-                        <div>{invoice.client.addressLine1}</div>
-                      )}
-                      {invoice.client?.addressLine2 && (
-                        <div>{invoice.client.addressLine2}</div>
-                      )}
-                      {(invoice.client?.city ??
-                        invoice.client?.state ??
-                        invoice.client?.postalCode) && (
-                        <div>
-                          {[
-                            invoice.client?.city,
-                            invoice.client?.state,
-                            invoice.client?.postalCode,
-                          ]
-                            .filter(Boolean)
-                            .join(", ")}
-                        </div>
-                      )}
-                      {invoice.client?.country && (
-                        <div>{invoice.client.country}</div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Invoice Items */}
-          <Card className="bg-secondary border-border border">
-            <CardHeader>
-              <CardTitle className="text-primary flex items-center gap-2">
-                <Clock className="h-5 w-5" />
-                Invoice Items
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-2">
-                {invoice.items?.map((item, index) => (
-                  <div
-                    key={item.id || index}
-                    className="bg-background flex flex-col gap-1 rounded-lg p-4 sm:flex-row sm:items-center sm:justify-between"
-                  >
-                    <div className="min-w-0 flex-1">
-                      <div className="text-foreground font-medium break-words">
-                        {item.description}
-                      </div>
-                      <div className="text-muted-foreground mt-0.5 text-sm">
-                        {formatDate(item.date)} &middot; {item.hours}h @{" "}
-                        {formatCurrency(item.rate)}/hr
-                      </div>
-                    </div>
-                    <div className="text-foreground flex-shrink-0 font-medium sm:text-right">
-                      {formatCurrency(item.amount)}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Notes */}
-          {invoice.notes && (
-            <Card className="bg-card border-border border">
-              <CardHeader>
-                <CardTitle className="text-primary">Notes</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-muted-foreground whitespace-pre-wrap">
-                  {invoice.notes}
-                </p>
-              </CardContent>
-            </Card>
-          )}
-        </div>
-
-        {/* Sidebar */}
-        <div className="space-y-6">
-          {/* Status Actions */}
-          <Card className="bg-secondary border-border border">
-            <CardHeader>
-              <CardTitle className="text-primary">Status Actions</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {invoice.status === "draft" && (
-                <Button
-                  onClick={() => handleStatusUpdate("sent")}
-                  disabled={updateStatus.isPending}
-                  className="w-full"
-                >
-                  <Send className="mr-2 h-4 w-4" />
-                  Mark as Sent
-                </Button>
-              )}
-
-              {invoice.status === "sent" && (
-                <Button
-                  onClick={() => handleStatusUpdate("paid")}
-                  disabled={updateStatus.isPending}
-                  className="w-full"
-                >
-                  <DollarSign className="mr-2 h-4 w-4" />
-                  Mark as Paid
-                </Button>
-              )}
-
-              {invoice.status === "overdue" && (
-                <Button
-                  onClick={() => handleStatusUpdate("paid")}
-                  disabled={updateStatus.isPending}
-                  className="w-full"
-                >
-                  <DollarSign className="mr-2 h-4 w-4" />
-                  Mark as Paid
-                </Button>
-              )}
-
-              {invoice.status === "paid" && (
-                <div className="py-4 text-center">
-                  <DollarSign className="text-primary mx-auto mb-2 h-8 w-8" />
-                  <p className="text-primary font-medium">Invoice Paid</p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-
-          {/* Invoice Summary */}
-          <Card className="bg-card border-border border">
-            <CardHeader>
-              <CardTitle className="text-primary">Summary</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-3">
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Subtotal</span>
-                  <span className="text-foreground font-medium">
-                    {formatCurrency(invoice.totalAmount, invoice.currency)}
-                  </span>
-                </div>
-                {(invoice.taxRate ?? 0) > 0 && (
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      Tax ({((invoice.taxRate ?? 0) * 100).toFixed(1)}%)
-                    </span>
-                    <span className="text-foreground font-medium">
-                      {formatCurrency(
-                        invoice.totalAmount * (invoice.taxRate ?? 0),
-                        invoice.currency,
-                      )}
-                    </span>
-                  </div>
-                )}
-                <Separator />
-                <div className="flex justify-between text-lg font-bold">
-                  <span className="text-foreground">Total</span>
-                  <span className="text-primary">
-                    {formatCurrency(
-                      invoice.totalAmount * (1 + (invoice.taxRate ?? 0)),
-                      invoice.currency,
-                    )}
-                  </span>
-                </div>
-              </div>
-
-              <div className="border-border border-t pt-4 text-center">
-                <p className="text-muted-foreground text-sm">
-                  {invoice.items?.length ?? 0} item
-                  {invoice.items?.length !== 1 ? "s" : ""}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Danger Zone */}
-          <Card className="bg-card border-destructive/20 border">
-            <CardHeader>
-              <CardTitle className="text-destructive">Danger Zone</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Button
-                onClick={handleDelete}
-                variant="destructive"
-                className="w-full"
-              >
-                <Trash2 className="mr-2 h-4 w-4" />
-                Delete Invoice
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="bg-card border-border border">
-          <DialogHeader>
-            <DialogTitle className="text-foreground text-xl font-bold">
-              Delete Invoice
-            </DialogTitle>
-            <DialogDescription className="text-muted-foreground">
-              Are you sure you want to delete this invoice? This action cannot
-              be undone and will permanently remove the invoice and all its
-              data.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setDeleteDialogOpen(false)}
-              className="border-border text-muted-foreground hover:bg-muted"
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={confirmDelete}
-              disabled={deleteInvoice.isPending}
-              className="bg-destructive hover:bg-destructive/90"
-            >
-              {deleteInvoice.isPending ? "Deleting..." : "Delete Invoice"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

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/email-composer.tsx

@@ -96,7 +96,7 @@ export function EmailComposer({
     content: customMessage,
     immediatelyRender: false,
     onUpdate: ({ editor }) => {
-      onCustomMessageChange?.(editor.getHTML());
+      onCustomMessageChange?.(editor.isEmpty ? "" : editor.getHTML());
     },
     editorProps: {
       attributes: {
@@ -109,7 +109,7 @@ export function EmailComposer({
   // Update editor content when customMessage prop changes
   useEffect(() => {
     if (editor && customMessage !== undefined) {
-      const currentContent = editor.getHTML();
+      const currentContent = editor.isEmpty ? "" : editor.getHTML();
       if (currentContent !== customMessage) {
         editor.commands.setContent(customMessage);
       }
@@ -133,9 +133,9 @@ export function EmailComposer({
 
   if (!editor) {
     return (
-      <div className="bg-muted flex h-[200px] items-center justify-center  border">
+      <div className="bg-muted flex h-[200px] items-center justify-center border">
         <div className="text-center">
-          <div className="border-primary mx-auto mb-2 h-4 w-4 animate-spin  border-2 border-t-transparent"></div>
+          <div className="border-primary mx-auto mb-2 h-4 w-4 animate-spin border-2 border-t-transparent"></div>
           <p className="text-muted-foreground text-sm">Loading editor...</p>
         </div>
       </div>
@@ -145,7 +145,7 @@ export function EmailComposer({
   return (
     <div className={className}>
       {/* Email Headers */}
-      <div className="bg-muted/20 space-y-4  border p-4">
+      <div className="bg-muted/20 space-y-4 border p-4">
         <div className="grid grid-cols-2 gap-4">
           <div className="space-y-2">
             <Label htmlFor="from-email" className="text-sm font-medium">
@@ -222,16 +222,15 @@ export function EmailComposer({
       {onCustomMessageChange && (
         <div className="space-y-4">
           <div>
-            <Label className="text-sm font-medium">
-              Custom Message (Optional)
-            </Label>
+            <Label className="text-sm font-medium">Email Note (Optional)</Label>
             <p className="text-muted-foreground mb-2 text-xs">
-              This message will appear between the greeting and invoice summary
+              This appears only in the email body and is not added to the
+              invoice PDF.
             </p>
           </div>
 
           {/* Editor Toolbar */}
-          <div className="bg-muted/20 flex flex-wrap items-center gap-1  border p-2">
+          <div className="bg-muted/20 flex flex-wrap items-center gap-1 border p-2">
             <MenuButton
               onClick={() => editor.chain().focus().toggleBold().run()}
               isActive={editor.isActive("bold")}

src/components/forms/email-preview.tsx

@@ -17,6 +17,7 @@ interface EmailPreviewProps {
     taxRate: number;
     status?: string;
     totalAmount?: number;
+    currency?: string | null;
     client?: {
       name: string;
       email: string | null;
@@ -27,8 +28,11 @@ interface EmailPreviewProps {
     };
     items?: Array<{
       id: string;
+      date?: Date;
+      description?: string;
       hours: number;
       rate: number;
+      amount?: number;
     }>;
   };
   className?: string;
@@ -66,7 +70,7 @@ export function EmailPreview({
           status: invoice.status ?? "draft",
           totalAmount: invoice.totalAmount ?? calculateTotal(),
           taxRate: invoice.taxRate,
-          notes: null,
+          currency: invoice.currency,
           client: {
             name: invoice.client?.name ?? "Client",
             email: invoice.client?.email ?? null,
@@ -74,11 +78,11 @@ export function EmailPreview({
           business: invoice.business ?? null,
           items:
             invoice.items?.map((item) => ({
-              date: new Date(),
-              description: "Service",
+              date: item.date ?? new Date(),
+              description: item.description ?? "Service",
               hours: item.hours,
               rate: item.rate,
-              amount: item.hours * item.rate,
+              amount: item.amount ?? item.hours * item.rate,
             })) ?? [],
         },
         customContent: content,
@@ -95,7 +99,7 @@ export function EmailPreview({
   return (
     <div className={className}>
       {/* Email Headers */}
-      <div className="bg-muted/20 mb-4 space-y-3  p-4">
+      <div className="bg-muted/20 mb-4 space-y-3 p-4">
         <div className="grid grid-cols-1 gap-3 text-sm md:grid-cols-3">
           <div>
             <span className="text-muted-foreground block text-xs font-medium">
@@ -142,7 +146,7 @@ export function EmailPreview({
 
       {/* Email Content */}
       {emailTemplate ? (
-        <div className=" border bg-gray-50 p-1 shadow-sm">
+        <div className="border bg-gray-50 p-1 shadow-sm">
           <iframe
             srcDoc={emailTemplate.html}
             className="h-[700px] w-full rounded border-0"

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

@@ -20,6 +20,7 @@ import { NumberInput } from "~/components/ui/number-input";
 import { PageHeader } from "~/components/layout/page-header";
 import { InvoiceLineItems } from "./invoice-line-items";
 import { InvoiceCalendarView } from "./invoice-calendar-view";
+import { EmailPreview } from "./email-preview";
 import { api } from "~/trpc/react";
 import { toast } from "sonner";
 import {
@@ -30,6 +31,7 @@ import {
   List,
   FileText,
   ChevronDown,
+  Mail,
 } from "lucide-react";
 import { SUPPORTED_CURRENCIES } from "~/lib/currency";
 import { Textarea } from "~/components/ui/textarea";
@@ -58,7 +60,7 @@ interface InvoiceFormProps {
 
 function InvoiceFormSkeleton() {
   return (
-    <div className="space-y-6 pb-32">
+    <div className="space-y-6 pb-8">
       <PageHeader
         title="Loading..."
         description="Loading invoice form"
@@ -74,12 +76,25 @@ function InvoiceFormSkeleton() {
   );
 }
 
-export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
-  const router = useRouter();
-  const utils = api.useUtils();
+function getDefaultHourlyRate(value: unknown) {
+  if (typeof value !== "object" || value === null) return null;
 
-  // State
-  const [formData, setFormData] = useState<InvoiceFormData>({
+  const rate = (value as { defaultHourlyRate?: unknown }).defaultHourlyRate;
+  return typeof rate === "number" ? rate : null;
+}
+
+function plainTextToHtml(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+    .replace(/\n/g, "<br>");
+}
+
+function createDefaultInvoiceFormData(): InvoiceFormData {
+  return {
     invoiceNumber: `INV-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${Date.now().toString().slice(-6)}`,
     invoicePrefix: "#",
     businessId: "",
@@ -88,6 +103,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     dueDate: new Date(),
     status: "draft",
     notes: "",
+    emailMessage: "",
     taxRate: 0,
     currency: "USD",
     defaultHourlyRate: null,
@@ -101,12 +117,23 @@ 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);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("details");
+  const [previewTab, setPreviewTab] = useState("pdf");
 
   // Queries (Same as before)
   const { data: clients, isLoading: loadingClients } =
@@ -132,24 +159,22 @@ 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(() => {
     if (invoiceId && invoiceId !== "new" && existingInvoice && !initialized) {
       // ... (Mapping logic same as before)
       const mappedItems: InvoiceItem[] =
-        existingInvoice.items
-          ?.map((item) => ({
-            id: crypto.randomUUID(),
-            date: new Date(item.date),
-            description: item.description,
-            hours: item.hours,
-            rate: item.rate,
-            amount: item.amount,
-          }))
-          .sort(
-            (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
-          ) || [];
+        existingInvoice.items?.map((item) => ({
+          id: crypto.randomUUID(),
+          date: new Date(item.date),
+          description: item.description,
+          hours: item.hours,
+          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 ?? "#",
@@ -159,6 +184,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
         dueDate: new Date(existingInvoice.dueDate),
         status: existingInvoice.status as "draft" | "sent" | "paid",
         notes: existingInvoice.notes ?? "",
+        emailMessage: existingInvoice.emailMessage ?? "",
         taxRate: existingInvoice.taxRate,
         currency: existingInvoice.currency ?? "USD",
         defaultHourlyRate: existingInvoice.client?.defaultHourlyRate ?? null,
@@ -199,6 +225,55 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     const total = subtotal + taxAmount;
     return { subtotal, taxAmount, total };
   }, [formData.items, formData.taxRate]);
+  const emailPreviewMessage = React.useMemo(
+    () => plainTextToHtml(formData.emailMessage.trim()),
+    [formData.emailMessage],
+  );
+
+  const pdfPreviewInput = React.useMemo(
+    () => ({
+      invoiceNumber: formData.invoiceNumber,
+      invoicePrefix: formData.invoicePrefix,
+      businessId: formData.businessId || "",
+      clientId: formData.clientId,
+      issueDate: formData.issueDate,
+      dueDate: formData.dueDate,
+      status: formData.status,
+      notes: formData.notes,
+      emailMessage: formData.emailMessage,
+      taxRate: formData.taxRate,
+      currency: formData.currency,
+      items: formData.items.map((item) => ({
+        date: item.date,
+        description: item.description || "Service",
+        hours: item.hours,
+        rate: item.rate,
+      })),
+    }),
+    [formData],
+  );
+
+  const { data: pdfPreview, isFetching: pdfPreviewLoading } =
+    api.invoices.previewPdf.useQuery(pdfPreviewInput, {
+      enabled:
+        activeTab === "preview" &&
+        previewTab === "pdf" &&
+        Boolean(formData.clientId) &&
+        formData.items.length > 0 &&
+        formData.items.every((item) => item.description.trim() !== ""),
+      refetchOnWindowFocus: false,
+      staleTime: 0,
+    });
+  const selectedClient = React.useMemo(
+    () => clients?.find((client) => client.id === formData.clientId),
+    [clients, formData.clientId],
+  );
+  const selectedBusiness = React.useMemo(
+    () =>
+      businesses?.find((business) => business.id === formData.businessId) ??
+      businesses?.find((business) => business.isDefault),
+    [businesses, formData.businessId],
+  );
 
   // Handlers (addItem, updateItem etc. - same as before)
   const addItem = (date?: unknown) => {
@@ -327,19 +402,16 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
         dueDate: formData.dueDate,
         status: formData.status,
         notes: formData.notes,
+        emailMessage: formData.emailMessage,
         taxRate: formData.taxRate,
         currency: formData.currency,
-        items: formData.items
-          .sort(
-            (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
-          )
-          .map((i) => ({
-            date: i.date,
-            description: i.description,
-            hours: i.hours,
-            rate: i.rate,
-            amount: i.hours * i.rate,
-          })),
+        items: formData.items.map((i) => ({
+          date: i.date,
+          description: i.description,
+          hours: i.hours,
+          rate: i.rate,
+          amount: i.hours * i.rate,
+        })),
       };
       if (invoiceId && invoiceId !== "new" && invoiceId !== undefined)
         await updateInvoice.mutateAsync({ id: invoiceId, ...payload });
@@ -370,7 +442,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
   return (
     <>
-      <div className="page-enter space-y-6 pb-32">
+      <div className="page-enter space-y-6 pb-8">
         <PageHeader
           title={invoiceId !== "new" ? "Edit Invoice" : "Create Invoice"}
           description="Manage your invoice"
@@ -393,7 +465,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
         <Tabs value={activeTab} className="w-full" onValueChange={setActiveTab}>
           {/* TAB SELECTOR: w-full, p-1, visible background */}
-          <TabsList className="bg-muted grid h-auto w-full grid-cols-3 rounded-xl p-1">
+          <TabsList className="bg-muted grid h-auto w-full grid-cols-4 rounded-xl p-1">
             <TabsTrigger
               value="details"
               className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
@@ -412,6 +484,12 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             >
               Timesheet
             </TabsTrigger>
+            <TabsTrigger
+              value="preview"
+              className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
+            >
+              Preview
+            </TabsTrigger>
           </TabsList>
 
           {/* DETAILS TAB */}
@@ -419,7 +497,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             value="details"
             className="mt-6 grid grid-cols-1 gap-6 focus-visible:outline-none lg:grid-cols-2"
           >
-            <Card className="h-fit">
+            <Card className="h-full">
               <CardHeader>
                 <CardTitle className="flex gap-2 text-base">
                   <User className="h-4 w-4" /> Client Details
@@ -436,18 +514,12 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                       const currentBusiness = businesses?.find(
                         (b) => b.id === formData.businessId,
                       );
-                      const clientRate =
-                        selectedClient && "defaultHourlyRate" in selectedClient
-                          ? selectedClient.defaultHourlyRate
-                          : null;
+                      const clientRate = getDefaultHourlyRate(selectedClient);
                       const businessRate =
-                        currentBusiness &&
-                        "defaultHourlyRate" in currentBusiness
-                          ? currentBusiness.defaultHourlyRate
-                          : null;
+                        getDefaultHourlyRate(currentBusiness);
                       updateField(
                         "defaultHourlyRate",
-                        (clientRate ?? businessRate ?? 0) as number,
+                        clientRate ?? businessRate ?? 0,
                       );
                       // Auto-fill currency from client
                       if (
@@ -455,10 +527,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                         "currency" in selectedClient &&
                         selectedClient.currency
                       ) {
-                        updateField(
-                          "currency",
-                          selectedClient.currency as string,
-                        );
+                        updateField("currency", selectedClient.currency);
                       }
                     }}
                   >
@@ -495,10 +564,10 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </CardContent>
             </Card>
 
-            <Card className="h-fit">
+            <Card className="h-full">
               <CardHeader>
                 <CardTitle className="flex gap-2 text-base">
-                  <Tag className="h-4 w-4" /> Invoice Config
+                  <Tag className="h-4 w-4" /> Invoice Settings
                 </CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -524,7 +593,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                     />
                   </div>
                 </div>
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-[96px_1fr] sm:gap-4">
                   <div className="space-y-2">
                     <Label>Prefix</Label>
                     <Input
@@ -536,6 +605,17 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                       className="w-full"
                     />
                   </div>
+                  <div className="space-y-2">
+                    <Label>Invoice Number</Label>
+                    <Input
+                      value={formData.invoiceNumber}
+                      onChange={(e) =>
+                        updateField("invoiceNumber", e.target.value)
+                      }
+                      placeholder="INV-20260428-000001"
+                      className="w-full font-mono"
+                    />
+                  </div>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
@@ -601,12 +681,29 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </CardContent>
             </Card>
 
-            {/* Notes card — spans both columns */}
-            <Card className="h-fit lg:col-span-2">
+            <Card className="h-fit">
               <CardHeader>
                 <CardTitle className="flex items-center justify-between gap-2 text-base">
                   <span className="flex items-center gap-2">
-                    <FileText className="h-4 w-4" /> Notes
+                    <Mail className="h-4 w-4" /> Email Message
+                  </span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Textarea
+                  value={formData.emailMessage}
+                  onChange={(e) => updateField("emailMessage", e.target.value)}
+                  placeholder="Add a note that appears only in the email body..."
+                  className="min-h-[140px]"
+                />
+              </CardContent>
+            </Card>
+
+            <Card className="h-fit">
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between gap-2 text-base">
+                  <span className="flex items-center gap-2">
+                    <FileText className="h-4 w-4" /> Invoice Notes
                   </span>
                   {noteTemplates && noteTemplates.length > 0 && (
                     <DropdownMenu>
@@ -637,8 +734,8 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                 <Textarea
                   value={formData.notes}
                   onChange={(e) => updateField("notes", e.target.value)}
-                  placeholder="Add notes, payment terms, or other information for the client…"
-                  className="min-h-[100px]"
+                  placeholder="Add notes, payment terms, or other information for the invoice/PDF..."
+                  className="min-h-[140px]"
                 />
               </CardContent>
             </Card>
@@ -717,6 +814,122 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </CardContent>
             </Card>
           </TabsContent>
+
+          <TabsContent
+            value="preview"
+            className="mt-6 focus-visible:outline-none"
+          >
+            <Tabs
+              value={previewTab}
+              onValueChange={setPreviewTab}
+              className="w-full"
+            >
+              <TabsList className="bg-muted grid h-auto w-full grid-cols-2 rounded-xl p-1">
+                <TabsTrigger
+                  value="pdf"
+                  className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
+                >
+                  PDF
+                </TabsTrigger>
+                <TabsTrigger
+                  value="email"
+                  className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
+                >
+                  Email
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="pdf" className="mt-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex gap-2">
+                      <FileText className="h-5 w-5" /> PDF Preview
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-0">
+                    <div className="bg-muted/20 h-[760px] overflow-hidden border-t">
+                      {!formData.clientId ? (
+                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+                          Select a client to generate the PDF preview.
+                        </div>
+                      ) : formData.items.some(
+                          (item) => item.description.trim() === "",
+                        ) ? (
+                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+                          Add descriptions for all line items to generate the
+                          PDF preview.
+                        </div>
+                      ) : pdfPreviewLoading && !pdfPreview ? (
+                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+                          Generating server PDF preview...
+                        </div>
+                      ) : pdfPreview ? (
+                        <iframe
+                          title="Server-generated PDF preview"
+                          src={`data:${pdfPreview.contentType};base64,${pdfPreview.base64}`}
+                          className="h-full w-full border-0"
+                        />
+                      ) : (
+                        <div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
+                          PDF preview will appear here.
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value="email" className="mt-6">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex gap-2">
+                      <Mail className="h-5 w-5" /> Email Preview
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <EmailPreview
+                      subject={`Invoice ${formData.invoiceNumber} from ${
+                        selectedBusiness?.name ?? "Your Business"
+                      }`}
+                      fromEmail={selectedBusiness?.email ?? ""}
+                      toEmail={selectedClient?.email ?? ""}
+                      content=""
+                      customMessage={emailPreviewMessage}
+                      invoice={{
+                        invoiceNumber: formData.invoiceNumber,
+                        issueDate: formData.issueDate,
+                        dueDate: formData.dueDate,
+                        taxRate: formData.taxRate,
+                        status: formData.status,
+                        totalAmount: totals.total,
+                        currency: formData.currency,
+                        client: selectedClient
+                          ? {
+                              name: selectedClient.name,
+                              email: selectedClient.email,
+                            }
+                          : undefined,
+                        business: selectedBusiness
+                          ? {
+                              name: selectedBusiness.name,
+                              email: selectedBusiness.email,
+                            }
+                          : undefined,
+                        items: formData.items.map((item) => ({
+                          id: item.id,
+                          date: item.date,
+                          description: item.description,
+                          hours: item.hours,
+                          rate: item.rate,
+                          amount: item.hours * item.rate,
+                        })),
+                      }}
+                    />
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </Tabs>
+          </TabsContent>
         </Tabs>
       </div>
 

src/components/forms/invoice-line-items.tsx

@@ -49,79 +49,59 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
       <div
         ref={ref}
         className={cn(
-          "bg-card group hover:border-primary/20 hidden rounded-xl border p-4 shadow-sm transition-all md:block",
+          "group hover:bg-muted/40 hidden min-h-16 grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] items-center gap-2 border-b px-3 py-2 transition-colors md:grid",
         )}
       >
-        <div className="flex items-center gap-3">
-          {/* Main Content */}
-          <div className="flex-1 space-y-3">
-            {/* Description */}
-            <div>
-              <Input
-                value={item.description}
-                onChange={(e) => onUpdate(index, "description", e.target.value)}
-                placeholder="Describe the work performed..."
-                className="w-full text-sm font-medium"
-              />
-            </div>
+        <DatePicker
+          date={item.date}
+          onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
+          size="sm"
+          className="w-full"
+          inputClassName="h-9"
+        />
 
-            {/* Controls Row */}
-            <div className="flex flex-wrap items-center gap-3">
-              {/* Date */}
-              <DatePicker
-                date={item.date}
-                onDateChange={(date) =>
-                  onUpdate(index, "date", date ?? new Date())
-                }
-                size="sm"
-                className="w-full sm:w-[180px]"
-                inputClassName="h-9"
-              />
+        <Input
+          value={item.description}
+          onChange={(e) => onUpdate(index, "description", e.target.value)}
+          placeholder="Describe the work performed..."
+          className="h-9 w-full text-sm font-medium"
+        />
 
-              {/* Hours */}
-              <NumberInput
-                value={item.hours}
-                onChange={(value) => onUpdate(index, "hours", value)}
-                min={0}
-                step={0.25}
-                width="auto"
-                className="h-9 min-w-[100px] flex-1 font-mono"
-                suffix="h"
-              />
+        <NumberInput
+          value={item.hours}
+          onChange={(value) => onUpdate(index, "hours", value)}
+          min={0}
+          step={0.25}
+          width="full"
+          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-12"
+          suffix="h"
+        />
 
-              {/* Rate */}
-              <NumberInput
-                value={item.rate}
-                onChange={(value) => onUpdate(index, "rate", value)}
-                min={0}
-                step={1}
-                prefix="$"
-                width="auto"
-                className="h-9 min-w-[100px] flex-1 font-mono"
-              />
+        <NumberInput
+          value={item.rate}
+          onChange={(value) => onUpdate(index, "rate", value)}
+          min={0}
+          step={1}
+          prefix="$"
+          width="full"
+          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-14"
+        />
 
-              {/* Amount */}
-              <div className="ml-auto">
-                <span className="text-primary font-semibold">
-                  ${(item.hours * item.rate).toFixed(2)}
-                </span>
-              </div>
-
-              {/* Actions */}
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => onRemove(index)}
-                className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-                disabled={!canRemove}
-                aria-label="Remove item"
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+        <div className="text-primary text-right font-mono font-semibold">
+          ${(item.hours * item.rate).toFixed(2)}
         </div>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onRemove(index)}
+          className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
+          disabled={!canRemove}
+          aria-label="Remove item"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
       </div>
     );
   },
@@ -240,7 +220,15 @@ export function InvoiceLineItems({
   return (
     <div className={cn("space-y-2", className)}>
       <AnimatePresence>
-        <div className="space-y-2">
+        <div className="space-y-2 md:space-y-0 md:overflow-hidden md:rounded-lg md:border">
+          <div className="bg-muted/60 text-muted-foreground hidden grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] gap-2 border-b px-3 py-2 text-xs font-medium md:grid">
+            <span>Date</span>
+            <span>Description</span>
+            <span className="text-right">Hours</span>
+            <span className="text-right">Rate</span>
+            <span className="text-right">Amount</span>
+            <span />
+          </div>
           {items.map((item, index) => (
             <React.Fragment key={item.id}>
               {/* Desktop/Tablet Card */}
@@ -275,19 +263,15 @@ export function InvoiceLineItems({
       </AnimatePresence>
 
       {/* Add Item Button */}
-      <div className="px-3 pt-3">
-        <div className="border-t pt-6">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onAddItem}
-            className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 w-full border-dashed py-8 transition-all"
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            Add Line Item
-          </Button>
-        </div>
-      </div>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onAddItem}
+        className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 mt-3 w-full border-dashed py-6 transition-all"
+      >
+        <Plus className="mr-2 h-4 w-4" />
+        Add Line Item
+      </Button>
     </div>
   );
 }

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/invoice/types.ts

@@ -21,6 +21,7 @@ export interface InvoiceFormData {
   dueDate: Date;
   status: "draft" | "sent" | "paid";
   notes: string;
+  emailMessage: string;
   taxRate: number;
   currency: string;
   defaultHourlyRate: number | null;

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

@@ -1,451 +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;
-    client?: {
-      name: string;
-      email: string | null;
-    };
-    business?: {
-      name: string;
-      email: string | null;
-    };
-    items?: Array<{
-      id: string;
-      hours: number;
-      rate: 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,76 +2,87 @@
 
 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";
 import { Button } from "~/components/ui/button";
 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 [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="md:hidden fixed top-0 left-0 right-0 h-16 bg-background/80 backdrop-blur-md border-b z-50 px-4 flex items-center">
-                <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",
-                    // Desktop margins based on collapsed state
-                    "md:ml-0",
-                    // Sidebar is fixed at left: 1rem (16px), width: 16rem (256px) or 4rem (64px)
-                    // We need margin-left = left + width + gap
-                    // Expanded: 16px + 256px + 16px (gap) = 288px (18rem)
-                    // Collapsed: 16px + 64px + 16px (gap) = 96px (6rem)
-                    isCollapsed ? "md:ml-24" : "md:ml-[18rem]"
-                )}
+      {/* 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/floating-action-bar.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { cn } from "~/lib/utils";
 import { Card, CardContent } from "~/components/ui/card";
+import { useAppearance } from "~/components/providers/appearance-provider";
+import { useSidebar } from "~/components/layout/sidebar-provider";
 
 interface FloatingActionBarProps {
   /** Content to display on the left side */
@@ -13,74 +15,38 @@ interface FloatingActionBarProps {
   className?: string;
 }
 
-import { useSidebar } from "~/components/layout/sidebar-provider";
-
 export function FloatingActionBar({
   leftContent,
   children,
   className,
 }: FloatingActionBarProps) {
-  const [isDocked, setIsDocked] = useState(false);
   const { isCollapsed } = useSidebar();
-
-  useEffect(() => {
-    const handleScroll = () => {
-      // Check if we're truly at the bottom of the page
-      const scrollHeight = document.documentElement.scrollHeight;
-      const scrollTop = document.documentElement.scrollTop;
-      const clientHeight = document.documentElement.clientHeight;
-      const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-
-      // Only dock when we're within 50px of the actual bottom AND there's content to scroll
-      const hasScrollableContent = scrollHeight > clientHeight;
-      const shouldDock = hasScrollableContent && distanceFromBottom <= 50;
-
-      // If content is too small, keep it at bottom of viewport
-      const contentTooSmall = scrollHeight <= clientHeight + 200;
-
-      setIsDocked(shouldDock && !contentTooSmall);
-    };
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll(); // Check initial state
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+  const { sidebarStyle } = useAppearance();
 
   return (
     <div
       className={cn(
-        // Base positioning - always at bottom
-        "fixed right-0 z-50 transition-all duration-300 ease-in-out",
-        // Safe area and sidebar adjustments
-        "pb-safe-area-inset-bottom left-0",
-        isCollapsed ? "md:left-24" : "md:left-[18rem]",
-        // Conditional centering based on dock state
-        isDocked ? "flex justify-center" : "",
-        // Dynamic bottom positioning
-        isDocked ? "bottom-4" : "bottom-0",
-        // Add entrance animation
+        "pb-safe-area-inset-bottom fixed right-0 bottom-4 left-0 z-50 transition-all duration-300 ease-in-out",
+        sidebarStyle === "floating"
+          ? isCollapsed
+            ? "md:left-24"
+            : "md:left-[18rem]"
+          : isCollapsed
+            ? "md:left-16"
+            : "md:left-64",
         "animate-slide-in-bottom",
         className,
       )}
     >
-      {/* Content container - full width when floating, content width when docked */}
-      <div
-        className={cn(
-          "w-full transition-transform duration-300",
-          isDocked ? "mx-auto mb-0 px-4" : "mb-4 px-4",
-        )}
-      >
+      <div className="w-full px-4 transition-transform duration-300">
         <Card className="hover-lift bg-card border-border border shadow-lg">
           <CardContent className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:justify-between sm:p-4">
-            {/* Left content */}
             {leftContent && (
               <div className="text-card-foreground animate-fade-in flex flex-1 items-center gap-3">
                 {leftContent}
               </div>
             )}
 
-            {/* Right actions */}
             <div className="animate-fade-in animate-delay-100 flex items-center gap-2 sm:gap-3">
               {children}
             </div>

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="rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden relative">
-          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent pointer-events-none" />
-          <div className="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,
@@ -25,6 +26,7 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { getGravatarUrl } from "~/lib/gravatar";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import { useAppearance } from "~/components/providers/appearance-provider";
 
 interface SidebarProps {
   mobile?: boolean;
@@ -36,6 +38,7 @@ export function Sidebar({ mobile, onClose }: SidebarProps) {
   const { data: session, isPending } = authClient.useSession();
   // const session = { user: null } as any; const isPending = false;
   const { isCollapsed, toggleCollapse } = useSidebar();
+  const { sidebarStyle } = useAppearance();
 
   // If mobile, always expanded
   const collapsed = mobile ? false : isCollapsed;
@@ -44,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" />
@@ -61,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>
               )}
@@ -82,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>
@@ -104,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" />
@@ -125,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>
@@ -156,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>
@@ -175,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 />
@@ -190,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
@@ -204,19 +259,17 @@ 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 (
     <aside
       className={cn(
-        "fixed top-4 bottom-4 left-4 z-30 hidden md:flex flex-col",
-        "bg-background/80 backdrop-blur-xl border-border/50 border shadow-xl rounded-3xl transition-all duration-300 ease-in-out",
-        isCollapsed ? "w-16" : "w-64"
+        "fixed z-30 hidden flex-col transition-all duration-300 ease-in-out md:flex",
+        sidebarStyle === "floating"
+          ? "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",
       )}
     >
       {SidebarContent}

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>
           ) : (
@@ -29,4 +32,4 @@ export function Breadcrumbs() {
       ))}
     </nav>
   );
-} 
+}

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

@@ -0,0 +1,409 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  fallbackAppearance,
+  isColorMode,
+  isColorTheme,
+  isFontPreference,
+  isHslChannels,
+  isInterfaceTheme,
+  isPdfTemplate,
+  isRadiusPreference,
+  isSidebarStyle,
+  type PdfTemplate,
+} from "~/lib/appearance";
+import {
+  defaultBodyFontPreference,
+  defaultHeadingFontPreference,
+  defaultInterfaceTheme,
+  defaultRadiusPreference,
+  defaultSidebarStyle,
+  brand as defaultBrand,
+  type ColorMode,
+  type ColorTheme,
+  type FontPreference,
+  type InterfaceTheme,
+  type RadiusPreference,
+  type SidebarStyle,
+} from "~/lib/branding";
+import { api } from "~/trpc/react";
+
+type AppearancePreferences = {
+  interfaceTheme: InterfaceTheme;
+  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;
+};
+
+type AppearancePatch = Partial<AppearancePreferences>;
+
+type ServerAppearance = {
+  interfaceTheme: InterfaceTheme;
+  bodyFontPreference: FontPreference;
+  headingFontPreference: FontPreference;
+  radiusPreference: RadiusPreference;
+  sidebarStyle: SidebarStyle;
+  theme: ColorMode;
+  colorTheme: ColorTheme;
+  customColor?: string;
+  brandName: string;
+  brandTagline: string;
+  brandLogoText: string;
+  brandIcon: string;
+  pdfTemplate: PdfTemplate;
+  pdfAccentColor: string;
+  pdfFooterText: string;
+  pdfShowLogo: boolean;
+  pdfShowPageNumbers: boolean;
+};
+
+type AppearanceContextValue = AppearancePreferences & {
+  updateAppearance: (patch: AppearancePatch) => void;
+  updateAppearanceDebounced: (patch: AppearancePatch) => void;
+  isUpdating: boolean;
+};
+
+const STORAGE_KEY = "bv.appearance";
+
+const defaultAppearance: AppearancePreferences = {
+  interfaceTheme: defaultInterfaceTheme,
+  bodyFontPreference: defaultBodyFontPreference,
+  headingFontPreference: defaultHeadingFontPreference,
+  radiusPreference: defaultRadiusPreference,
+  sidebarStyle: defaultSidebarStyle,
+  colorMode: fallbackAppearance.colorMode,
+  colorTheme: fallbackAppearance.colorTheme,
+  brandName: defaultBrand.name,
+  brandTagline: defaultBrand.tagline,
+  brandLogoText: defaultBrand.logoText,
+  brandIcon: defaultBrand.icon,
+  pdfTemplate: fallbackAppearance.pdfTemplate,
+  pdfAccentColor: fallbackAppearance.pdfAccentColor,
+  pdfFooterText: fallbackAppearance.pdfFooterText,
+  pdfShowLogo: fallbackAppearance.pdfShowLogo,
+  pdfShowPageNumbers: fallbackAppearance.pdfShowPageNumbers,
+};
+
+const AppearanceContext = createContext<AppearanceContextValue | null>(null);
+
+function getServerAppearancePatch(
+  serverAppearance: ServerAppearance,
+): AppearancePatch {
+  return {
+    interfaceTheme: serverAppearance.interfaceTheme,
+    bodyFontPreference: serverAppearance.bodyFontPreference,
+    headingFontPreference: serverAppearance.headingFontPreference,
+    radiusPreference: serverAppearance.radiusPreference,
+    sidebarStyle: serverAppearance.sidebarStyle,
+    colorMode: serverAppearance.theme,
+    colorTheme: serverAppearance.colorTheme,
+    customColor: serverAppearance.customColor,
+    brandName: serverAppearance.brandName,
+    brandTagline: serverAppearance.brandTagline,
+    brandLogoText: serverAppearance.brandLogoText,
+    brandIcon: serverAppearance.brandIcon,
+    pdfTemplate: serverAppearance.pdfTemplate,
+    pdfAccentColor: serverAppearance.pdfAccentColor,
+    pdfFooterText: serverAppearance.pdfFooterText,
+    pdfShowLogo: serverAppearance.pdfShowLogo,
+    pdfShowPageNumbers: serverAppearance.pdfShowPageNumbers,
+  };
+}
+
+function readStoredAppearance(): Partial<AppearancePreferences> | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    return {
+      interfaceTheme: isInterfaceTheme(parsed.interfaceTheme)
+        ? parsed.interfaceTheme
+        : undefined,
+      bodyFontPreference: isFontPreference(parsed.bodyFontPreference)
+        ? parsed.bodyFontPreference
+        : isFontPreference(parsed.fontPreference)
+          ? parsed.fontPreference
+          : undefined,
+      headingFontPreference: isFontPreference(parsed.headingFontPreference)
+        ? parsed.headingFontPreference
+        : isFontPreference(parsed.fontPreference)
+          ? parsed.fontPreference
+          : undefined,
+      radiusPreference: isRadiusPreference(parsed.radiusPreference)
+        ? parsed.radiusPreference
+        : undefined,
+      sidebarStyle: isSidebarStyle(parsed.sidebarStyle)
+        ? parsed.sidebarStyle
+        : undefined,
+      colorMode: isColorMode(parsed.colorMode) ? parsed.colorMode : undefined,
+      colorTheme: isColorTheme(parsed.colorTheme)
+        ? parsed.colorTheme
+        : undefined,
+      customColor: isHslChannels(parsed.customColor)
+        ? parsed.customColor
+        : undefined,
+      brandName:
+        typeof parsed.brandName === "string" ? parsed.brandName : undefined,
+      brandTagline:
+        typeof parsed.brandTagline === "string"
+          ? parsed.brandTagline
+          : undefined,
+      brandLogoText:
+        typeof parsed.brandLogoText === "string"
+          ? parsed.brandLogoText
+          : undefined,
+      brandIcon:
+        typeof parsed.brandIcon === "string" ? parsed.brandIcon : undefined,
+      pdfTemplate: isPdfTemplate(parsed.pdfTemplate)
+        ? parsed.pdfTemplate
+        : undefined,
+      pdfAccentColor:
+        typeof parsed.pdfAccentColor === "string"
+          ? parsed.pdfAccentColor
+          : undefined,
+      pdfFooterText:
+        typeof parsed.pdfFooterText === "string"
+          ? parsed.pdfFooterText
+          : undefined,
+      pdfShowLogo:
+        typeof parsed.pdfShowLogo === "boolean"
+          ? parsed.pdfShowLogo
+          : undefined,
+      pdfShowPageNumbers:
+        typeof parsed.pdfShowPageNumbers === "boolean"
+          ? parsed.pdfShowPageNumbers
+          : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredAppearance(prefs: AppearancePreferences) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+  } catch {
+    // Storage can be unavailable in private browsing or locked-down contexts.
+  }
+}
+
+function applyAppearance(prefs: AppearancePreferences) {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+  root.dataset.interfaceTheme = prefs.interfaceTheme;
+  root.dataset.bodyFont = prefs.bodyFontPreference;
+  root.dataset.headingFont = prefs.headingFontPreference;
+  root.dataset.radius = prefs.radiusPreference;
+  root.dataset.sidebarStyle = prefs.sidebarStyle;
+  root.dataset.colorMode = prefs.colorMode;
+  root.dataset.colorTheme = prefs.colorTheme;
+
+  root.classList.toggle("dark", prefs.colorMode === "dark");
+
+  if (prefs.customColor) {
+    root.style.setProperty("--custom-primary", prefs.customColor);
+  } else {
+    root.style.removeProperty("--custom-primary");
+  }
+}
+
+export function AppearanceProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  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 () => {
+      await utils.settings.getTheme.invalidate();
+    },
+    onError: () => {
+      const cachedAppearance = utils.settings.getTheme.getData();
+      const fallback = cachedAppearance
+        ? {
+            ...defaultAppearance,
+            ...getServerAppearancePatch(cachedAppearance),
+          }
+        : defaultAppearance;
+
+      setAppearance(fallback);
+      applyAppearance(fallback);
+      writeStoredAppearance(fallback);
+    },
+  });
+
+  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,
+    staleTime: 60_000,
+  });
+
+  useEffect(() => {
+    const storedAppearance = readStoredAppearance();
+    if (!storedAppearance) return;
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setAppearance((prev) => ({ ...prev, ...storedAppearance }));
+  }, []);
+
+  useEffect(() => {
+    if (!serverAppearance) return;
+    const next = getServerAppearancePatch(serverAppearance);
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setAppearance((prev) => ({ ...prev, ...next }));
+  }, [serverAppearance]);
+
+  useEffect(() => {
+    applyAppearance(appearance);
+    writeStoredAppearance(appearance);
+  }, [appearance]);
+
+  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);
+        writeStoredAppearance(next);
+        return next;
+      });
+
+      persistAppearance(patch);
+    },
+    [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,
+      updateAppearanceDebounced,
+      updateMutation.isPending,
+    ],
+  );
+
+  return (
+    <AppearanceContext.Provider value={value}>
+      {children}
+    </AppearanceContext.Provider>
+  );
+}
+
+export function useAppearance() {
+  const ctx = useContext(AppearanceContext);
+  if (!ctx) {
+    throw new Error("useAppearance must be used within an AppearanceProvider");
+  }
+  return ctx;
+}

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 };