commit 3b7f30d14d86ea440e3a4f2675536ed8ea9df13f
Author: Damien Coles <damien.coles@gmail.com>
Date:   Mon Jan 26 11:30:40 2026 -0500

    public-ready-init

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..e4a2a21
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,13 @@
+node_modules
+.git
+.gitignore
+.houdini
+.svelte-kit
+build
+dist
+*.log
+*.md
+.env*
+!.env.example
+.vscode
+.idea
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..38c6737
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,23 @@
+# GraphQL API
+PUBLIC_GRAPHQL_URL=http://localhost:8000/graphql/
+
+# Ory Kratos (Authentication)
+PUBLIC_KRATOS_URL=http://localhost:4433
+
+# Calendar Service
+PUBLIC_CALENDAR_API_URL=http://localhost:8001
+PUBLIC_CALENDAR_API_KEY=your-calendar-api-key
+
+# Email Service
+PUBLIC_EMAIL_API_URL=http://localhost:8002
+PUBLIC_EMAIL_API_KEY=your-email-api-key
+
+# Wave API (Invoice Integration)
+WAVE_ACCESS_TOKEN=your-wave-access-token
+WAVE_BUSINESS_ID=your-wave-business-id
+
+# Houdini Schema Introspection (development only)
+USER_ID=your-dev-user-id
+USER_PROFILE_TYPE=TeamProfileType
+OATHKEEPER_SECRET=your-oathkeeper-secret
+DJANGO_PROFILE_ID=your-dev-profile-id
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e381bd4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+.houdini
+/context/
+.idea
\ No newline at end of file
diff --git a/.graphqlrc.yaml b/.graphqlrc.yaml
new file mode 100644
index 0000000..e8254e0
--- /dev/null
+++ b/.graphqlrc.yaml
@@ -0,0 +1,16 @@
+projects:
+  default:
+    schema:
+      - ./schema.graphql
+      - ./.houdini/graphql/schema.graphql
+    documents:
+      - '**/*.gql'
+      - '**/*.graphql'
+      - '**/*.svelte'
+      - ./.houdini/graphql/documents.gql
+    exclude:
+      - '**/node_modules/**'
+      - 'src/lib/graphql/wave/**'
+  wave:
+    schema: ./src/lib/graphql/wave/schema.graphql
+    documents: src/lib/graphql/wave/**/*.gql
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..d747fa2
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,14 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Generated files
+.houdini/
+src/lib/graphql/wave/generated.ts
+src/lib/graphql/wave/schema.graphql
+
+# Miscellaneous
+/static/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..819fa57
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/routes/layout.css"
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..6b121b5
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,177 @@
+# Claude Code Guidelines
+
+## Project Overview
+
+This is a SvelteKit 2.x application using Svelte 5 with Tailwind CSS v4.
+
+## Code Style Rules
+
+### SVG Attributes
+
+When using SVG elements, use `style` attribute instead of `fill` attribute to avoid IDE obsolete attribute warnings:
+
+```svelte
+<!-- Correct -->
+<svg style="fill: currentColor" ...>
+<svg style="fill: none" ...>
+
+<!-- Incorrect (triggers obsolete attribute warning) -->
+<svg fill="currentColor" ...>
+<svg fill="none" ...>
+```
+
+### Svelte 5 Runes
+
+- Use `$state()` for reactive state
+- Use `$derived()` for computed values
+- Use `$props()` for component props
+- Use `$effect()` for side effects
+
+### Page Store
+
+Use `$app/state` instead of `$app/stores` for the page object:
+
+```svelte
+<!-- Correct -->
+import {page} from '$app/state'; const path = page.url.pathname;
+
+<!-- Incorrect -->
+import {page} from '$app/stores'; const path = $page.url.pathname;
+```
+
+### Theme Classes
+
+Use the custom theme utility classes defined in `layout.css`:
+
+- `text-theme`, `text-theme-secondary`, `text-theme-muted`
+- `bg-theme`, `bg-theme-card`
+- `border-theme`
+- `shadow-theme`, `shadow-theme-lg`
+
+### Hover/Active States
+
+Use consistent hover/active patterns:
+
+```
+hover:bg-black/5 dark:hover:bg-white/10
+active:bg-black/10 dark:active:bg-white/15
+```
+
+### Mobile Grid Layouts
+
+For card grids that should display single-column on mobile and multi-column on larger screens, always:
+
+1. Explicitly set `grid-cols-1` (don't rely on CSS grid's implicit single column)
+2. Add `min-w-0` on grid items with flex content to allow proper shrinking
+
+```svelte
+<!-- Correct -->
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+	<div class="card-example flex min-w-0 items-center justify-between">
+		<div class="min-w-0 flex-1">...</div>
+	</div>
+</div>
+
+<!-- Incorrect (may overflow on mobile) -->
+<div class="grid gap-4 sm:grid-cols-2">
+	<div class="card-example flex items-center justify-between">...</div>
+</div>
+```
+
+### Button Element Content
+
+Button elements can only contain phrasing content (inline elements). Use `<span>` instead of `<div>`, `<p>`, or `<h1>`-`<h6>` inside buttons:
+
+```svelte
+<!-- Correct -->
+<button>
+	<span class="flex items-center gap-2">
+		<span>Click me</span>
+	</span>
+</button>
+
+<!-- Incorrect (triggers HTML validation warning) -->
+<button>
+	<div class="flex items-center gap-2">
+		<p>Click me</p>
+	</div>
+</button>
+```
+
+For multi-line button content, use `<span class="block">` to create line breaks:
+
+```svelte
+<button>
+	<span class="flex items-center gap-2">Title</span>
+	<span class="text-muted block text-sm">Subtitle on new line</span>
+</button>
+```
+
+### SvelteSet Reactivity
+
+`SvelteSet` from `svelte/reactivity` is already reactive and does NOT need to be wrapped in `$state()`:
+
+```svelte
+<!-- Correct -->
+import { SvelteSet } from 'svelte/reactivity';
+let expandedItems = new SvelteSet<string>();
+
+<!-- Incorrect (unnecessary wrapper) -->
+let expandedItems = $state(new SvelteSet<string>());
+```
+
+### Each Block Keys
+
+Always provide a key for `{#each}` blocks to avoid ESLint warnings:
+
+```svelte
+<!-- Correct -->
+{#each items as item (item.id)}
+{#each days as day (day)}
+
+<!-- Incorrect -->
+{#each items as item}
+```
+
+### Date Formatting
+
+Use the date utilities from `$lib/utils/date` which use `date-fns` to properly handle ISO date strings without timezone offset issues:
+
+```svelte
+import {formatDate} from '$lib/utils/date';
+
+<!-- Returns empty string for null/undefined, so add fallback -->
+{formatDate(startDate) || '—'}
+```
+
+### File Organization
+
+- Place `.svelte.ts` files (stores, shared state) in `src/lib/stores/`, not in component folders
+- GraphQL mutations go in `src/lib/graphql/mutations/{entity}/`
+- GraphQL queries go in `src/lib/graphql/queries/{entity}/`
+
+### Backend Integration Notes
+
+- The backend uses a unique constraint allowing only ONE active scope per address
+- The `isConditional` field on tasks is legacy and should always be set to `false`
+- GraphQL inputs use camelCase (e.g., `isActive`, `accountId`) which maps to snake_case in Django
+
+### Task Frequency Values
+
+The backend `TaskFrequencyChoices` enum uses **lowercase** values. Handle frequency differently depending on the operation:
+
+**Individual mutations** (create/update task or task template) - use lowercase:
+
+```typescript
+frequency: 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'triannual' | 'annual' | 'as_needed';
+```
+
+**JSON import** (`createScopeTemplateFromJson`) - uppercase is acceptable:
+
+```json
+{ "frequency": "DAILY" }
+```
+
+The backend's `build_scope_template` service normalizes uppercase to lowercase automatically.
+
+Valid frequency values: `daily`, `weekly`, `monthly`, `quarterly`, `triannual`, `annual`, `as_needed`
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..482d5ad
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,64 @@
+# Use the official Node.js runtime as base image
+FROM node:22-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Make PUBLIC_ vars available at build time
+ARG PUBLIC_CALENDAR_API_URL
+ARG PUBLIC_CALENDAR_API_KEY
+ARG PUBLIC_EMAIL_API_URL
+ARG PUBLIC_EMAIL_API_KEY
+ARG PUBLIC_WAVE_BUSINESS_ID
+ARG WAVE_ACCESS_TOKEN
+ENV PUBLIC_CALENDAR_API_URL=$PUBLIC_CALENDAR_API_URL
+ENV PUBLIC_CALENDAR_API_KEY=$PUBLIC_CALENDAR_API_KEY
+ENV PUBLIC_EMAIL_API_URL=$PUBLIC_EMAIL_API_URL
+ENV PUBLIC_EMAIL_API_KEY=$PUBLIC_EMAIL_API_KEY
+ENV PUBLIC_WAVE_BUSINESS_ID=$PUBLIC_WAVE_BUSINESS_ID
+ENV WAVE_ACCESS_TOKEN=$WAVE_ACCESS_TOKEN
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:22-alpine AS runner
+
+WORKDIR /app
+
+# Ensure production mode in runtime
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=3000
+
+# Copy package files
+COPY package*.json ./
+
+# Install only production dependencies (modern flag)
+RUN npm ci --omit=dev && npm cache clean --force
+
+# Copy built application from builder stage
+COPY --from=builder /app/build build/
+
+# Create a non-root user
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S svelte -u 1001
+
+# Change ownership of the app directory
+RUN chown -R svelte:nodejs /app
+USER svelte
+
+# Expose the port your app runs on
+EXPOSE 3000
+
+# Start the application
+CMD ["node", "build"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e795a73
--- /dev/null
+++ b/README.md
@@ -0,0 +1,230 @@
+# Nexus 5 Frontend 3 - Full Portal
+
+Full-featured web portal for the Nexus 5 platform, combining public marketing pages, customer portal, team interface, and admin dashboard in a single unified application.
+
+## Overview
+
+This is the third and most complete iteration of the Nexus 5 frontend, designed as a comprehensive portal that serves all user types: public visitors, customers, team members, and administrators. It includes public-facing marketing pages alongside authenticated portals for different user roles.
+
+## Tech Stack
+
+- **SvelteKit 5** - Latest SvelteKit with Svelte 5 runes
+- **Houdini** - Type-safe GraphQL client
+- **Tailwind CSS v4** - Next-generation Tailwind with CSS variables
+- **TypeScript** - Strict mode enabled
+- **Node adapter** - Production deployment
+- **Wave Integration** - Invoice management via Wave API
+
+## Evolution
+
+| Feature | Frontend 1 | Frontend 2 | Frontend 3 |
+|---------|------------|------------|------------|
+| **Purpose** | Admin only | Team only | All users |
+| **Public Pages** | No | No | Yes |
+| **Customer Portal** | No | No | Yes |
+| **Team Portal** | No | Yes | Yes |
+| **Admin Portal** | Yes | No | Yes |
+| **Theming** | Basic dark mode | Theme toggle | Full CSS variables |
+| **AI Chat** | No | No | Yes |
+| **Invoice Integration** | No | No | Wave API |
+
+## Features
+
+### Public Pages
+- **Home** - Landing page with service overview
+- **Services** - Service offerings and descriptions
+- **Pricing** - Pricing information
+- **About** - Company information
+- **Contact** - Contact form with email integration
+- **Privacy/Terms** - Legal pages
+
+### Customer Portal
+- **Dashboard** - Overview of accounts and upcoming work
+- **Accounts** - View service accounts and locations
+- **Schedule** - Upcoming services and projects
+- **History** - Completed work history
+- **Invoices** - View and pay invoices
+- **Profile** - Customer profile management
+
+### Team Portal
+- **Dashboard** - Today's assignments
+- **Services** - Assigned services with session management
+- **Projects** - Assigned projects
+- **Reports** - Submit and view reports
+- **Profile** - Team member profile
+
+### Admin Portal
+- **Dashboard** - Business overview
+- **Customers** - Customer management
+- **Accounts** - Account management
+- **Services** - Service scheduling and assignment
+- **Projects** - Project management
+- **Scopes** - Scope template management
+- **Reports** - Report management
+- **Invoices** - Invoice creation and Wave integration
+- **Calendar** - Event management
+- **Profiles** - User profile management
+- **Notifications** - Notification rule configuration
+- **Event Log** - System event audit log
+
+### Cross-cutting Features
+- **AI Chat** - Claude-powered assistant for all users
+- **Messages** - Inter-user messaging
+- **Notifications** - Real-time notifications
+- **Theme Toggle** - Light/dark mode support
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- Access to Nexus 5 GraphQL API
+- (Optional) Wave API credentials for invoicing
+
+### Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Type checking
+npm run check
+```
+
+### Docker Deployment
+
+```bash
+# Build and run
+docker-compose up --build
+
+# Production deployment
+docker-compose -f docker-compose.prod.yml up -d
+```
+
+### Environment Variables
+
+See `.env.example` for required configuration:
+
+- `PUBLIC_GRAPHQL_URL` - Nexus 5 API endpoint
+- `PUBLIC_KRATOS_URL` - Ory Kratos public URL
+- `WAVE_ACCESS_TOKEN` - Wave API token (for invoicing)
+- `WAVE_BUSINESS_ID` - Wave business ID
+
+## Project Structure
+
+```
+src/
+├── lib/
+│   ├── components/
+│   │   ├── admin/          # Admin-specific components
+│   │   ├── chat/           # AI chat interface
+│   │   ├── customer/       # Customer portal components
+│   │   ├── entity/         # Shared entity components
+│   │   ├── icons/          # SVG icon components
+│   │   ├── layout/         # Layout components
+│   │   ├── nav/            # Navigation (TopNav, AdminNav, etc.)
+│   │   ├── session/        # Work session components
+│   │   ├── shared/         # Shared UI components
+│   │   └── team/           # Team portal components
+│   ├── data/               # Static data (event types, etc.)
+│   ├── graphql/
+│   │   ├── mutations/      # GraphQL mutations
+│   │   ├── queries/        # GraphQL queries
+│   │   └── wave/           # Wave API integration
+│   ├── server/             # Server-side utilities
+│   ├── services/           # External service integrations
+│   ├── stores/             # Svelte stores
+│   └── utils/              # Utility functions
+└── routes/
+    ├── admin/              # Admin portal routes
+    ├── customer/           # Customer portal routes
+    ├── team/               # Team portal routes
+    ├── messages/           # Messaging
+    ├── notifications/      # Notifications
+    ├── about/              # Public pages
+    ├── contact/
+    ├── pricing/
+    ├── privacy/
+    ├── services/
+    ├── terms/
+    └── login/logout/       # Auth flows
+```
+
+## Key Patterns
+
+### CSS Variables for Theming
+
+Uses CSS custom properties for comprehensive theming:
+
+```css
+:root {
+  --color-primary-500: #3b82f6;
+  --bg-primary: 255 255 255;
+  --text-primary: 15 23 42;
+}
+
+.dark {
+  --bg-primary: 15 23 42;
+  --text-primary: 248 250 252;
+}
+```
+
+### Role-Based Navigation
+
+Navigation adapts based on user role:
+
+```svelte
+{#if isAdmin}
+  <AdminNav />
+{:else if isTeamMember}
+  <TeamNav />
+{:else if isCustomer}
+  <CustomerNav />
+{:else}
+  <PublicNav />
+{/if}
+```
+
+### Server-Side Data Loading
+
+Uses SvelteKit's load functions for server-side data fetching:
+
+```typescript
+// +page.server.ts
+export const load = async ({ locals }) => {
+  const data = await fetchData(locals.user);
+  return { data };
+};
+```
+
+### Wave API Integration
+
+Separate GraphQL client for Wave invoice management:
+
+```typescript
+import { waveClient } from '$lib/graphql/wave';
+
+const invoices = await waveClient.query({
+  query: ListInvoices,
+  variables: { businessId }
+});
+```
+
+## Related Repositories
+
+- **nexus-5** - Django GraphQL API backend
+- **nexus-5-auth** - Ory Kratos/Oathkeeper authentication
+- **nexus-5-frontend-1** - Admin-only dashboard
+- **nexus-5-frontend-2** - Team-only mobile app
+- **nexus-5-emailer** - Email microservice
+- **nexus-5-scheduler** - Calendar integration microservice
+
+## License
+
+MIT License - See LICENSE file for details.
diff --git a/codegen.wave.ts b/codegen.wave.ts
new file mode 100644
index 0000000..c7bc36b
--- /dev/null
+++ b/codegen.wave.ts
@@ -0,0 +1,28 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+	schema: [
+		{
+			'https://gql.waveapps.com/graphql/public': {
+				headers: {
+					Authorization: 'Bearer ' + process.env.WAVE_ACCESS_TOKEN
+				}
+			}
+		}
+	],
+	documents: 'src/lib/graphql/wave/**/*.gql',
+	generates: {
+		'src/lib/graphql/wave/schema.graphql': {
+			plugins: ['schema-ast']
+		},
+		'src/lib/graphql/wave/generated.ts': {
+			plugins: ['typescript', 'typescript-operations', 'typescript-urql'],
+			config: {
+				withHooks: false,
+				withComponent: false
+			}
+		}
+	}
+};
+
+export default config;
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..2db5c76
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,23 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        PUBLIC_CALENDAR_API_URL: ${PUBLIC_CALENDAR_API_URL}
+        PUBLIC_CALENDAR_API_KEY: ${PUBLIC_CALENDAR_API_KEY}
+        PUBLIC_EMAIL_API_URL: ${PUBLIC_EMAIL_API_URL}
+        PUBLIC_EMAIL_API_KEY: ${PUBLIC_EMAIL_API_KEY}
+        PUBLIC_WAVE_BUSINESS_ID: ${PUBLIC_WAVE_BUSINESS_ID}
+        WAVE_ACCESS_TOKEN: ${WAVE_ACCESS_TOKEN}
+    image: nexus-5-frontend-3:latest
+    container_name: nexus-5-frontend-3
+    ports:
+      - '7000:3000'
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - HOST=0.0.0.0
+    restart: unless-stopped
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..d9e03f1
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,46 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	{
+		ignores: ['src/lib/graphql/wave/generated.ts']
+	},
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off',
+			// Disable the navigation resolve rule - we use standard href links
+			'svelte/no-navigation-without-resolve': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);
diff --git a/houdini.config.js b/houdini.config.js
new file mode 100644
index 0000000..7cfe68b
--- /dev/null
+++ b/houdini.config.js
@@ -0,0 +1,27 @@
+/// <references types="houdini-svelte">
+
+/** @type {import('houdini').ConfigFile} */
+const config = {
+	watchSchema: {
+		url: 'http://10.10.10.51:5500/graphql/',
+		headers: {
+			'X-USER-ID': (env) => env.USER_ID,
+			'X-USER-PROFILE-TYPE': (env) => env.USER_PROFILE_TYPE,
+			'X-OATHKEEPER-SECRET': (env) => env.OATHKEEPER_SECRET,
+			'X-DJANGO-PROFILE-ID': (env) => env.DJANGO_PROFILE_ID
+		}
+	},
+	schemaPath: './schema.graphql',
+	runtimeDir: '.houdini',
+	defaultCachePolicy: 'NetworkOnly',
+	// Exclude Wave GraphQL files - they use urql with a separate schema
+	exclude: ['src/lib/graphql/wave/**'],
+	plugins: {
+		'houdini-svelte': {
+			client: './src/lib/graphql/client.ts',
+			forceRunesMode: true
+		}
+	}
+};
+
+export default config;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..50c1629
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,11225 @@
+{
+	"name": "nexus-5-frontend-3",
+	"version": "0.0.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "nexus-5-frontend-3",
+			"version": "0.0.1",
+			"dependencies": {
+				"@urql/svelte": "^5.0.0",
+				"graphql": "^16.12.0",
+				"heic2any": "^0.0.4",
+				"urql": "^5.0.1"
+			},
+			"devDependencies": {
+				"@eslint/compat": "^1.4.0",
+				"@eslint/js": "^9.39.1",
+				"@graphql-codegen/cli": "^6.1.0",
+				"@graphql-codegen/schema-ast": "^5.0.0",
+				"@graphql-codegen/typescript": "^5.0.6",
+				"@graphql-codegen/typescript-operations": "^5.0.6",
+				"@graphql-codegen/typescript-urql": "^4.0.1",
+				"@sveltejs/adapter-node": "^5.4.0",
+				"@sveltejs/kit": "^2.48.5",
+				"@sveltejs/vite-plugin-svelte": "^6.2.1",
+				"@tailwindcss/forms": "^0.5.10",
+				"@tailwindcss/typography": "^0.5.19",
+				"@tailwindcss/vite": "^4.1.17",
+				"@types/node": "^24",
+				"date-fns": "^4.1.0",
+				"eslint": "^9.39.1",
+				"eslint-config-prettier": "^10.1.8",
+				"eslint-plugin-svelte": "^3.13.0",
+				"globals": "^16.5.0",
+				"houdini": "^2.0.0-next.11",
+				"houdini-svelte": "^3.0.0-next.13",
+				"prettier": "^3.6.2",
+				"prettier-plugin-svelte": "^3.4.0",
+				"prettier-plugin-tailwindcss": "^0.7.1",
+				"svelte": "^5.43.8",
+				"svelte-check": "^4.3.4",
+				"tailwindcss": "^4.1.17",
+				"typescript": "^5.9.3",
+				"typescript-eslint": "^8.47.0",
+				"vite": "^7.2.2",
+				"vite-plugin-devtools-json": "^1.0.0",
+				"vite-plugin-mkcert": "^1.17.9"
+			}
+		},
+		"node_modules/@0no-co/graphql.web": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.2.0.tgz",
+			"integrity": "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
+			},
+			"peerDependenciesMeta": {
+				"graphql": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@ardatan/relay-compiler": {
+			"version": "12.0.3",
+			"resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.3.tgz",
+			"integrity": "sha512-mBDFOGvAoVlWaWqs3hm1AciGHSQE1rqFc/liZTyYz/Oek9yZdT5H26pH2zAFuEiTiBVPPyMuqf5VjOFPI2DGsQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/generator": "^7.26.10",
+				"@babel/parser": "^7.26.10",
+				"@babel/runtime": "^7.26.10",
+				"chalk": "^4.0.0",
+				"fb-watchman": "^2.0.0",
+				"immutable": "~3.7.6",
+				"invariant": "^2.2.4",
+				"nullthrows": "^1.1.1",
+				"relay-runtime": "12.0.0",
+				"signedsource": "^1.0.0"
+			},
+			"bin": {
+				"relay-compiler": "bin/relay-compiler"
+			},
+			"peerDependencies": {
+				"graphql": "*"
+			}
+		},
+		"node_modules/@babel/code-frame": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+			"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-validator-identifier": "^7.27.1",
+				"js-tokens": "^4.0.0",
+				"picocolors": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/compat-data": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+			"integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/core": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+			"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.27.1",
+				"@babel/generator": "^7.28.5",
+				"@babel/helper-compilation-targets": "^7.27.2",
+				"@babel/helper-module-transforms": "^7.28.3",
+				"@babel/helpers": "^7.28.4",
+				"@babel/parser": "^7.28.5",
+				"@babel/template": "^7.27.2",
+				"@babel/traverse": "^7.28.5",
+				"@babel/types": "^7.28.5",
+				"@jridgewell/remapping": "^2.3.5",
+				"convert-source-map": "^2.0.0",
+				"debug": "^4.1.0",
+				"gensync": "^1.0.0-beta.2",
+				"json5": "^2.2.3",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/babel"
+			}
+		},
+		"node_modules/@babel/core/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/generator": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+			"integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.28.5",
+				"@babel/types": "^7.28.5",
+				"@jridgewell/gen-mapping": "^0.3.12",
+				"@jridgewell/trace-mapping": "^0.3.28",
+				"jsesc": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-annotate-as-pure": {
+			"version": "7.27.3",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+			"integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.27.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets": {
+			"version": "7.27.2",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+			"integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.27.2",
+				"@babel/helper-validator-option": "^7.27.1",
+				"browserslist": "^4.24.0",
+				"lru-cache": "^5.1.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"yallist": "^3.0.2"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.5.tgz",
+			"integrity": "sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.27.3",
+				"@babel/helper-member-expression-to-functions": "^7.28.5",
+				"@babel/helper-optimise-call-expression": "^7.27.1",
+				"@babel/helper-replace-supers": "^7.27.1",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+				"@babel/traverse": "^7.28.5",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-globals": {
+			"version": "7.28.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+			"integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-member-expression-to-functions": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+			"integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.28.5",
+				"@babel/types": "^7.28.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-imports": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+			"integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.27.1",
+				"@babel/types": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-transforms": {
+			"version": "7.28.3",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+			"integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.27.1",
+				"@babel/traverse": "^7.28.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-optimise-call-expression": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+			"integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-plugin-utils": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+			"integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-replace-supers": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+			"integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-member-expression-to-functions": "^7.27.1",
+				"@babel/helper-optimise-call-expression": "^7.27.1",
+				"@babel/traverse": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+			"integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.27.1",
+				"@babel/types": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+			"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-option": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+			"integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helpers": {
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+			"integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/template": "^7.27.2",
+				"@babel/types": "^7.28.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+			"integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.28.5"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-class-properties": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+			"integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-object-rest-spread": {
+			"version": "7.20.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+			"integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.20.5",
+				"@babel/helper-compilation-targets": "^7.20.7",
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-transform-parameters": "^7.20.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-class-properties": {
+			"version": "7.12.13",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+			"integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.12.13"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-flow": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz",
+			"integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-assertions": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.27.1.tgz",
+			"integrity": "sha512-UT/Jrhw57xg4ILHLFnzFpPDlMbcdEicaAtjPQpbj9wa8T4r5KVWCimHcL/460g8Ht0DMxDyjsLgiWSkVjnwPFg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-jsx": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+			"integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-object-rest-spread": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+			"integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-arrow-functions": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
+			"integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoped-functions": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
+			"integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoping": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.5.tgz",
+			"integrity": "sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-classes": {
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.4.tgz",
+			"integrity": "sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.27.3",
+				"@babel/helper-compilation-targets": "^7.27.2",
+				"@babel/helper-globals": "^7.28.0",
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/helper-replace-supers": "^7.27.1",
+				"@babel/traverse": "^7.28.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-computed-properties": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.27.1.tgz",
+			"integrity": "sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/template": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-destructuring": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.5.tgz",
+			"integrity": "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/traverse": "^7.28.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-flow-strip-types": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.27.1.tgz",
+			"integrity": "sha512-G5eDKsu50udECw7DL2AcsysXiQyB7Nfg521t2OAJ4tbfTJ27doHLeF/vlI1NZGlLdbb/v+ibvtL1YBQqYOwJGg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/plugin-syntax-flow": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-for-of": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
+			"integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-function-name": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
+			"integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.27.1",
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/traverse": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-literals": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
+			"integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-member-expression-literals": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
+			"integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-commonjs": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz",
+			"integrity": "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.27.1",
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-object-super": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
+			"integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/helper-replace-supers": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-parameters": {
+			"version": "7.27.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
+			"integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-property-literals": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
+			"integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-display-name": {
+			"version": "7.28.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.28.0.tgz",
+			"integrity": "sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-jsx": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz",
+			"integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.27.1",
+				"@babel/helper-module-imports": "^7.27.1",
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/plugin-syntax-jsx": "^7.27.1",
+				"@babel/types": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-shorthand-properties": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
+			"integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-spread": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.27.1.tgz",
+			"integrity": "sha512-kpb3HUqaILBJcRFVhFUs6Trdd4mkrzcGXss+6/mxUd273PfbWqSDHRzMT2234gIg2QYfAjvXLSquP1xECSg09Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-template-literals": {
+			"version": "7.27.1",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+			"integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.28.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+			"integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/template": {
+			"version": "7.27.2",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+			"integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.27.1",
+				"@babel/parser": "^7.27.2",
+				"@babel/types": "^7.27.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+			"integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.27.1",
+				"@babel/generator": "^7.28.5",
+				"@babel/helper-globals": "^7.28.0",
+				"@babel/parser": "^7.28.5",
+				"@babel/template": "^7.27.2",
+				"@babel/types": "^7.28.5",
+				"debug": "^4.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+			"integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.28.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@clack/core": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.5.tgz",
+			"integrity": "sha512-5cfhQNH+1VQ2xLQlmzXMqUoiaH0lRBq9/CLW9lTyMbuKLC3+xEK01tHVvyut++mLOn5urSHmkm6I0Lg9MaJSTQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"picocolors": "^1.0.0",
+				"sisteransi": "^1.0.5"
+			}
+		},
+		"node_modules/@clack/prompts": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.6.3.tgz",
+			"integrity": "sha512-AM+kFmAHawpUQv2q9+mcB6jLKxXGjgu/r2EQjEwujgpCdzrST6BJqYw00GRn56/L/Izw5U7ImoLmy00X/r80Pw==",
+			"bundleDependencies": [
+				"is-unicode-supported"
+			],
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@clack/core": "^0.3.2",
+				"is-unicode-supported": "*",
+				"picocolors": "^1.0.0",
+				"sisteransi": "^1.0.5"
+			}
+		},
+		"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
+			"version": "1.3.0",
+			"inBundle": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@envelop/core": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@envelop/core/-/core-4.0.3.tgz",
+			"integrity": "sha512-O0Vz8E0TObT6ijAob8jYFVJavcGywKThM3UAsxUIBBVPYZTMiqI9lo2gmAnbMUnrDcAYkUTZEW9FDYPRdF5l6g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/types": "4.0.1",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@envelop/instrumentation": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@envelop/instrumentation/-/instrumentation-1.0.0.tgz",
+			"integrity": "sha512-cxgkB66RQB95H3X27jlnxCRNTmPuSTgmBAq6/4n2Dtv4hsk4yz8FadA1ggmd0uZzvKqWD6CR+WFgTjhDqg7eyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/promise-helpers": "^1.2.1",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@envelop/types": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@envelop/types/-/types-4.0.1.tgz",
+			"integrity": "sha512-ULo27/doEsP7uUhm2iTnElx13qTO6I5FKvmLoX41cpfuw8x6e0NUFknoqhEsLzAbgz8xVS5mjwcxGCXh4lDYzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@eslint-community/eslint-utils": {
+			"version": "4.9.0",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+			"integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eslint-visitor-keys": "^3.4.3"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+			}
+		},
+		"node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@eslint-community/regexpp": {
+			"version": "4.12.2",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+			"integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+			}
+		},
+		"node_modules/@eslint/compat": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.1.tgz",
+			"integrity": "sha512-cfO82V9zxxGBxcQDr1lfaYB7wykTa0b00mGa36FrJl7iTFd0Z2cHfEYuxcBRP/iNijCsWsEkA+jzT8hGYmv33w==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"peerDependencies": {
+				"eslint": "^8.40 || 9"
+			},
+			"peerDependenciesMeta": {
+				"eslint": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@eslint/config-array": {
+			"version": "0.21.1",
+			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+			"integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/object-schema": "^2.1.7",
+				"debug": "^4.3.1",
+				"minimatch": "^3.1.2"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/config-helpers": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+			"integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/core": {
+			"version": "0.17.0",
+			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+			"integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@types/json-schema": "^7.0.15"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/eslintrc": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+			"integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^6.12.4",
+				"debug": "^4.3.2",
+				"espree": "^10.0.1",
+				"globals": "^14.0.0",
+				"ignore": "^5.2.0",
+				"import-fresh": "^3.2.1",
+				"js-yaml": "^4.1.0",
+				"minimatch": "^3.1.2",
+				"strip-json-comments": "^3.1.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/globals": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+			"integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@eslint/js": {
+			"version": "9.39.1",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.1.tgz",
+			"integrity": "sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://eslint.org/donate"
+			}
+		},
+		"node_modules/@eslint/object-schema": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+			"integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/plugin-kit": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+			"integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0",
+				"levn": "^0.4.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@fastify/busboy": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.2.0.tgz",
+			"integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@graphql-codegen/add": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-6.0.0.tgz",
+			"integrity": "sha512-biFdaURX0KTwEJPQ1wkT6BRgNasqgQ5KbCI1a3zwtLtO7XTo7/vKITPylmiU27K5DSOWYnY/1jfSqUAEBuhZrQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/add/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/cli": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-6.1.0.tgz",
+			"integrity": "sha512-7w3Zq5IFONVOBcyOiP01Nv9WRxGS/TEaBCAb/ALYA3xHq95dqKCpoGnxt/Ut9R18jiS+aMgT0gc8Tr8sHy44jA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/generator": "^7.18.13",
+				"@babel/template": "^7.18.10",
+				"@babel/types": "^7.18.13",
+				"@graphql-codegen/client-preset": "^5.2.0",
+				"@graphql-codegen/core": "^5.0.0",
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-tools/apollo-engine-loader": "^8.0.0",
+				"@graphql-tools/code-file-loader": "^8.0.0",
+				"@graphql-tools/git-loader": "^8.0.0",
+				"@graphql-tools/github-loader": "^9.0.0",
+				"@graphql-tools/graphql-file-loader": "^8.0.0",
+				"@graphql-tools/json-file-loader": "^8.0.0",
+				"@graphql-tools/load": "^8.1.0",
+				"@graphql-tools/url-loader": "^9.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"@inquirer/prompts": "^7.8.2",
+				"@whatwg-node/fetch": "^0.10.0",
+				"chalk": "^4.1.0",
+				"cosmiconfig": "^9.0.0",
+				"debounce": "^2.0.0",
+				"detect-indent": "^6.0.0",
+				"graphql-config": "^5.1.1",
+				"is-glob": "^4.0.1",
+				"jiti": "^2.3.0",
+				"json-to-pretty-yaml": "^1.2.2",
+				"listr2": "^9.0.0",
+				"log-symbols": "^4.0.0",
+				"micromatch": "^4.0.5",
+				"shell-quote": "^1.7.3",
+				"string-env-interpolation": "^1.0.1",
+				"ts-log": "^2.2.3",
+				"tslib": "^2.4.0",
+				"yaml": "^2.3.1",
+				"yargs": "^17.0.0"
+			},
+			"bin": {
+				"gql-gen": "cjs/bin.js",
+				"graphql-code-generator": "cjs/bin.js",
+				"graphql-codegen": "cjs/bin.js",
+				"graphql-codegen-esm": "esm/bin.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"@parcel/watcher": "^2.1.0",
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@parcel/watcher": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@graphql-codegen/client-preset": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/client-preset/-/client-preset-5.2.1.tgz",
+			"integrity": "sha512-6qFjHQQUWrEH+MVvWs5sPUgme8X+Ivg3WfzaCESooRBQZ4/EnSFlXkPWUTbOKYLRUoMv4g6iTRcZQf6u1wtHZA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/template": "^7.20.7",
+				"@graphql-codegen/add": "^6.0.0",
+				"@graphql-codegen/gql-tag-operations": "5.1.1",
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-codegen/typed-document-node": "^6.1.4",
+				"@graphql-codegen/typescript": "^5.0.6",
+				"@graphql-codegen/typescript-operations": "^5.0.6",
+				"@graphql-codegen/visitor-plugin-common": "^6.2.1",
+				"@graphql-tools/documents": "^1.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"@graphql-typed-document-node/core": "3.2.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+				"graphql-sock": "^1.0.0"
+			},
+			"peerDependenciesMeta": {
+				"graphql-sock": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@graphql-codegen/client-preset/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/core": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/core/-/core-5.0.0.tgz",
+			"integrity": "sha512-vLTEW0m8LbE4xgRwbFwCdYxVkJ1dBlVJbQyLb9Q7bHnVFgHAP982Xo8Uv7FuPBmON+2IbTjkCqhFLHVZbqpvjQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.0.0",
+				"@graphql-tools/schema": "^10.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/core/node_modules/@graphql-tools/schema": {
+			"version": "10.0.30",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.30.tgz",
+			"integrity": "sha512-yPXU17uM/LR90t92yYQqn9mAJNOVZJc0nQtYeZyZeQZeQjwIGlTubvvoDL0fFVk+wZzs4YQOgds2NwSA4npodA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.6",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/core/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/gql-tag-operations": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/gql-tag-operations/-/gql-tag-operations-5.1.1.tgz",
+			"integrity": "sha512-XewD0XxN2sgKieEIFeGWV5yT5X2aNy+eg+K8bHlUD7QfyrN2bi67rv/O5Edu7LVDOJR69uqVBp++18d742mn3Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-codegen/visitor-plugin-common": "6.2.1",
+				"@graphql-tools/utils": "^10.0.0",
+				"auto-bind": "~4.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/gql-tag-operations/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/plugin-helpers": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-6.1.0.tgz",
+			"integrity": "sha512-JJypehWTcty9kxKiqH7TQOetkGdOYjY78RHlI+23qB59cV2wxjFFVf8l7kmuXS4cpGVUNfIjFhVr7A1W7JMtdA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.0.0",
+				"change-case-all": "1.0.15",
+				"common-tags": "1.8.2",
+				"import-from": "4.0.0",
+				"lodash": "~4.17.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/plugin-helpers/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/schema-ast": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/schema-ast/-/schema-ast-5.0.0.tgz",
+			"integrity": "sha512-jn7Q3PKQc0FxXjbpo9trxzlz/GSFQWxL042l0iC8iSbM/Ar+M7uyBwMtXPsev/3Razk+osQyreghIz0d2+6F7Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/schema-ast/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/typed-document-node": {
+			"version": "6.1.4",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-6.1.4.tgz",
+			"integrity": "sha512-ITWsA+qvT7R64z7KmYHXfgyD5ff069FAGq/hpR0EWVfzXT4RW1Xn/3Biw7/jvwMGsS1BTjo8ZLSIMNM8KjE3GA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-codegen/visitor-plugin-common": "6.2.1",
+				"auto-bind": "~4.0.0",
+				"change-case-all": "1.0.15",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typed-document-node/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/typescript": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-5.0.6.tgz",
+			"integrity": "sha512-rKW3wYInAnmO/DmKjhW3/KLMxUauUCZuMEPQmuoHChnwIuMjn5kVXCdArGyQqv+vVtFj55aS+sJLN4MPNNjSNg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-codegen/schema-ast": "^5.0.0",
+				"@graphql-codegen/visitor-plugin-common": "6.2.1",
+				"auto-bind": "~4.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-operations": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-5.0.6.tgz",
+			"integrity": "sha512-pkR/82qWO50OHWeV3BiDuVxNFxiJerpmNjFep71VlabADXiU3GIeSaDd6G9a1/SCniVTXZQk2ivCb0ZJiuwo1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-codegen/typescript": "^5.0.6",
+				"@graphql-codegen/visitor-plugin-common": "6.2.1",
+				"auto-bind": "~4.0.0",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+				"graphql-sock": "^1.0.0"
+			},
+			"peerDependenciesMeta": {
+				"graphql-sock": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-operations/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/typescript-urql": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-urql/-/typescript-urql-4.0.1.tgz",
+			"integrity": "sha512-rZWoN9jUQT40lwSBd6B/HGF2kq15bF34WVz/H+EuEBcHSdkTkZFtFb+lXgCZLGssPKDkPyr12fmHgbzkdIvPdQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^3.0.0",
+				"@graphql-codegen/visitor-plugin-common": "2.13.8",
+				"auto-bind": "~4.0.0",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+				"graphql-tag": "^2.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@ardatan/relay-compiler": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz",
+			"integrity": "sha512-9anThAaj1dQr6IGmzBMcfzOQKTa5artjuPmw8NYK/fiGEMjADbSguBY2FMDykt+QhilR3wc9VA/3yVju7JHg7Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/core": "^7.14.0",
+				"@babel/generator": "^7.14.0",
+				"@babel/parser": "^7.14.0",
+				"@babel/runtime": "^7.0.0",
+				"@babel/traverse": "^7.14.0",
+				"@babel/types": "^7.0.0",
+				"babel-preset-fbjs": "^3.4.0",
+				"chalk": "^4.0.0",
+				"fb-watchman": "^2.0.0",
+				"fbjs": "^3.0.0",
+				"glob": "^7.1.1",
+				"immutable": "~3.7.6",
+				"invariant": "^2.2.4",
+				"nullthrows": "^1.1.1",
+				"relay-runtime": "12.0.0",
+				"signedsource": "^1.0.0",
+				"yargs": "^15.3.1"
+			},
+			"bin": {
+				"relay-compiler": "bin/relay-compiler"
+			},
+			"peerDependencies": {
+				"graphql": "*"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-codegen/plugin-helpers": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-3.1.2.tgz",
+			"integrity": "sha512-emOQiHyIliVOIjKVKdsI5MXj312zmRDwmHpyUTZMjfpvxq/UVAHUJIVdVf+lnjjrI+LXBTgMlTWTgHQfmICxjg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^9.0.0",
+				"change-case-all": "1.0.15",
+				"common-tags": "1.8.2",
+				"import-from": "4.0.0",
+				"lodash": "~4.17.0",
+				"tslib": "~2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-codegen/plugin-helpers/node_modules/tslib": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+			"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-codegen/visitor-plugin-common": {
+			"version": "2.13.8",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.13.8.tgz",
+			"integrity": "sha512-IQWu99YV4wt8hGxIbBQPtqRuaWZhkQRG2IZKbMoSvh0vGeWb3dB0n0hSgKaOOxDY+tljtOf9MTcUYvJslQucMQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^3.1.2",
+				"@graphql-tools/optimize": "^1.3.0",
+				"@graphql-tools/relay-operation-optimizer": "^6.5.0",
+				"@graphql-tools/utils": "^9.0.0",
+				"auto-bind": "~4.0.0",
+				"change-case-all": "1.0.15",
+				"dependency-graph": "^0.11.0",
+				"graphql-tag": "^2.11.0",
+				"parse-filepath": "^1.0.2",
+				"tslib": "~2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-codegen/visitor-plugin-common/node_modules/tslib": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+			"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-tools/optimize": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/optimize/-/optimize-1.4.0.tgz",
+			"integrity": "sha512-dJs/2XvZp+wgHH8T5J2TqptT9/6uVzIYvA6uFACha+ufvdMBedkfR4b4GbT8jAKLRARiqRTxy3dctnwkTM2tdw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-tools/relay-operation-optimizer": {
+			"version": "6.5.18",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-6.5.18.tgz",
+			"integrity": "sha512-mc5VPyTeV+LwiM+DNvoDQfPqwQYhPV/cl5jOBjTgSniyaq8/86aODfMkrE2OduhQ5E00hqrkuL2Fdrgk0w1QJg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ardatan/relay-compiler": "12.0.0",
+				"@graphql-tools/utils": "^9.2.1",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/@graphql-tools/utils": {
+			"version": "9.2.1",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-9.2.1.tgz",
+			"integrity": "sha512-WUw506Ql6xzmOORlriNrD6Ugx+HjVgYxt9KCXD9mHAak+eaXSwuGGPyE60hy9xaDEoXKBsG7SkG69ybitaVl6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-typed-document-node/core": "^3.1.1",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/dependency-graph": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+			"integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"deprecated": "Glob versions prior to v9 are no longer supported",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript-urql/node_modules/yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@graphql-codegen/typescript/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-codegen/visitor-plugin-common": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-6.2.1.tgz",
+			"integrity": "sha512-5QT1hCV3286mrmoIC7vlFXsTlwELMexhuFIkjh+oVGGL1E8hxkIPAU0kfH/lsPbQHKi8zKmic2pl3tAdyYxNyg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-codegen/plugin-helpers": "^6.1.0",
+				"@graphql-tools/optimize": "^2.0.0",
+				"@graphql-tools/relay-operation-optimizer": "^7.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"auto-bind": "~4.0.0",
+				"change-case-all": "1.0.15",
+				"dependency-graph": "^1.0.0",
+				"graphql-tag": "^2.11.0",
+				"parse-filepath": "^1.0.2",
+				"tslib": "~2.6.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/@graphql-codegen/visitor-plugin-common/node_modules/tslib": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/@graphql-hive/signal": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-hive/signal/-/signal-2.0.0.tgz",
+			"integrity": "sha512-Pz8wB3K0iU6ae9S1fWfsmJX24CcGeTo6hE7T44ucmV/ALKRj+bxClmqrYcDT7v3f0d12Rh4FAXBb6gon+WkDpQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/apollo-engine-loader": {
+			"version": "8.0.27",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-8.0.27.tgz",
+			"integrity": "sha512-XT4BvqmRXkVaT8GgNb9/pr8u4M4vTcvGuI2GlvK+albrJNIV8VxTpsdVYma3kw+VtSIYrxEvLixlfDA/KdmDpg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.11.0",
+				"@whatwg-node/fetch": "^0.10.13",
+				"sync-fetch": "0.6.0-2",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/batch-execute": {
+			"version": "10.0.4",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-10.0.4.tgz",
+			"integrity": "sha512-t8E0ILelbaIju0aNujMkKetUmbv3/07nxGSv0kEGLBk9GNtEmQ/Bjj8ZTo2WN35/Fy70zCHz2F/48Nx/Ec48cA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.10.3",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"dataloader": "^2.2.3",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/code-file-loader": {
+			"version": "8.1.27",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/code-file-loader/-/code-file-loader-8.1.27.tgz",
+			"integrity": "sha512-q3GDbm+7m3DiAnqxa+lYMgYZd49+ez6iGFfXHmzP6qAnf5WlBxRNKNjNVuxOgoV30DCr+vOJfoXeU7VN1qqGWQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/graphql-tag-pluck": "8.3.26",
+				"@graphql-tools/utils": "^10.11.0",
+				"globby": "^11.0.3",
+				"tslib": "^2.4.0",
+				"unixify": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/delegate": {
+			"version": "12.0.2",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/delegate/-/delegate-12.0.2.tgz",
+			"integrity": "sha512-1X93onxNgOzRvnZ8Xulwi6gNuBeuDxvGYOjUHEZyesPCsaWsyiVj1Wk6Pw/DTPGLy70sOFUKQGcaZbWnDORM2w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/batch-execute": "^10.0.4",
+				"@graphql-tools/executor": "^1.4.13",
+				"@graphql-tools/schema": "^10.0.29",
+				"@graphql-tools/utils": "^10.10.3",
+				"@repeaterjs/repeater": "^3.0.6",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"dataloader": "^2.2.3",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/delegate/node_modules/@graphql-tools/schema": {
+			"version": "10.0.30",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.30.tgz",
+			"integrity": "sha512-yPXU17uM/LR90t92yYQqn9mAJNOVZJc0nQtYeZyZeQZeQjwIGlTubvvoDL0fFVk+wZzs4YQOgds2NwSA4npodA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.6",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/documents": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/documents/-/documents-1.0.1.tgz",
+			"integrity": "sha512-aweoMH15wNJ8g7b2r4C4WRuJxZ0ca8HtNO54rkye/3duxTkW4fGBEutCx03jCIr5+a1l+4vFJNP859QnAVBVCA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lodash.sortby": "^4.7.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor": {
+			"version": "1.4.13",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor/-/executor-1.4.13.tgz",
+			"integrity": "sha512-2hTSRfH2kb4ua0ANOV/K6xUoCZsHAE6igE1bimtWUK7v0bowPIxGRKRPpF8JLbImpsJuTCC4HGOCMy7otg3FIQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.10.3",
+				"@graphql-typed-document-node/core": "^3.2.0",
+				"@repeaterjs/repeater": "^3.0.4",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-common": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-common/-/executor-common-1.0.5.tgz",
+			"integrity": "sha512-gsBRxP4ui8s7/ppKGCJUQ9xxTNoFpNYmEirgM52EHo74hL5hrpS5o4zOmBH33+9t2ZasBziIfupYtLNa0DgK0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/core": "^5.4.0",
+				"@graphql-tools/utils": "^10.10.3"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-common/node_modules/@envelop/core": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@envelop/core/-/core-5.4.0.tgz",
+			"integrity": "sha512-/1fat63pySE8rw/dZZArEVytLD90JApY85deDJ0/34gm+yhQ3k70CloSUevxoOE4YCGveG3s9SJJfQeeB4NAtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/instrumentation": "^1.0.0",
+				"@envelop/types": "^5.2.1",
+				"@whatwg-node/promise-helpers": "^1.2.4",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-common/node_modules/@envelop/types": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/@envelop/types/-/types-5.2.1.tgz",
+			"integrity": "sha512-CsFmA3u3c2QoLDTfEpGr4t25fjMU31nyvse7IzWTvb0ZycuPjMjb0fjlheh+PbhBYb9YLugnT2uY6Mwcg1o+Zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-graphql-ws": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-graphql-ws/-/executor-graphql-ws-3.1.3.tgz",
+			"integrity": "sha512-q4k8KLoH2U51XdWJRdiW/KIKbBOtJ1mcILv0ALvBkOF99C3vwGj2zr4U0AMGCD3HzML2mPZuajhfYo/xB/pnZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/executor-common": "^1.0.5",
+				"@graphql-tools/utils": "^10.10.3",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"graphql-ws": "^6.0.6",
+				"isows": "^1.0.7",
+				"tslib": "^2.8.1",
+				"ws": "^8.18.3"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-http": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-http/-/executor-http-3.0.7.tgz",
+			"integrity": "sha512-sHjtiUZmRtkjhpSzMhxT2ywAGzHjuB1rHsiaSLAq8U5BQg5WoLakKYD7BajgVHwNbfWEc+NnFiJI7ldyhiciiQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-hive/signal": "^2.0.0",
+				"@graphql-tools/executor-common": "^1.0.5",
+				"@graphql-tools/utils": "^10.10.3",
+				"@repeaterjs/repeater": "^3.0.4",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/fetch": "^0.10.13",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"meros": "^1.3.2",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/executor-legacy-ws": {
+			"version": "1.1.24",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-legacy-ws/-/executor-legacy-ws-1.1.24.tgz",
+			"integrity": "sha512-wfSpOJCxeBcwVXy3JS4TB4oLwVICuVKPlPQhcAjTRPWYwKerE0HosgUzxCX1fEQ4l1B1OMgKWRglGpoXExKqsQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.11.0",
+				"@types/ws": "^8.0.0",
+				"isomorphic-ws": "^5.0.0",
+				"tslib": "^2.4.0",
+				"ws": "^8.17.1"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/git-loader": {
+			"version": "8.0.31",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/git-loader/-/git-loader-8.0.31.tgz",
+			"integrity": "sha512-xVHM1JecjpU2P0aOj/IaIUc3w6It8sWOdrJElWFZdY9yfWRqXFYwfemtsn/JOrJDIJXYeGpJ304OeqJD5vFIEw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/graphql-tag-pluck": "8.3.26",
+				"@graphql-tools/utils": "^10.11.0",
+				"is-glob": "4.0.3",
+				"micromatch": "^4.0.8",
+				"tslib": "^2.4.0",
+				"unixify": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/github-loader": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/github-loader/-/github-loader-9.0.5.tgz",
+			"integrity": "sha512-89FRDQGMlzL3607BCQtJhKEiQaZtTmdAnyC5Hmi9giTQXVzEXBbMEZOU0qILxj64cr+smNBx5XqxQ1xn0uZeEA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/executor-http": "^3.0.6",
+				"@graphql-tools/graphql-tag-pluck": "^8.3.26",
+				"@graphql-tools/utils": "^10.11.0",
+				"@whatwg-node/fetch": "^0.10.13",
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"sync-fetch": "0.6.0-2",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/graphql-file-loader": {
+			"version": "8.1.8",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-8.1.8.tgz",
+			"integrity": "sha512-dZi9Cw+NWEzJAqzIUON9qjZfjebjcoT4H6jqLkEoAv6kRtTq52m4BLXgFWjMHU7PNLE9OOHB9St7UeZQL+GYrw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/import": "7.1.8",
+				"@graphql-tools/utils": "^10.11.0",
+				"globby": "^11.0.3",
+				"tslib": "^2.4.0",
+				"unixify": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/graphql-tag-pluck": {
+			"version": "8.3.26",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/graphql-tag-pluck/-/graphql-tag-pluck-8.3.26.tgz",
+			"integrity": "sha512-hLsX++KA3YR/PnNJGBq1weSAY8XUUAQFfOSHanLHA2qs5lcNgU6KWbiLiRsJ/B/ZNi2ZO687dhzeZ4h4Yt0V6Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/core": "^7.26.10",
+				"@babel/parser": "^7.26.10",
+				"@babel/plugin-syntax-import-assertions": "^7.26.0",
+				"@babel/traverse": "^7.26.10",
+				"@babel/types": "^7.26.10",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/import": {
+			"version": "7.1.8",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/import/-/import-7.1.8.tgz",
+			"integrity": "sha512-aUKHMbaeHhCkS867mNCk9sJuvd9xE3Ocr+alwdvILkDxHf7Xaumx4mK8tN9FAXeKhQWGGD5QpkIBnUzt2xoX/A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.11.0",
+				"@theguild/federation-composition": "^0.21.0",
+				"resolve-from": "5.0.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/import/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@graphql-tools/json-file-loader": {
+			"version": "8.0.25",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/json-file-loader/-/json-file-loader-8.0.25.tgz",
+			"integrity": "sha512-Dnr9z818Kdn3rfoZO/+/ZQUqWavjV7AhEp4edV1mGsX+J1HFkNC3WMl6MD3W0hth2HWLQpCFJDdOPnchxnFNfA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.11.0",
+				"globby": "^11.0.3",
+				"tslib": "^2.4.0",
+				"unixify": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/load": {
+			"version": "8.1.7",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/load/-/load-8.1.7.tgz",
+			"integrity": "sha512-RxrHOC4vVI50+Q1mwgpmTVCB/UDDYVEGD/g/hP3tT2BW9F3rJ7Z3Lmt/nGfPQuWPao3w6vgJ9oSAWtism7CU5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/schema": "^10.0.30",
+				"@graphql-tools/utils": "^10.11.0",
+				"p-limit": "3.1.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/load/node_modules/@graphql-tools/schema": {
+			"version": "10.0.30",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.30.tgz",
+			"integrity": "sha512-yPXU17uM/LR90t92yYQqn9mAJNOVZJc0nQtYeZyZeQZeQjwIGlTubvvoDL0fFVk+wZzs4YQOgds2NwSA4npodA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.6",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/merge": {
+			"version": "9.1.6",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-9.1.6.tgz",
+			"integrity": "sha512-bTnP+4oom4nDjmkS3Ykbe+ljAp/RIiWP3R35COMmuucS24iQxGLa9Hn8VMkLIoaoPxgz6xk+dbC43jtkNsFoBw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/optimize": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/optimize/-/optimize-2.0.0.tgz",
+			"integrity": "sha512-nhdT+CRGDZ+bk68ic+Jw1OZ99YCDIKYA5AlVAnBHJvMawSx9YQqQAIj4refNc1/LRieGiuWvhbG3jvPVYho0Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/relay-operation-optimizer": {
+			"version": "7.0.26",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/relay-operation-optimizer/-/relay-operation-optimizer-7.0.26.tgz",
+			"integrity": "sha512-cVdS2Hw4hg/WgPVV2wRIzZM975pW5k4vdih3hR4SvEDQVr6MmozmlTQSqzMyi9yg8LKTq540Oz3bYQa286yGmg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ardatan/relay-compiler": "^12.0.3",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/schema": {
+			"version": "9.0.19",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-9.0.19.tgz",
+			"integrity": "sha512-oBRPoNBtCkk0zbUsyP4GaIzCt8C0aCI4ycIRUL67KK5pOHljKLBBtGT+Jr6hkzA74C8Gco8bpZPe7aWFjiaK2w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^8.4.1",
+				"@graphql-tools/utils": "^9.2.1",
+				"tslib": "^2.4.0",
+				"value-or-promise": "^1.0.12"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/schema/node_modules/@graphql-tools/merge": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/merge/-/merge-8.4.2.tgz",
+			"integrity": "sha512-XbrHAaj8yDuINph+sAfuq3QCZ/tKblrTLOpirK0+CAgNlZUCHs0Fa+xtMUURgwCVThLle1AF7svJCxFizygLsw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^9.2.1",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/schema/node_modules/@graphql-tools/utils": {
+			"version": "9.2.1",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-9.2.1.tgz",
+			"integrity": "sha512-WUw506Ql6xzmOORlriNrD6Ugx+HjVgYxt9KCXD9mHAak+eaXSwuGGPyE60hy9xaDEoXKBsG7SkG69ybitaVl6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-typed-document-node/core": "^3.1.1",
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/url-loader": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/url-loader/-/url-loader-9.0.5.tgz",
+			"integrity": "sha512-EPNhZBBL48TudLdyenOw1wV9dI7vsinWLLxSTtkx4zUQxmU+p/LxMyf7MUwjmp3yFZhR/9XchsTZX6uvOyXWqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/executor-graphql-ws": "^3.1.2",
+				"@graphql-tools/executor-http": "^3.0.6",
+				"@graphql-tools/executor-legacy-ws": "^1.1.24",
+				"@graphql-tools/utils": "^10.11.0",
+				"@graphql-tools/wrap": "^11.0.0",
+				"@types/ws": "^8.0.0",
+				"@whatwg-node/fetch": "^0.10.13",
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"isomorphic-ws": "^5.0.0",
+				"sync-fetch": "0.6.0-2",
+				"tslib": "^2.4.0",
+				"ws": "^8.17.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/utils": {
+			"version": "10.11.0",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/utils/-/utils-10.11.0.tgz",
+			"integrity": "sha512-iBFR9GXIs0gCD+yc3hoNswViL1O5josI33dUqiNStFI/MHLCEPduasceAcazRH77YONKNiviHBV8f7OgcT4o2Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-typed-document-node/core": "^3.1.1",
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"cross-inspect": "1.0.1",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/wrap": {
+			"version": "11.1.2",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-11.1.2.tgz",
+			"integrity": "sha512-TcKZzUzJNmuyMBQ1oMdnxhBUUacN/5VEJu0/1KVce2aIzCwTTaN9JTU3MgjO7l5Ixn4QLkc6XbxYNv0cHDQgtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/delegate": "^12.0.2",
+				"@graphql-tools/schema": "^10.0.29",
+				"@graphql-tools/utils": "^10.10.3",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-tools/wrap/node_modules/@graphql-tools/schema": {
+			"version": "10.0.30",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.30.tgz",
+			"integrity": "sha512-yPXU17uM/LR90t92yYQqn9mAJNOVZJc0nQtYeZyZeQZeQjwIGlTubvvoDL0fFVk+wZzs4YQOgds2NwSA4npodA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.6",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-typed-document-node/core": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+			"integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/@graphql-yoga/logger": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-yoga/logger/-/logger-1.0.0.tgz",
+			"integrity": "sha512-JYoxwnPggH2BfO+dWlWZkDeFhyFZqaTRGLvFhy+Pjp2UxitEW6nDrw+pEDw/K9tJwMjIFMmTT9VfTqrnESmBHg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.5.2"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@graphql-yoga/subscription": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-yoga/subscription/-/subscription-4.0.0.tgz",
+			"integrity": "sha512-0qsN/BPPZNMoC2CZ8i+P6PgiJyHh1H35aKDt37qARBDaIOKDQuvEOq7+4txUKElcmXi7DYFo109FkhSQoEajrg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-yoga/typed-event-target": "^2.0.0",
+				"@repeaterjs/repeater": "^3.0.4",
+				"@whatwg-node/events": "^0.1.0",
+				"tslib": "^2.5.2"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@graphql-yoga/typed-event-target": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-yoga/typed-event-target/-/typed-event-target-2.0.0.tgz",
+			"integrity": "sha512-oA/VGxGmaSDym1glOHrltw43qZsFwLLjBwvh57B79UKX/vo3+UQcRgOyE44c5RP7DCYjkrC2tuArZmb6jCzysw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@repeaterjs/repeater": "^3.0.4",
+				"tslib": "^2.5.2"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@humanfs/core": {
+			"version": "0.19.1",
+			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+			"integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanfs/node": {
+			"version": "0.16.7",
+			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+			"integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@humanfs/core": "^0.19.1",
+				"@humanwhocodes/retry": "^0.4.0"
+			},
+			"engines": {
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanwhocodes/module-importer": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=12.22"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/nzakas"
+			}
+		},
+		"node_modules/@humanwhocodes/retry": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+			"integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18.18"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/nzakas"
+			}
+		},
+		"node_modules/@inquirer/ansi": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-1.0.2.tgz",
+			"integrity": "sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@inquirer/checkbox": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.3.2.tgz",
+			"integrity": "sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/ansi": "^1.0.2",
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/figures": "^1.0.15",
+				"@inquirer/type": "^3.0.10",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/confirm": {
+			"version": "5.1.21",
+			"resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.21.tgz",
+			"integrity": "sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/core": {
+			"version": "10.3.2",
+			"resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.3.2.tgz",
+			"integrity": "sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/ansi": "^1.0.2",
+				"@inquirer/figures": "^1.0.15",
+				"@inquirer/type": "^3.0.10",
+				"cli-width": "^4.1.0",
+				"mute-stream": "^2.0.0",
+				"signal-exit": "^4.1.0",
+				"wrap-ansi": "^6.2.0",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/core/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@inquirer/core/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@inquirer/core/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@inquirer/core/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@inquirer/core/node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@inquirer/editor": {
+			"version": "4.2.23",
+			"resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-4.2.23.tgz",
+			"integrity": "sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/external-editor": "^1.0.3",
+				"@inquirer/type": "^3.0.10"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/expand": {
+			"version": "4.0.23",
+			"resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-4.0.23.tgz",
+			"integrity": "sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/external-editor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz",
+			"integrity": "sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"chardet": "^2.1.1",
+				"iconv-lite": "^0.7.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/figures": {
+			"version": "1.0.15",
+			"resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.15.tgz",
+			"integrity": "sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@inquirer/input": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/@inquirer/input/-/input-4.3.1.tgz",
+			"integrity": "sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/number": {
+			"version": "3.0.23",
+			"resolved": "https://registry.npmjs.org/@inquirer/number/-/number-3.0.23.tgz",
+			"integrity": "sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/password": {
+			"version": "4.0.23",
+			"resolved": "https://registry.npmjs.org/@inquirer/password/-/password-4.0.23.tgz",
+			"integrity": "sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/ansi": "^1.0.2",
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/prompts": {
+			"version": "7.10.1",
+			"resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.10.1.tgz",
+			"integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/checkbox": "^4.3.2",
+				"@inquirer/confirm": "^5.1.21",
+				"@inquirer/editor": "^4.2.23",
+				"@inquirer/expand": "^4.0.23",
+				"@inquirer/input": "^4.3.1",
+				"@inquirer/number": "^3.0.23",
+				"@inquirer/password": "^4.0.23",
+				"@inquirer/rawlist": "^4.1.11",
+				"@inquirer/search": "^3.2.2",
+				"@inquirer/select": "^4.4.2"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/rawlist": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-4.1.11.tgz",
+			"integrity": "sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/type": "^3.0.10",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/search": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/@inquirer/search/-/search-3.2.2.tgz",
+			"integrity": "sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/figures": "^1.0.15",
+				"@inquirer/type": "^3.0.10",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/select": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/@inquirer/select/-/select-4.4.2.tgz",
+			"integrity": "sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@inquirer/ansi": "^1.0.2",
+				"@inquirer/core": "^10.3.2",
+				"@inquirer/figures": "^1.0.15",
+				"@inquirer/type": "^3.0.10",
+				"yoctocolors-cjs": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@inquirer/type": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.10.tgz",
+			"integrity": "sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@types/node": ">=18"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@isaacs/balanced-match": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+			"integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
+		"node_modules/@isaacs/brace-expansion": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+			"integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@isaacs/balanced-match": "^4.0.1"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
+		"node_modules/@isaacs/cliui": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+			"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^5.1.2",
+				"string-width-cjs": "npm:string-width@^4.2.0",
+				"strip-ansi": "^7.0.1",
+				"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+				"wrap-ansi": "^8.1.0",
+				"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"license": "MIT"
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@kamilkisiela/fast-url-parser": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@kamilkisiela/fast-url-parser/-/fast-url-parser-1.1.4.tgz",
+			"integrity": "sha512-gbkePEBupNydxCelHCESvFSFM8XPh1Zs/OAVRW/rKpEqPAl5PbOM90Si8mv9bvnR53uPD2s/FiRxdvSejpRJew==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@kitql/helpers": {
+			"version": "0.8.13",
+			"resolved": "https://registry.npmjs.org/@kitql/helpers/-/helpers-0.8.13.tgz",
+			"integrity": "sha512-8Om4jxF3XLTrpCkrZ8q6kHco4o6u/zKisA7XjLdiUDeSX7VSprlq6fnG2xayrbrc1He+pHQkgj2cHqqUvEHTGg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esm-env": "^1.2.2"
+			},
+			"engines": {
+				"node": "^16.14 || >=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jycouet"
+			}
+		},
+		"node_modules/@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@repeaterjs/repeater": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.6.tgz",
+			"integrity": "sha512-Javneu5lsuhwNCryN+pXH93VPQ8g0dBX7wItHFgYiwQmzE1sVdg5tWHiOgHywzL2W21XQopa7IwIEnNbmeUJYA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@rollup/plugin-commonjs": {
+			"version": "28.0.9",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.9.tgz",
+			"integrity": "sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"commondir": "^1.0.1",
+				"estree-walker": "^2.0.2",
+				"fdir": "^6.2.0",
+				"is-reference": "1.2.1",
+				"magic-string": "^0.30.3",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=16.0.0 || 14 >= 14.17"
+			},
+			"peerDependencies": {
+				"rollup": "^2.68.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-json": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+			"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-node-resolve": {
+			"version": "16.0.3",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.3.tgz",
+			"integrity": "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"@types/resolve": "1.20.2",
+				"deepmerge": "^4.2.2",
+				"is-module": "^1.0.0",
+				"resolve": "^1.22.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.78.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+			"integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
+			"integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
+			"integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
+			"integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
+			"integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
+			"integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
+			"integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
+			"integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
+			"integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
+			"integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
+			"integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
+			"integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
+			"integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
+			"integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-musl": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
+			"integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
+			"integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
+			"integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
+			"integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-openharmony-arm64": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
+			"integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
+			"integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
+			"integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-gnu": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
+			"integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
+			"integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+			"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@sveltejs/acorn-typescript": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.7.tgz",
+			"integrity": "sha512-znp1A/Y1Jj4l/Zy7PX5DZKBE0ZNY+5QBngiE21NJkfSTyzzC5iKNWOtwFXKtIrn7MXEFBck4jD95iBNkGjK92Q==",
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8.9.0"
+			}
+		},
+		"node_modules/@sveltejs/adapter-node": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.4.0.tgz",
+			"integrity": "sha512-NMsrwGVPEn+J73zH83Uhss/hYYZN6zT3u31R3IHAn3MiKC3h8fjmIAhLfTSOeNHr5wPYfjjMg8E+1gyFgyrEcQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/plugin-commonjs": "^28.0.1",
+				"@rollup/plugin-json": "^6.1.0",
+				"@rollup/plugin-node-resolve": "^16.0.0",
+				"rollup": "^4.9.5"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.4.0"
+			}
+		},
+		"node_modules/@sveltejs/kit": {
+			"version": "2.49.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.0.tgz",
+			"integrity": "sha512-oH8tXw7EZnie8FdOWYrF7Yn4IKrqTFHhXvl8YxXxbKwTMcD/5NNCryUSEXRk2ZR4ojnub0P8rNrsVGHXWqIDtA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/spec": "^1.0.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/cookie": "^0.6.0",
+				"acorn": "^8.14.1",
+				"cookie": "^0.6.0",
+				"devalue": "^5.3.2",
+				"esm-env": "^1.2.2",
+				"kleur": "^4.1.5",
+				"magic-string": "^0.30.5",
+				"mrmime": "^2.0.0",
+				"sade": "^1.8.1",
+				"set-cookie-parser": "^2.6.0",
+				"sirv": "^3.0.0"
+			},
+			"bin": {
+				"svelte-kit": "svelte-kit.js"
+			},
+			"engines": {
+				"node": ">=18.13"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": "^1.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
+			},
+			"peerDependenciesMeta": {
+				"@opentelemetry/api": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz",
+			"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+				"debug": "^4.4.1",
+				"deepmerge": "^4.3.1",
+				"magic-string": "^0.30.17",
+				"vitefu": "^1.1.1"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-5.0.1.tgz",
+			"integrity": "sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.1"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^6.0.0-next.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@tailwindcss/forms": {
+			"version": "0.5.10",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
+			"integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mini-svg-data-uri": "^1.2.3"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+			"integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"enhanced-resolve": "^5.18.3",
+				"jiti": "^2.6.1",
+				"lightningcss": "1.30.2",
+				"magic-string": "^0.30.21",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.1.17"
+			}
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+			"integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.1.17",
+				"@tailwindcss/oxide-darwin-arm64": "4.1.17",
+				"@tailwindcss/oxide-darwin-x64": "4.1.17",
+				"@tailwindcss/oxide-freebsd-x64": "4.1.17",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+				"@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+				"@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-android-arm64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+			"integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+			"integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-x64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+			"integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-freebsd-x64": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+			"integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+			"integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+			"integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+			"integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+			"integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-musl": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+			"integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+			"integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+			"bundleDependencies": [
+				"@napi-rs/wasm-runtime",
+				"@emnapi/core",
+				"@emnapi/runtime",
+				"@tybys/wasm-util",
+				"@emnapi/wasi-threads",
+				"tslib"
+			],
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.6.0",
+				"@emnapi/runtime": "^1.6.0",
+				"@emnapi/wasi-threads": "^1.1.0",
+				"@napi-rs/wasm-runtime": "^1.0.7",
+				"@tybys/wasm-util": "^0.10.1",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+			"integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+			"integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+			"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/vite": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",
+			"integrity": "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@tailwindcss/node": "4.1.17",
+				"@tailwindcss/oxide": "4.1.17",
+				"tailwindcss": "4.1.17"
+			},
+			"peerDependencies": {
+				"vite": "^5.2.0 || ^6 || ^7"
+			}
+		},
+		"node_modules/@theguild/federation-composition": {
+			"version": "0.21.0",
+			"resolved": "https://registry.npmjs.org/@theguild/federation-composition/-/federation-composition-0.21.0.tgz",
+			"integrity": "sha512-cdQ9rDEtBpT553DLLtcsSjtSDIadibIxAD3K5r0eUuDOfxx+es7Uk+aOucfqMlNOM3eybsgJN3T2SQmEsINwmw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"constant-case": "^3.0.4",
+				"debug": "4.4.3",
+				"json5": "^2.2.3",
+				"lodash.sortby": "^4.7.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"graphql": "^16.0.0"
+			}
+		},
+		"node_modules/@types/braces": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@types/braces/-/braces-3.0.5.tgz",
+			"integrity": "sha512-SQFof9H+LXeWNz8wDe7oN5zu7ket0qwMu5vZubW4GCJ8Kkeh6nBWUz87+KTz/G3Kqsrp0j/W253XJb3KMEeg3w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+			"license": "MIT"
+		},
+		"node_modules/@types/fs-extra": {
+			"version": "9.0.13",
+			"resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
+			"integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/micromatch": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/@types/micromatch/-/micromatch-4.0.10.tgz",
+			"integrity": "sha512-5jOhFDElqr4DKTrTEbnW8DZ4Hz5LRUEmyrGpCMrD/NphYv3nUnaF08xmSLx1rGGnyEs/kFnhiw6dCgcDqMr5PQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/braces": "*"
+			}
+		},
+		"node_modules/@types/node": {
+			"version": "24.10.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+			"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~7.16.0"
+			}
+		},
+		"node_modules/@types/resolve": {
+			"version": "1.20.2",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/ws": {
+			"version": "8.18.1",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+			"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.0.tgz",
+			"integrity": "sha512-XxXP5tL1txl13YFtrECECQYeZjBZad4fyd3cFV4a19LkAY/bIp9fev3US4S5fDVV2JaYFiKAZ/GRTOLer+mbyQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/regexpp": "^4.10.0",
+				"@typescript-eslint/scope-manager": "8.48.0",
+				"@typescript-eslint/type-utils": "8.48.0",
+				"@typescript-eslint/utils": "8.48.0",
+				"@typescript-eslint/visitor-keys": "8.48.0",
+				"graphemer": "^1.4.0",
+				"ignore": "^7.0.0",
+				"natural-compare": "^1.4.0",
+				"ts-api-utils": "^2.1.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/parser": "^8.48.0",
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+			"integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@typescript-eslint/parser": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.0.tgz",
+			"integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/scope-manager": "8.48.0",
+				"@typescript-eslint/types": "8.48.0",
+				"@typescript-eslint/typescript-estree": "8.48.0",
+				"@typescript-eslint/visitor-keys": "8.48.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/project-service": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.0.tgz",
+			"integrity": "sha512-Ne4CTZyRh1BecBf84siv42wv5vQvVmgtk8AuiEffKTUo3DrBaGYZueJSxxBZ8fjk/N3DrgChH4TOdIOwOwiqqw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/tsconfig-utils": "^8.48.0",
+				"@typescript-eslint/types": "^8.48.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/scope-manager": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.0.tgz",
+			"integrity": "sha512-uGSSsbrtJrLduti0Q1Q9+BF1/iFKaxGoQwjWOIVNJv0o6omrdyR8ct37m4xIl5Zzpkp69Kkmvom7QFTtue89YQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.48.0",
+				"@typescript-eslint/visitor-keys": "8.48.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/tsconfig-utils": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.0.tgz",
+			"integrity": "sha512-WNebjBdFdyu10sR1M4OXTt2OkMd5KWIL+LLfeH9KhgP+jzfDV/LI3eXzwJ1s9+Yc0Kzo2fQCdY/OpdusCMmh6w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.48.0.tgz",
+			"integrity": "sha512-zbeVaVqeXhhab6QNEKfK96Xyc7UQuoFWERhEnj3mLVnUWrQnv15cJNseUni7f3g557gm0e46LZ6IJ4NJVOgOpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.48.0",
+				"@typescript-eslint/typescript-estree": "8.48.0",
+				"@typescript-eslint/utils": "8.48.0",
+				"debug": "^4.3.4",
+				"ts-api-utils": "^2.1.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/types": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.0.tgz",
+			"integrity": "sha512-cQMcGQQH7kwKoVswD1xdOytxQR60MWKM1di26xSUtxehaDs/32Zpqsu5WJlXTtTTqyAVK8R7hvsUnIXRS+bjvA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.0.tgz",
+			"integrity": "sha512-ljHab1CSO4rGrQIAyizUS6UGHHCiAYhbfcIZ1zVJr5nMryxlXMVWS3duFPSKvSUbFPwkXMFk1k0EMIjub4sRRQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/project-service": "8.48.0",
+				"@typescript-eslint/tsconfig-utils": "8.48.0",
+				"@typescript-eslint/types": "8.48.0",
+				"@typescript-eslint/visitor-keys": "8.48.0",
+				"debug": "^4.3.4",
+				"minimatch": "^9.0.4",
+				"semver": "^7.6.0",
+				"tinyglobby": "^0.2.15",
+				"ts-api-utils": "^2.1.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@typescript-eslint/utils": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.48.0.tgz",
+			"integrity": "sha512-yTJO1XuGxCsSfIVt1+1UrLHtue8xz16V8apzPYI06W0HbEbEWHxHXgZaAgavIkoh+GeV6hKKd5jm0sS6OYxWXQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.7.0",
+				"@typescript-eslint/scope-manager": "8.48.0",
+				"@typescript-eslint/types": "8.48.0",
+				"@typescript-eslint/typescript-estree": "8.48.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.0.tgz",
+			"integrity": "sha512-T0XJMaRPOH3+LBbAfzR2jalckP1MSG/L9eUtY0DEzUyVaXJ/t6zN0nR7co5kz0Jko/nkSYCBRkz1djvjajVTTg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.48.0",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+			"integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/@urql/core": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/@urql/core/-/core-6.0.1.tgz",
+			"integrity": "sha512-FZDiQk6jxbj5hixf2rEPv0jI+IZz0EqqGW8mJBEug68/zHTtT+f34guZDmyjJZyiWbj0vL165LoMr/TkeDHaug==",
+			"license": "MIT",
+			"dependencies": {
+				"@0no-co/graphql.web": "^1.0.13",
+				"wonka": "^6.3.2"
+			}
+		},
+		"node_modules/@urql/svelte": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@urql/svelte/-/svelte-5.0.0.tgz",
+			"integrity": "sha512-tHYEyFZwWsBW9GfpXbK+GImWhyZO1TJkhHsquosza0D0qOZyL+wGp/qT74WPUBJaF4gkUSXOQtUidDI7uvnuoQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@urql/core": "^6.0.0",
+				"wonka": "^6.3.2"
+			},
+			"peerDependencies": {
+				"@urql/core": "^6.0.0",
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/disposablestack": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz",
+			"integrity": "sha512-LOtTn+JgJvX8WfBVJtF08TGrdjuFzGJc4mkP8EdDI8ADbvO7kiexYep1o8dwnt0okb0jYclCDXF13xU7Ge4zSw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/events": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/events/-/events-0.1.2.tgz",
+			"integrity": "sha512-ApcWxkrs1WmEMS2CaLLFUEem/49erT3sxIVjpzU5f6zmVcnijtDSrhoK2zVobOIikZJdH63jdAXOrvjf6eOUNQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/fetch": {
+			"version": "0.10.13",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/fetch/-/fetch-0.10.13.tgz",
+			"integrity": "sha512-b4PhJ+zYj4357zwk4TTuF2nEe0vVtOrwdsrNo5hL+u1ojXNhh1FgJ6pg1jzDlwlT4oBdzfSwaBwMCtFCsIWg8Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/node-fetch": "^0.8.3",
+				"urlpattern-polyfill": "^10.0.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/node-fetch": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.8.4.tgz",
+			"integrity": "sha512-AlKLc57loGoyYlrzDbejB9EeR+pfdJdGzbYnkEuZaGekFboBwzfVYVMsy88PMriqPI1ORpiGYGgSSWpx7a2sDA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@fastify/busboy": "^3.1.1",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/promise-helpers": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/promise-helpers/-/promise-helpers-1.3.2.tgz",
+			"integrity": "sha512-Nst5JdK47VIl9UcGwtv2Rcgyn5lWtZ0/mhRQ4G8NN2isxpq2TO30iqHzmwoJycjWuyUfg3GFXqP/gFHXeV57IA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/@whatwg-node/server": {
+			"version": "0.10.17",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/server/-/server-0.10.17.tgz",
+			"integrity": "sha512-QxI+HQfJeI/UscFNCTcSri6nrHP25mtyAMbhEri7W2ctdb3EsorPuJz7IovSgNjvKVs73dg9Fmayewx1O2xOxA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/instrumentation": "^1.0.0",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/fetch": "^0.10.13",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/acorn": {
+			"version": "8.15.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-jsx": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/ansi-escapes": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
+			"integrity": "sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"environment": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/ansi-regex": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+			"integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true,
+			"license": "Python-2.0"
+		},
+		"node_modules/aria-query": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/asap": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ast-types": {
+			"version": "0.16.1",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+			"integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/auto-bind": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz",
+			"integrity": "sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/axios": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+			"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"follow-redirects": "^1.15.6",
+				"form-data": "^4.0.4",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
+		"node_modules/axobject-query": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/babel-plugin-syntax-trailing-function-commas": {
+			"version": "7.0.0-beta.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
+			"integrity": "sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/babel-preset-fbjs": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz",
+			"integrity": "sha512-9ywCsCvo1ojrw0b+XYk7aFvTH6D9064t0RIL1rtMf3nsa02Xw41MS7sZw216Im35xj/UY0PDBQsa1brUDDF1Ow==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/plugin-proposal-class-properties": "^7.0.0",
+				"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+				"@babel/plugin-syntax-class-properties": "^7.0.0",
+				"@babel/plugin-syntax-flow": "^7.0.0",
+				"@babel/plugin-syntax-jsx": "^7.0.0",
+				"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0",
+				"@babel/plugin-transform-block-scoped-functions": "^7.0.0",
+				"@babel/plugin-transform-block-scoping": "^7.0.0",
+				"@babel/plugin-transform-classes": "^7.0.0",
+				"@babel/plugin-transform-computed-properties": "^7.0.0",
+				"@babel/plugin-transform-destructuring": "^7.0.0",
+				"@babel/plugin-transform-flow-strip-types": "^7.0.0",
+				"@babel/plugin-transform-for-of": "^7.0.0",
+				"@babel/plugin-transform-function-name": "^7.0.0",
+				"@babel/plugin-transform-literals": "^7.0.0",
+				"@babel/plugin-transform-member-expression-literals": "^7.0.0",
+				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
+				"@babel/plugin-transform-object-super": "^7.0.0",
+				"@babel/plugin-transform-parameters": "^7.0.0",
+				"@babel/plugin-transform-property-literals": "^7.0.0",
+				"@babel/plugin-transform-react-display-name": "^7.0.0",
+				"@babel/plugin-transform-react-jsx": "^7.0.0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
+				"@babel/plugin-transform-spread": "^7.0.0",
+				"@babel/plugin-transform-template-literals": "^7.0.0",
+				"babel-plugin-syntax-trailing-function-commas": "^7.0.0-beta.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/baseline-browser-mapping": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.3.tgz",
+			"integrity": "sha512-8QdH6czo+G7uBsNo0GiUfouPN1lRzKdJTGnKXwe12gkFbnnOUaUKGN55dMkfy+mnxmvjwl9zcI4VncczcVXDhA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"baseline-browser-mapping": "dist/cli.js"
+			}
+		},
+		"node_modules/brace-expansion": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/browserslist": {
+			"version": "4.28.1",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+			"integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"baseline-browser-mapping": "^2.9.0",
+				"caniuse-lite": "^1.0.30001759",
+				"electron-to-chromium": "^1.5.263",
+				"node-releases": "^2.0.27",
+				"update-browserslist-db": "^1.2.0"
+			},
+			"bin": {
+				"browserslist": "cli.js"
+			},
+			"engines": {
+				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+			}
+		},
+		"node_modules/bser": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+			"integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"node-int64": "^0.4.0"
+			}
+		},
+		"node_modules/builtins": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+			"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"semver": "^7.0.0"
+			}
+		},
+		"node_modules/busboy": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+			"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+			"dev": true,
+			"dependencies": {
+				"streamsearch": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=10.16.0"
+			}
+		},
+		"node_modules/call-bind-apply-helpers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/callsites": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/camel-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"pascal-case": "^3.1.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/caniuse-lite": {
+			"version": "1.0.30001759",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
+			"integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "CC-BY-4.0"
+		},
+		"node_modules/capital-case": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
+		"node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/change-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"capital-case": "^1.0.4",
+				"constant-case": "^3.0.4",
+				"dot-case": "^3.0.4",
+				"header-case": "^2.0.4",
+				"no-case": "^3.0.4",
+				"param-case": "^3.0.4",
+				"pascal-case": "^3.1.2",
+				"path-case": "^3.0.4",
+				"sentence-case": "^3.0.4",
+				"snake-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/change-case-all": {
+			"version": "1.0.15",
+			"resolved": "https://registry.npmjs.org/change-case-all/-/change-case-all-1.0.15.tgz",
+			"integrity": "sha512-3+GIFhk3sNuvFAJKU46o26OdzudQlPNBCu1ZQi3cMeMHhty1bhDxu2WrEilVNYaGvqUtR1VSigFcJOiS13dRhQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"change-case": "^4.1.2",
+				"is-lower-case": "^2.0.2",
+				"is-upper-case": "^2.0.2",
+				"lower-case": "^2.0.2",
+				"lower-case-first": "^2.0.2",
+				"sponge-case": "^1.0.1",
+				"swap-case": "^2.0.2",
+				"title-case": "^3.0.3",
+				"upper-case": "^2.0.2",
+				"upper-case-first": "^2.0.2"
+			}
+		},
+		"node_modules/chardet": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz",
+			"integrity": "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/cli-cursor": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+			"integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"restore-cursor": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cli-truncate": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+			"integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"slice-ansi": "^7.1.0",
+				"string-width": "^8.0.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cli-truncate/node_modules/string-width": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+			"integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"get-east-asian-width": "^1.3.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cli-width": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+			"integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/cliui/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/cliui/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/commander": {
+			"version": "9.5.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+			"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.20.0 || >=14"
+			}
+		},
+		"node_modules/common-tags": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+			"integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/commondir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/constant-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case": "^2.0.2"
+			}
+		},
+		"node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/cosmiconfig": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+			"integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"env-paths": "^2.2.1",
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/cross-fetch": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz",
+			"integrity": "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"node-fetch": "^2.7.0"
+			}
+		},
+		"node_modules/cross-fetch/node_modules/node-fetch": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+			"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-url": "^5.0.0"
+			},
+			"engines": {
+				"node": "4.x || >=6.0.0"
+			},
+			"peerDependencies": {
+				"encoding": "^0.1.0"
+			},
+			"peerDependenciesMeta": {
+				"encoding": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/cross-inspect": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/cross-inspect/-/cross-inspect-1.0.1.tgz",
+			"integrity": "sha512-Pcw1JTvZLSJH83iiGWt6fRcT+BjZlCDRVwYLbUcHzv/CRpB7r0MlSrGbIyQvVSNyGnbt7G4AXuyCiDR3POvZ1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/cross-spawn": {
+			"version": "7.0.6",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+			"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/dataloader": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/dataloader/-/dataloader-2.2.3.tgz",
+			"integrity": "sha512-y2krtASINtPFS1rSDjacrFgn1dcUuoREVabwlOGOe4SdxenREqwjwjElAdwvbGM7kgZz9a3KVicWR7vcz8rnzA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
+		"node_modules/debounce": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz",
+			"integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/deep-is": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/deepmerge": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/dependency-graph": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+			"integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/detect-indent": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/devalue": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.5.0.tgz",
+			"integrity": "sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==",
+			"license": "MIT"
+		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/dot-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/dset": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz",
+			"integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/eastasianwidth": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/electron-to-chromium": {
+			"version": "1.5.266",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
+			"integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/emoji-regex": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.18.3",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+			"integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/env-paths": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/environment": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+			"integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/error-ex": {
+			"version": "1.3.4",
+			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+			"integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-arrayish": "^0.2.1"
+			}
+		},
+		"node_modules/es-define-property": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/esbuild": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
+			}
+		},
+		"node_modules/escalade": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint": {
+			"version": "9.39.1",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
+			"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.8.0",
+				"@eslint-community/regexpp": "^4.12.1",
+				"@eslint/config-array": "^0.21.1",
+				"@eslint/config-helpers": "^0.4.2",
+				"@eslint/core": "^0.17.0",
+				"@eslint/eslintrc": "^3.3.1",
+				"@eslint/js": "9.39.1",
+				"@eslint/plugin-kit": "^0.4.1",
+				"@humanfs/node": "^0.16.6",
+				"@humanwhocodes/module-importer": "^1.0.1",
+				"@humanwhocodes/retry": "^0.4.2",
+				"@types/estree": "^1.0.6",
+				"ajv": "^6.12.4",
+				"chalk": "^4.0.0",
+				"cross-spawn": "^7.0.6",
+				"debug": "^4.3.2",
+				"escape-string-regexp": "^4.0.0",
+				"eslint-scope": "^8.4.0",
+				"eslint-visitor-keys": "^4.2.1",
+				"espree": "^10.4.0",
+				"esquery": "^1.5.0",
+				"esutils": "^2.0.2",
+				"fast-deep-equal": "^3.1.3",
+				"file-entry-cache": "^8.0.0",
+				"find-up": "^5.0.0",
+				"glob-parent": "^6.0.2",
+				"ignore": "^5.2.0",
+				"imurmurhash": "^0.1.4",
+				"is-glob": "^4.0.0",
+				"json-stable-stringify-without-jsonify": "^1.0.1",
+				"lodash.merge": "^4.6.2",
+				"minimatch": "^3.1.2",
+				"natural-compare": "^1.4.0",
+				"optionator": "^0.9.3"
+			},
+			"bin": {
+				"eslint": "bin/eslint.js"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://eslint.org/donate"
+			},
+			"peerDependencies": {
+				"jiti": "*"
+			},
+			"peerDependenciesMeta": {
+				"jiti": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-config-prettier": {
+			"version": "10.1.8",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+			"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"eslint-config-prettier": "bin/cli.js"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint-config-prettier"
+			},
+			"peerDependencies": {
+				"eslint": ">=7.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-svelte": {
+			"version": "3.13.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-3.13.0.tgz",
+			"integrity": "sha512-2ohCCQJJTNbIpQCSDSTWj+FN0OVfPmSO03lmSNT7ytqMaWF6kpT86LdzDqtm4sh7TVPl/OEWJ/d7R87bXP2Vjg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.6.1",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"esutils": "^2.0.3",
+				"globals": "^16.0.0",
+				"known-css-properties": "^0.37.0",
+				"postcss": "^8.4.49",
+				"postcss-load-config": "^3.1.4",
+				"postcss-safe-parser": "^7.0.0",
+				"semver": "^7.6.3",
+				"svelte-eslint-parser": "^1.4.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.1 || ^9.0.0",
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-scope": {
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+			"integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint-visitor-keys": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/esm-env": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"license": "MIT"
+		},
+		"node_modules/espree": {
+			"version": "10.4.0",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+			"integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"acorn": "^8.15.0",
+				"acorn-jsx": "^5.3.2",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/esquery": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+			"integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"estraverse": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/esrap": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.0.tgz",
+			"integrity": "sha512-WBmtxe7R9C5mvL4n2le8nMUe4mD5V9oiK2vJpQ9I3y20ENPUomPcphBXE8D1x/Bm84oN1V+lOfgXxtqmxTp3Xg==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			}
+		},
+		"node_modules/esrecurse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/esutils": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/eventemitter3": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+			"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/execa": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz",
+			"integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.1",
+				"human-signals": "^3.0.1",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^3.0.7",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/execa/node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/fast-decode-uri-component": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz",
+			"integrity": "sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-deep-equal": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-glob": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/fast-glob/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/fast-json-stable-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-levenshtein": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-querystring": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fast-querystring/-/fast-querystring-1.1.2.tgz",
+			"integrity": "sha512-g6KuKWmFXc0fID8WWH0jit4g0AGBoJhCkJMb1RmbsSEUNvQ+ZC8D6CUZ+GtF8nMzSPXnhiePyyqqipzNNEnHjg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fast-decode-uri-component": "^1.0.1"
+			}
+		},
+		"node_modules/fastq": {
+			"version": "1.19.1",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+			"integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"reusify": "^1.0.4"
+			}
+		},
+		"node_modules/fb-watchman": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+			"integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"bser": "2.1.1"
+			}
+		},
+		"node_modules/fbjs": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz",
+			"integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cross-fetch": "^3.1.5",
+				"fbjs-css-vars": "^1.0.0",
+				"loose-envify": "^1.0.0",
+				"object-assign": "^4.1.0",
+				"promise": "^7.1.1",
+				"setimmediate": "^1.0.5",
+				"ua-parser-js": "^1.0.35"
+			}
+		},
+		"node_modules/fbjs-css-vars": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+			"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fetch-blob": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"node-domexception": "^1.0.0",
+				"web-streams-polyfill": "^3.0.3"
+			},
+			"engines": {
+				"node": "^12.20 || >= 14.13"
+			}
+		},
+		"node_modules/file-entry-cache": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+			"integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"flat-cache": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/flat-cache": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+			"integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"flatted": "^3.2.9",
+				"keyv": "^4.5.4"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/flatted": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+			"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.11",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+			"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/foreground-child": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+			"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"cross-spawn": "^7.0.6",
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/form-data": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+			"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"es-set-tostringtag": "^2.1.0",
+				"hasown": "^2.0.2",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/formdata-polyfill": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fetch-blob": "^3.1.2"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/fs-extra": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+			"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/fs-monkey": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz",
+			"integrity": "sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==",
+			"dev": true,
+			"license": "Unlicense"
+		},
+		"node_modules/fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/gensync": {
+			"version": "1.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
+		"node_modules/get-east-asian-width": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+			"integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/glob": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+			"integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"foreground-child": "^3.3.1",
+				"jackspeak": "^4.1.1",
+				"minimatch": "^10.1.1",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^2.0.0"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/glob/node_modules/minimatch": {
+			"version": "10.1.1",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+			"integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/brace-expansion": "^5.0.0"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/globals": {
+			"version": "16.5.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+			"integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/gopd": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/graphemer": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/graphql": {
+			"version": "16.12.0",
+			"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.12.0.tgz",
+			"integrity": "sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==",
+			"license": "MIT",
+			"engines": {
+				"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+			}
+		},
+		"node_modules/graphql-config": {
+			"version": "5.1.5",
+			"resolved": "https://registry.npmjs.org/graphql-config/-/graphql-config-5.1.5.tgz",
+			"integrity": "sha512-mG2LL1HccpU8qg5ajLROgdsBzx/o2M6kgI3uAmoaXiSH9PCUbtIyLomLqUtCFaAeG2YCFsl0M5cfQ9rKmDoMVA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/graphql-file-loader": "^8.0.0",
+				"@graphql-tools/json-file-loader": "^8.0.0",
+				"@graphql-tools/load": "^8.1.0",
+				"@graphql-tools/merge": "^9.0.0",
+				"@graphql-tools/url-loader": "^8.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"cosmiconfig": "^8.1.0",
+				"jiti": "^2.0.0",
+				"minimatch": "^9.0.5",
+				"string-env-interpolation": "^1.0.1",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"cosmiconfig-toml-loader": "^1.0.0",
+				"graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			},
+			"peerDependenciesMeta": {
+				"cosmiconfig-toml-loader": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/graphql-config/node_modules/@envelop/core": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@envelop/core/-/core-5.4.0.tgz",
+			"integrity": "sha512-/1fat63pySE8rw/dZZArEVytLD90JApY85deDJ0/34gm+yhQ3k70CloSUevxoOE4YCGveG3s9SJJfQeeB4NAtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/instrumentation": "^1.0.0",
+				"@envelop/types": "^5.2.1",
+				"@whatwg-node/promise-helpers": "^1.2.4",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@envelop/types": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/@envelop/types/-/types-5.2.1.tgz",
+			"integrity": "sha512-CsFmA3u3c2QoLDTfEpGr4t25fjMU31nyvse7IzWTvb0ZycuPjMjb0fjlheh+PbhBYb9YLugnT2uY6Mwcg1o+Zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-hive/signal": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@graphql-hive/signal/-/signal-1.0.0.tgz",
+			"integrity": "sha512-RiwLMc89lTjvyLEivZ/qxAC5nBHoS2CtsWFSOsN35sxG9zoo5Z+JsFHM8MlvmO9yt+MJNIyC5MLE1rsbOphlag==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/batch-execute": {
+			"version": "9.0.19",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/batch-execute/-/batch-execute-9.0.19.tgz",
+			"integrity": "sha512-VGamgY4PLzSx48IHPoblRw0oTaBa7S26RpZXt0Y4NN90ytoE0LutlpB2484RbkfcTjv9wa64QD474+YP1kEgGA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/utils": "^10.9.1",
+				"@whatwg-node/promise-helpers": "^1.3.0",
+				"dataloader": "^2.2.3",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/delegate": {
+			"version": "10.2.23",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/delegate/-/delegate-10.2.23.tgz",
+			"integrity": "sha512-xrPtl7f1LxS+B6o+W7ueuQh67CwRkfl+UKJncaslnqYdkxKmNBB4wnzVcW8ZsRdwbsla/v43PtwAvSlzxCzq2w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/batch-execute": "^9.0.19",
+				"@graphql-tools/executor": "^1.4.9",
+				"@graphql-tools/schema": "^10.0.25",
+				"@graphql-tools/utils": "^10.9.1",
+				"@repeaterjs/repeater": "^3.0.6",
+				"@whatwg-node/promise-helpers": "^1.3.0",
+				"dataloader": "^2.2.3",
+				"dset": "^3.1.2",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/executor-common": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-common/-/executor-common-0.0.6.tgz",
+			"integrity": "sha512-JAH/R1zf77CSkpYATIJw+eOJwsbWocdDjY+avY7G+P5HCXxwQjAjWVkJI1QJBQYjPQDVxwf1fmTZlIN3VOadow==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/core": "^5.3.0",
+				"@graphql-tools/utils": "^10.9.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/executor-graphql-ws": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-graphql-ws/-/executor-graphql-ws-2.0.7.tgz",
+			"integrity": "sha512-J27za7sKF6RjhmvSOwOQFeNhNHyP4f4niqPnerJmq73OtLx9Y2PGOhkXOEB0PjhvPJceuttkD2O1yMgEkTGs3Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/executor-common": "^0.0.6",
+				"@graphql-tools/utils": "^10.9.1",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"graphql-ws": "^6.0.6",
+				"isomorphic-ws": "^5.0.0",
+				"tslib": "^2.8.1",
+				"ws": "^8.18.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/executor-http": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-http/-/executor-http-1.3.3.tgz",
+			"integrity": "sha512-LIy+l08/Ivl8f8sMiHW2ebyck59JzyzO/yF9SFS4NH6MJZUezA1xThUXCDIKhHiD56h/gPojbkpcFvM2CbNE7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-hive/signal": "^1.0.0",
+				"@graphql-tools/executor-common": "^0.0.4",
+				"@graphql-tools/utils": "^10.8.1",
+				"@repeaterjs/repeater": "^3.0.4",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/fetch": "^0.10.4",
+				"@whatwg-node/promise-helpers": "^1.3.0",
+				"meros": "^1.2.1",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/executor-http/node_modules/@graphql-tools/executor-common": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/executor-common/-/executor-common-0.0.4.tgz",
+			"integrity": "sha512-SEH/OWR+sHbknqZyROCFHcRrbZeUAyjCsgpVWCRjqjqRbiJiXq6TxNIIOmpXgkrXWW/2Ev4Wms6YSGJXjdCs6Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/core": "^5.2.3",
+				"@graphql-tools/utils": "^10.8.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/schema": {
+			"version": "10.0.30",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.30.tgz",
+			"integrity": "sha512-yPXU17uM/LR90t92yYQqn9mAJNOVZJc0nQtYeZyZeQZeQjwIGlTubvvoDL0fFVk+wZzs4YQOgds2NwSA4npodA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.6",
+				"@graphql-tools/utils": "^10.11.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/url-loader": {
+			"version": "8.0.33",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/url-loader/-/url-loader-8.0.33.tgz",
+			"integrity": "sha512-Fu626qcNHcqAj8uYd7QRarcJn5XZ863kmxsg1sm0fyjyfBJnsvC7ddFt6Hayz5kxVKfsnjxiDfPMXanvsQVBKw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/executor-graphql-ws": "^2.0.1",
+				"@graphql-tools/executor-http": "^1.1.9",
+				"@graphql-tools/executor-legacy-ws": "^1.1.19",
+				"@graphql-tools/utils": "^10.9.1",
+				"@graphql-tools/wrap": "^10.0.16",
+				"@types/ws": "^8.0.0",
+				"@whatwg-node/fetch": "^0.10.0",
+				"@whatwg-node/promise-helpers": "^1.0.0",
+				"isomorphic-ws": "^5.0.0",
+				"sync-fetch": "0.6.0-2",
+				"tslib": "^2.4.0",
+				"ws": "^8.17.1"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/@graphql-tools/wrap": {
+			"version": "10.1.4",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/wrap/-/wrap-10.1.4.tgz",
+			"integrity": "sha512-7pyNKqXProRjlSdqOtrbnFRMQAVamCmEREilOXtZujxY6kYit3tvWWSjUrcIOheltTffoRh7EQSjpy2JDCzasg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/delegate": "^10.2.23",
+				"@graphql-tools/schema": "^10.0.25",
+				"@graphql-tools/utils": "^10.9.1",
+				"@whatwg-node/promise-helpers": "^1.3.0",
+				"tslib": "^2.8.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/graphql-config/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/graphql-config/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/graphql-tag": {
+			"version": "2.12.6",
+			"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
+			"integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+			}
+		},
+		"node_modules/graphql-ws": {
+			"version": "6.0.6",
+			"resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-6.0.6.tgz",
+			"integrity": "sha512-zgfER9s+ftkGKUZgc0xbx8T7/HMO4AV5/YuYiFc+AtgcO5T0v8AxYYNQ+ltzuzDZgNkYJaFspm5MMYLjQzrkmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			},
+			"peerDependencies": {
+				"@fastify/websocket": "^10 || ^11",
+				"crossws": "~0.3",
+				"graphql": "^15.10.1 || ^16",
+				"uWebSockets.js": "^20",
+				"ws": "^8"
+			},
+			"peerDependenciesMeta": {
+				"@fastify/websocket": {
+					"optional": true
+				},
+				"crossws": {
+					"optional": true
+				},
+				"uWebSockets.js": {
+					"optional": true
+				},
+				"ws": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/graphql-yoga": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/graphql-yoga/-/graphql-yoga-4.0.5.tgz",
+			"integrity": "sha512-vIbJU9QX5RP4PoxbMCHcfOlt/3EsC/0uLdAOlKaiUvlwJDTFCaIHo2X10vL4i/27Gw8g90ECIwm2YbmeLDwcqg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@envelop/core": "^4.0.0",
+				"@graphql-tools/executor": "^1.0.0",
+				"@graphql-tools/schema": "^10.0.0",
+				"@graphql-tools/utils": "^10.0.0",
+				"@graphql-yoga/logger": "^1.0.0",
+				"@graphql-yoga/subscription": "^4.0.0",
+				"@whatwg-node/fetch": "^0.9.7",
+				"@whatwg-node/server": "^0.9.1",
+				"dset": "^3.1.1",
+				"lru-cache": "^10.0.0",
+				"tslib": "^2.5.2"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^15.2.0 || ^16.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@graphql-tools/schema": {
+			"version": "10.0.29",
+			"resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-10.0.29.tgz",
+			"integrity": "sha512-+Htiupnq6U/AWOEAJerIOGT1pAf4u43Q3n2JmFpqFfYJchz6sKWZ7L9Lpe/NusaaUQty/IOF+eQlNFypEaWxhg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@graphql-tools/merge": "^9.1.5",
+				"@graphql-tools/utils": "^10.10.3",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"peerDependencies": {
+				"graphql": "^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@whatwg-node/fetch": {
+			"version": "0.9.23",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/fetch/-/fetch-0.9.23.tgz",
+			"integrity": "sha512-7xlqWel9JsmxahJnYVUj/LLxWcnA93DR4c9xlw3U814jWTiYalryiH1qToik1hOxweKKRLi4haXHM5ycRksPBA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/node-fetch": "^0.6.0",
+				"urlpattern-polyfill": "^10.0.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@whatwg-node/node-fetch": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.6.0.tgz",
+			"integrity": "sha512-tcZAhrpx6oVlkEsRngeTEEE7I5/QdLjeEz4IlekabGaESP7+Dkm/6a9KcF1KdCBB7mO9PXtBkwCuTCt8+UPg8Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@kamilkisiela/fast-url-parser": "^1.1.4",
+				"busboy": "^1.6.0",
+				"fast-querystring": "^1.1.1",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@whatwg-node/server": {
+			"version": "0.9.71",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/server/-/server-0.9.71.tgz",
+			"integrity": "sha512-ueFCcIPaMgtuYDS9u0qlUoEvj6GiSsKrwnOLPp9SshqjtcRaR1IEHRjoReq3sXNydsF5i0ZnmuYgXq9dV53t0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/fetch": "^0.10.5",
+				"@whatwg-node/promise-helpers": "^1.2.2",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@whatwg-node/server/node_modules/@whatwg-node/fetch": {
+			"version": "0.10.13",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/fetch/-/fetch-0.10.13.tgz",
+			"integrity": "sha512-b4PhJ+zYj4357zwk4TTuF2nEe0vVtOrwdsrNo5hL+u1ojXNhh1FgJ6pg1jzDlwlT4oBdzfSwaBwMCtFCsIWg8Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@whatwg-node/node-fetch": "^0.8.3",
+				"urlpattern-polyfill": "^10.0.0"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/graphql-yoga/node_modules/@whatwg-node/server/node_modules/@whatwg-node/node-fetch": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/@whatwg-node/node-fetch/-/node-fetch-0.8.4.tgz",
+			"integrity": "sha512-AlKLc57loGoyYlrzDbejB9EeR+pfdJdGzbYnkEuZaGekFboBwzfVYVMsy88PMriqPI1ORpiGYGgSSWpx7a2sDA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@fastify/busboy": "^3.1.1",
+				"@whatwg-node/disposablestack": "^0.0.6",
+				"@whatwg-node/promise-helpers": "^1.3.2",
+				"tslib": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/header-case": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"capital-case": "^1.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/heic2any": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/heic2any/-/heic2any-0.0.4.tgz",
+			"integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==",
+			"license": "MIT"
+		},
+		"node_modules/houdini": {
+			"version": "2.0.0-next.11",
+			"resolved": "https://registry.npmjs.org/houdini/-/houdini-2.0.0-next.11.tgz",
+			"integrity": "sha512-XrksBpHcUZwJn6cUulwIAXMTEmvTDIXSizEKc6WbDYezzoPQKiH4hk5RB4mNevzMbDbxoKy55MBAq/rYuYUljA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.25.4",
+				"@clack/prompts": "^0.6.3",
+				"@graphql-tools/merge": "^9.0.6",
+				"@graphql-tools/schema": "^9.0.4",
+				"@kitql/helpers": "^0.8.10",
+				"@types/estree": "^1.0.7",
+				"@types/fs-extra": "^9.0.13",
+				"@types/micromatch": "^4.0.2",
+				"@ungap/structured-clone": "^1.0.2",
+				"@whatwg-node/server": "^0.10.5",
+				"ast-types": "^0.16.1",
+				"commander": "^9.4.0",
+				"deepmerge": "^4.2.2",
+				"estree-walker": "3.0.1",
+				"fs-extra": "^10.1.0",
+				"glob": "^11.0.1",
+				"graphql": "^16.10.0",
+				"graphql-yoga": "^4.0.4",
+				"memfs": "^3.4.7",
+				"micromatch": "^4.0.8",
+				"minimatch": "^5.1.0",
+				"node-fetch": "^3.2.10",
+				"npx-import": "^1.1.3",
+				"recast": "0.23.8"
+			},
+			"bin": {
+				"houdini": "build/cmd-esm/index.js"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/HoudiniGraphql"
+			},
+			"peerDependencies": {
+				"vite": "^7.0.0"
+			}
+		},
+		"node_modules/houdini-svelte": {
+			"version": "3.0.0-next.13",
+			"resolved": "https://registry.npmjs.org/houdini-svelte/-/houdini-svelte-3.0.0-next.13.tgz",
+			"integrity": "sha512-jCJjGNdDGuxAld7SxpsX8JJm/Ik4c/+IymORbH9c4bS4WlWgd9Q5IfTn6EUYac1hXj9Uqmi6Coputqr/yGe18w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@kitql/helpers": "^0.8.2",
+				"ast-types": "^0.16.1",
+				"estree-walker": "^3.0.1",
+				"graphql": "^16.10.0",
+				"houdini": "^2.0.0-next.10",
+				"recast": "0.23.8",
+				"rollup": "^4.39.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/HoudiniGraphql"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.9.0",
+				"svelte": "^5.0.0",
+				"vite": "^7.0.0"
+			}
+		},
+		"node_modules/houdini-svelte/node_modules/estree-walker": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			}
+		},
+		"node_modules/houdini/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/houdini/node_modules/estree-walker": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.1.tgz",
+			"integrity": "sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/houdini/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/human-signals": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
+			"integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/iconv-lite": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
+			"integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/ignore": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/immutable": {
+			"version": "3.7.6",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+			"integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/import-fresh": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+			"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"parent-module": "^1.0.0",
+				"resolve-from": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/import-from/-/import-from-4.0.0.tgz",
+			"integrity": "sha512-P9J71vT5nLlDeV8FHs5nNxaLbrpfAV5cF5srvbZfpwpcJoM/xZR3hiv+q+SAnuSmuGbXMWud063iIMx/V/EWZQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/imurmurhash": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.8.19"
+			}
+		},
+		"node_modules/inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/invariant": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
+		"node_modules/is-absolute": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+			"integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-relative": "^1.0.0",
+				"is-windows": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-arrayish": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+			"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/is-core-module": {
+			"version": "2.16.1",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+			"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-2.0.2.tgz",
+			"integrity": "sha512-bVcMJy4X5Og6VZfdOZstSexlEy20Sr0k/p/b2IlQJlfdKAQuMpiv5w2Ccxb8sKdRUNAG1PnHVHjFSdRDVS6NlQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/is-module": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
+		"node_modules/is-reference": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+			"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/is-relative": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+			"integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-unc-path": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-stream": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+			"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-unc-path": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+			"integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"unc-path-regex": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-unicode-supported": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+			"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-upper-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-2.0.2.tgz",
+			"integrity": "sha512-44pxmxAvnnAOwBg4tHPnkfvgjPwbc5QIsSstNU+YcJ1ovxVzCWpSGosPJOZh/a1tdl81fbgnLc9LLv+x2ywbPQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/is-windows": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+			"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/isexe": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/isomorphic-ws": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
+			"integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"ws": "*"
+			}
+		},
+		"node_modules/isows": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/isows/-/isows-1.0.7.tgz",
+			"integrity": "sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wevm"
+				}
+			],
+			"license": "MIT",
+			"peerDependencies": {
+				"ws": "*"
+			}
+		},
+		"node_modules/jackspeak": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+			"integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/jiti": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
+		"node_modules/js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/js-yaml": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/jsesc": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+			"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/json-buffer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json-parse-even-better-errors": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+			"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json-stable-stringify-without-jsonify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json-to-pretty-yaml": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/json-to-pretty-yaml/-/json-to-pretty-yaml-1.2.2.tgz",
+			"integrity": "sha512-rvm6hunfCcqegwYaG5T4yKJWxc9FXFgBVrcTZ4XfSVRwa5HA/Xs+vB/Eo9treYYHCeNM0nrSUr82V/M31Urc7A==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"remedial": "^1.0.7",
+				"remove-trailing-spaces": "^1.0.6"
+			},
+			"engines": {
+				"node": ">= 0.2.0"
+			}
+		},
+		"node_modules/json5": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"json5": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsonfile": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+			"integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/keyv": {
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"json-buffer": "3.0.1"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/known-css-properties": {
+			"version": "0.37.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+			"integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/levn": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"prelude-ls": "^1.2.1",
+				"type-check": "~0.4.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/lightningcss": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+			"integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+			"dev": true,
+			"license": "MPL-2.0",
+			"dependencies": {
+				"detect-libc": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"lightningcss-android-arm64": "1.30.2",
+				"lightningcss-darwin-arm64": "1.30.2",
+				"lightningcss-darwin-x64": "1.30.2",
+				"lightningcss-freebsd-x64": "1.30.2",
+				"lightningcss-linux-arm-gnueabihf": "1.30.2",
+				"lightningcss-linux-arm64-gnu": "1.30.2",
+				"lightningcss-linux-arm64-musl": "1.30.2",
+				"lightningcss-linux-x64-gnu": "1.30.2",
+				"lightningcss-linux-x64-musl": "1.30.2",
+				"lightningcss-win32-arm64-msvc": "1.30.2",
+				"lightningcss-win32-x64-msvc": "1.30.2"
+			}
+		},
+		"node_modules/lightningcss-android-arm64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+			"integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-arm64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+			"integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-x64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+			"integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-freebsd-x64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+			"integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm-gnueabihf": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+			"integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-gnu": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+			"integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-musl": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+			"integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-gnu": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+			"integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-musl": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+			"integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-arm64-msvc": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+			"integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-x64-msvc": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+			"integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lilconfig": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lines-and-columns": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/listr2": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+			"integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cli-truncate": "^5.0.0",
+				"colorette": "^2.0.20",
+				"eventemitter3": "^5.0.1",
+				"log-update": "^6.1.0",
+				"rfdc": "^1.4.1",
+				"wrap-ansi": "^9.0.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/listr2/node_modules/ansi-styles": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+			"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/listr2/node_modules/emoji-regex": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+			"integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/listr2/node_modules/string-width": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+			"integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^10.3.0",
+				"get-east-asian-width": "^1.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/listr2/node_modules/wrap-ansi": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+			"integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.2.1",
+				"string-width": "^7.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/locate-character": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"license": "MIT"
+		},
+		"node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.sortby": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+			"integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/log-symbols": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+			"integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"chalk": "^4.1.0",
+				"is-unicode-supported": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/log-update": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+			"integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-escapes": "^7.0.0",
+				"cli-cursor": "^5.0.0",
+				"slice-ansi": "^7.1.0",
+				"strip-ansi": "^7.1.0",
+				"wrap-ansi": "^9.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/log-update/node_modules/ansi-styles": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+			"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/log-update/node_modules/emoji-regex": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+			"integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/log-update/node_modules/string-width": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+			"integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^10.3.0",
+				"get-east-asian-width": "^1.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/log-update/node_modules/wrap-ansi": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+			"integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.2.1",
+				"string-width": "^7.0.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			},
+			"bin": {
+				"loose-envify": "cli.js"
+			}
+		},
+		"node_modules/lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/lower-case-first": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-2.0.2.tgz",
+			"integrity": "sha512-EVm/rR94FJTZi3zefZ82fLWab+GX14LJN4HrWBcuo6Evmsl9hEfnqxgcHCKb9q+mNf6EVdsjx/qucYFIIB84pg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/lru-cache": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/magic-string": {
+			"version": "0.30.21",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.5"
+			}
+		},
+		"node_modules/map-cache": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+			"integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/math-intrinsics": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/memfs": {
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+			"integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+			"dev": true,
+			"license": "Unlicense",
+			"dependencies": {
+				"fs-monkey": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/meros": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/meros/-/meros-1.3.2.tgz",
+			"integrity": "sha512-Q3mobPbvEx7XbwhnC1J1r60+5H6EZyNccdzSz0eGexJRwouUtTZxPVRGdqKtxlpD84ScK4+tIGldkqDtCKdI0A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=13"
+			},
+			"peerDependencies": {
+				"@types/node": ">=13"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/micromatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mimic-fn": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+			"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mimic-function": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+			"integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mini-svg-data-uri": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+			"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"mini-svg-data-uri": "cli.js"
+			}
+		},
+		"node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/mute-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
+			"integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": "^18.17.0 || >=20.5.0"
+			}
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.11",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
+		"node_modules/natural-compare": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/no-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lower-case": "^2.0.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/node-domexception": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+			"deprecated": "Use your platform's native DOMException instead",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "github",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.5.0"
+			}
+		},
+		"node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
+		"node_modules/node-int64": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+			"integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/node-releases": {
+			"version": "2.0.27",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+			"integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/normalize-path": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+			"integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"remove-trailing-separator": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/npm-run-path": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+			"integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-key": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/npm-run-path/node_modules/path-key": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+			"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/npx-import": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/npx-import/-/npx-import-1.1.4.tgz",
+			"integrity": "sha512-3ShymTWOgqGyNlh5lMJAejLuIv3W1K3fbI5Ewc6YErZU3Sp0PqsNs8UIU1O8z5+KVl/Du5ag56Gza9vdorGEoA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"execa": "^6.1.0",
+				"parse-package-name": "^1.0.0",
+				"semver": "^7.3.7",
+				"validate-npm-package-name": "^4.0.0"
+			}
+		},
+		"node_modules/nullthrows": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+			"integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
+		"node_modules/onetime": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+			"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mimic-fn": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/optionator": {
+			"version": "0.9.4",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"deep-is": "^0.1.3",
+				"fast-levenshtein": "^2.0.6",
+				"levn": "^0.4.1",
+				"prelude-ls": "^1.2.1",
+				"type-check": "^0.4.0",
+				"word-wrap": "^1.2.5"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/p-limit": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"yocto-queue": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/package-json-from-dist": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+			"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0"
+		},
+		"node_modules/param-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/parent-module": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"callsites": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/parse-filepath": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+			"integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-absolute": "^1.0.0",
+				"map-cache": "^0.2.0",
+				"path-root": "^0.1.1"
+			},
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/parse-json": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+			"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.0.0",
+				"error-ex": "^1.3.1",
+				"json-parse-even-better-errors": "^2.3.0",
+				"lines-and-columns": "^1.1.6"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/parse-package-name": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/parse-package-name/-/parse-package-name-1.0.0.tgz",
+			"integrity": "sha512-kBeTUtcj+SkyfaW4+KBe0HtsloBJ/mKTPoxpVdA57GZiPerREsUWJOhVj9anXweFiJkm5y8FG1sxFZkZ0SN6wg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/pascal-case": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/path-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/path-root": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+			"integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-root-regex": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-root-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+			"integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-scurry": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz",
+			"integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"lru-cache": "^11.0.0",
+				"minipass": "^7.1.2"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/path-scurry/node_modules/lru-cache": {
+			"version": "11.2.2",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
+			"integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
+		"node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/picocolors": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/postcss": {
+			"version": "8.5.6",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+			"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.11",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/postcss-load-config": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lilconfig": "^2.0.5",
+				"yaml": "^1.10.2"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/postcss-load-config/node_modules/yaml": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/postcss-safe-parser": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+			"integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.31"
+			}
+		},
+		"node_modules/postcss-scss": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+			"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.29"
+			}
+		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/prelude-ls": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/prettier": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+			"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"prettier": "bin/prettier.cjs"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/prettier-plugin-svelte": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.4.0.tgz",
+			"integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"prettier": "^3.0.0",
+				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+			}
+		},
+		"node_modules/prettier-plugin-tailwindcss": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+			"integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.19"
+			},
+			"peerDependencies": {
+				"@ianvs/prettier-plugin-sort-imports": "*",
+				"@prettier/plugin-hermes": "*",
+				"@prettier/plugin-oxc": "*",
+				"@prettier/plugin-pug": "*",
+				"@shopify/prettier-plugin-liquid": "*",
+				"@trivago/prettier-plugin-sort-imports": "*",
+				"@zackad/prettier-plugin-twig": "*",
+				"prettier": "^3.0",
+				"prettier-plugin-astro": "*",
+				"prettier-plugin-css-order": "*",
+				"prettier-plugin-jsdoc": "*",
+				"prettier-plugin-marko": "*",
+				"prettier-plugin-multiline-arrays": "*",
+				"prettier-plugin-organize-attributes": "*",
+				"prettier-plugin-organize-imports": "*",
+				"prettier-plugin-sort-imports": "*",
+				"prettier-plugin-svelte": "*"
+			},
+			"peerDependenciesMeta": {
+				"@ianvs/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@prettier/plugin-hermes": {
+					"optional": true
+				},
+				"@prettier/plugin-oxc": {
+					"optional": true
+				},
+				"@prettier/plugin-pug": {
+					"optional": true
+				},
+				"@shopify/prettier-plugin-liquid": {
+					"optional": true
+				},
+				"@trivago/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@zackad/prettier-plugin-twig": {
+					"optional": true
+				},
+				"prettier-plugin-astro": {
+					"optional": true
+				},
+				"prettier-plugin-css-order": {
+					"optional": true
+				},
+				"prettier-plugin-jsdoc": {
+					"optional": true
+				},
+				"prettier-plugin-marko": {
+					"optional": true
+				},
+				"prettier-plugin-multiline-arrays": {
+					"optional": true
+				},
+				"prettier-plugin-organize-attributes": {
+					"optional": true
+				},
+				"prettier-plugin-organize-imports": {
+					"optional": true
+				},
+				"prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/promise": {
+			"version": "7.3.1",
+			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"asap": "~2.0.3"
+			}
+		},
+		"node_modules/proxy-from-env": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/punycode": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/react": {
+			"version": "19.2.1",
+			"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+			"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/recast": {
+			"version": "0.23.8",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.8.tgz",
+			"integrity": "sha512-D8izEmRtY34O+B5k2kgNmPx4b/be4MGPGFiNzWUGtezDCWDyj/1w1uQQvzySRzAO/b+6TD05FwGPuYR4X52sVw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ast-types": "^0.16.1",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tiny-invariant": "^1.3.3",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/relay-runtime": {
+			"version": "12.0.0",
+			"resolved": "https://registry.npmjs.org/relay-runtime/-/relay-runtime-12.0.0.tgz",
+			"integrity": "sha512-QU6JKr1tMsry22DXNy9Whsq5rmvwr3LSZiiWV/9+DFpuTWvp+WFhobWMc8TC4OjKFfNhEZy7mOiqUAn5atQtug==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.0.0",
+				"fbjs": "^3.0.0",
+				"invariant": "^2.2.4"
+			}
+		},
+		"node_modules/remedial": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/remedial/-/remedial-1.0.8.tgz",
+			"integrity": "sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==",
+			"dev": true,
+			"license": "(MIT OR Apache-2.0)",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/remove-trailing-separator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+			"integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/remove-trailing-spaces": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/remove-trailing-spaces/-/remove-trailing-spaces-1.0.9.tgz",
+			"integrity": "sha512-xzG7w5IRijvIkHIjDk65URsJJ7k4J95wmcArY5PRcmjldIOl7oTvG8+X2Ag690R7SfwiOcHrWZKVc1Pp5WIOzA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/resolve": {
+			"version": "1.22.11",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+			"integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-core-module": "^2.16.1",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/resolve-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/restore-cursor": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+			"integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"onetime": "^7.0.0",
+				"signal-exit": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/restore-cursor/node_modules/onetime": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+			"integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mimic-function": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/reusify": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+			"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"iojs": ">=1.0.0",
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/rfdc": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+			"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/rollup": {
+			"version": "4.53.3",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
+			"integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "1.0.8"
+			},
+			"bin": {
+				"rollup": "dist/bin/rollup"
+			},
+			"engines": {
+				"node": ">=18.0.0",
+				"npm": ">=8.0.0"
+			},
+			"optionalDependencies": {
+				"@rollup/rollup-android-arm-eabi": "4.53.3",
+				"@rollup/rollup-android-arm64": "4.53.3",
+				"@rollup/rollup-darwin-arm64": "4.53.3",
+				"@rollup/rollup-darwin-x64": "4.53.3",
+				"@rollup/rollup-freebsd-arm64": "4.53.3",
+				"@rollup/rollup-freebsd-x64": "4.53.3",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
+				"@rollup/rollup-linux-arm-musleabihf": "4.53.3",
+				"@rollup/rollup-linux-arm64-gnu": "4.53.3",
+				"@rollup/rollup-linux-arm64-musl": "4.53.3",
+				"@rollup/rollup-linux-loong64-gnu": "4.53.3",
+				"@rollup/rollup-linux-ppc64-gnu": "4.53.3",
+				"@rollup/rollup-linux-riscv64-gnu": "4.53.3",
+				"@rollup/rollup-linux-riscv64-musl": "4.53.3",
+				"@rollup/rollup-linux-s390x-gnu": "4.53.3",
+				"@rollup/rollup-linux-x64-gnu": "4.53.3",
+				"@rollup/rollup-linux-x64-musl": "4.53.3",
+				"@rollup/rollup-openharmony-arm64": "4.53.3",
+				"@rollup/rollup-win32-arm64-msvc": "4.53.3",
+				"@rollup/rollup-win32-ia32-msvc": "4.53.3",
+				"@rollup/rollup-win32-x64-gnu": "4.53.3",
+				"@rollup/rollup-win32-x64-msvc": "4.53.3",
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
+		"node_modules/sade": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mri": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/semver": {
+			"version": "7.7.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+			"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/sentence-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/set-cookie-parser": {
+			"version": "2.7.2",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+			"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/setimmediate": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shell-quote": {
+			"version": "1.8.3",
+			"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+			"integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/signedsource": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/signedsource/-/signedsource-1.0.0.tgz",
+			"integrity": "sha512-6+eerH9fEnNmi/hyM1DXcRK3pWdoMQtlkQ+ns0ntzunjKqp5i3sKCc80ym8Fib3iaYhdJUOPdhlJWj1tvge2Ww==",
+			"dev": true,
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/sirv": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+			"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/sisteransi": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/slice-ansi": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+			"integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.2.1",
+				"is-fullwidth-code-point": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/slice-ansi?sponsor=1"
+			}
+		},
+		"node_modules/slice-ansi/node_modules/ansi-styles": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+			"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+			"integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"get-east-asian-width": "^1.3.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/snake-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/sponge-case": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/sponge-case/-/sponge-case-1.0.1.tgz",
+			"integrity": "sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/streamsearch": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+			"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/string-env-interpolation": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz",
+			"integrity": "sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/string-width": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eastasianwidth": "^0.2.0",
+				"emoji-regex": "^9.2.2",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/string-width-cjs": {
+			"name": "string-width",
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/string-width-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/string-width-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/string-width-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+			"integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/strip-ansi-cjs": {
+			"name": "strip-ansi",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-final-newline": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+			"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/svelte": {
+			"version": "5.45.2",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.45.2.tgz",
+			"integrity": "sha512-yyXdW2u3H0H/zxxWoGwJoQlRgaSJLp+Vhktv12iRw2WRDlKqUPT54Fi0K/PkXqrdkcQ98aBazpy0AH4BCBVfoA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/estree": "^1.0.5",
+				"acorn": "^8.12.1",
+				"aria-query": "^5.3.1",
+				"axobject-query": "^4.1.0",
+				"clsx": "^2.1.1",
+				"devalue": "^5.5.0",
+				"esm-env": "^1.2.1",
+				"esrap": "^2.2.0",
+				"is-reference": "^3.0.3",
+				"locate-character": "^3.0.0",
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/svelte-check": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.4.tgz",
+			"integrity": "sha512-DVWvxhBrDsd+0hHWKfjP99lsSXASeOhHJYyuKOFYJcP7ThfSCKgjVarE8XfuMWpS5JV3AlDf+iK1YGGo2TACdw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.25",
+				"chokidar": "^4.0.1",
+				"fdir": "^6.2.0",
+				"picocolors": "^1.0.0",
+				"sade": "^1.7.4"
+			},
+			"bin": {
+				"svelte-check": "bin/svelte-check"
+			},
+			"engines": {
+				"node": ">= 18.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": ">=5.0.0"
+			}
+		},
+		"node_modules/svelte-eslint-parser": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.4.0.tgz",
+			"integrity": "sha512-fjPzOfipR5S7gQ/JvI9r2H8y9gMGXO3JtmrylHLLyahEMquXI0lrebcjT+9/hNgDej0H7abTyox5HpHmW1PSWA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eslint-scope": "^8.2.0",
+				"eslint-visitor-keys": "^4.0.0",
+				"espree": "^10.0.0",
+				"postcss": "^8.4.49",
+				"postcss-scss": "^4.0.9",
+				"postcss-selector-parser": "^7.0.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0",
+				"pnpm": "10.18.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
+			"peerDependencies": {
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/postcss-selector-parser": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+			"integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/svelte/node_modules/is-reference": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.6"
+			}
+		},
+		"node_modules/swap-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/swap-case/-/swap-case-2.0.2.tgz",
+			"integrity": "sha512-kc6S2YS/2yXbtkSMunBtKdah4VFETZ8Oh6ONSmSd9bRxhqTrtARUCBUiWXH3xVPpvR7tz2CSnkuXVE42EcGnMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/sync-fetch": {
+			"version": "0.6.0-2",
+			"resolved": "https://registry.npmjs.org/sync-fetch/-/sync-fetch-0.6.0-2.tgz",
+			"integrity": "sha512-c7AfkZ9udatCuAy9RSfiGPpeOKKUAUK5e1cXadLOGUjasdxqYqAK0jTNkM/FSEyJ3a5Ra27j/tw/PS0qLmaF/A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"node-fetch": "^3.3.2",
+				"timeout-signal": "^2.0.0",
+				"whatwg-mimetype": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/tailwindcss": {
+			"version": "4.1.17",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+			"integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+			"integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/timeout-signal": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/timeout-signal/-/timeout-signal-2.0.0.tgz",
+			"integrity": "sha512-YBGpG4bWsHoPvofT6y/5iqulfXIiIErl5B0LdtHT1mGXDFTAhhRrbUpTvBgYbovr+3cKblya2WAOcpoy90XguA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/tiny-invariant": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+			"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.15",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/title-case": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/title-case/-/title-case-3.0.3.tgz",
+			"integrity": "sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/tr46": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ts-api-utils": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+			"integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.12"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4"
+			}
+		},
+		"node_modules/ts-log": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/ts-log/-/ts-log-2.2.7.tgz",
+			"integrity": "sha512-320x5Ggei84AxzlXp91QkIGSw5wgaLT6GeAH0KsqDmRZdVWW2OiSeVvElVoatk3f7nicwXlElXsoFkARiGE2yg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/type-check": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"prelude-ls": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/typescript": {
+			"version": "5.9.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/typescript-eslint": {
+			"version": "8.48.0",
+			"resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.48.0.tgz",
+			"integrity": "sha512-fcKOvQD9GUn3Xw63EgiDqhvWJ5jsyZUaekl3KVpGsDJnN46WJTe3jWxtQP9lMZm1LJNkFLlTaWAxK2vUQR+cqw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/eslint-plugin": "8.48.0",
+				"@typescript-eslint/parser": "8.48.0",
+				"@typescript-eslint/typescript-estree": "8.48.0",
+				"@typescript-eslint/utils": "8.48.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/ua-parser-js": {
+			"version": "1.0.41",
+			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+			"integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/ua-parser-js"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/faisalman"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/faisalman"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"ua-parser-js": "script/cli.js"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/unc-path-regex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+			"integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/undici-types": {
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/unixify": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unixify/-/unixify-1.0.0.tgz",
+			"integrity": "sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"normalize-path": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/update-browserslist-db": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+			"integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"escalade": "^3.2.0",
+				"picocolors": "^1.1.1"
+			},
+			"bin": {
+				"update-browserslist-db": "cli.js"
+			},
+			"peerDependencies": {
+				"browserslist": ">= 4.21.0"
+			}
+		},
+		"node_modules/upper-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/upper-case-first": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/uri-js": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"punycode": "^2.1.0"
+			}
+		},
+		"node_modules/urlpattern-polyfill": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
+			"integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/urql": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/urql/-/urql-5.0.1.tgz",
+			"integrity": "sha512-r58gYlWvCTC19QvkTaARaCLV9/bp870byH/qbLaw3S7f8i/bC6x2Szub8RVXptiMxWmqq5dyVBjUL9G+xPEuqg==",
+			"license": "MIT",
+			"dependencies": {
+				"@urql/core": "^6.0.1",
+				"wonka": "^6.3.2"
+			},
+			"peerDependencies": {
+				"@urql/core": "^6.0.0",
+				"react": ">= 16.8.0"
+			}
+		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/uuid": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+			"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist/esm/bin/uuid"
+			}
+		},
+		"node_modules/validate-npm-package-name": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
+			"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"builtins": "^5.0.0"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/value-or-promise": {
+			"version": "1.0.12",
+			"resolved": "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.12.tgz",
+			"integrity": "sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/vite": {
+			"version": "7.2.4",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.4.tgz",
+			"integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "^0.25.0",
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3",
+				"postcss": "^8.5.6",
+				"rollup": "^4.43.0",
+				"tinyglobby": "^0.2.15"
+			},
+			"bin": {
+				"vite": "bin/vite.js"
+			},
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			},
+			"funding": {
+				"url": "https://github.com/vitejs/vite?sponsor=1"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			},
+			"peerDependencies": {
+				"@types/node": "^20.19.0 || >=22.12.0",
+				"jiti": ">=1.21.0",
+				"less": "^4.0.0",
+				"lightningcss": "^1.21.0",
+				"sass": "^1.70.0",
+				"sass-embedded": "^1.70.0",
+				"stylus": ">=0.54.8",
+				"sugarss": "^5.0.0",
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				},
+				"jiti": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"terser": {
+					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vite-plugin-devtools-json": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-devtools-json/-/vite-plugin-devtools-json-1.0.0.tgz",
+			"integrity": "sha512-MobvwqX76Vqt/O4AbnNMNWoXWGrKUqZbphCUle/J2KXH82yKQiunOeKnz/nqEPosPsoWWPP9FtNuPBSYpiiwkw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"uuid": "^11.1.0"
+			},
+			"peerDependencies": {
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/vite-plugin-mkcert": {
+			"version": "1.17.9",
+			"resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.9.tgz",
+			"integrity": "sha512-SwI7yqp2Cq4r2XItarnHRCj2uzHPqevbxFNMLpyN+LDXd5w1vmZeM4l5X/wCZoP4mjPQYN+9+4kmE6e3nPO5fg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"axios": "^1.12.2",
+				"debug": "^4.4.3",
+				"picocolors": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=v16.7.0"
+			},
+			"peerDependencies": {
+				"vite": ">=3"
+			}
+		},
+		"node_modules/vitefu": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
+			"integrity": "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==",
+			"dev": true,
+			"license": "MIT",
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*",
+				"tests/projects/workspace/packages/*"
+			],
+			"peerDependencies": {
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+			},
+			"peerDependenciesMeta": {
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/web-streams-polyfill": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+			"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/webidl-conversions": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+			"dev": true,
+			"license": "BSD-2-Clause"
+		},
+		"node_modules/whatwg-mimetype": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/whatwg-url": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tr46": "~0.0.3",
+				"webidl-conversions": "^3.0.0"
+			}
+		},
+		"node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/wonka": {
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.5.tgz",
+			"integrity": "sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==",
+			"license": "MIT"
+		},
+		"node_modules/word-wrap": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/wrap-ansi": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.1.0",
+				"string-width": "^5.0.1",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi-cjs": {
+			"name": "wrap-ansi",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/ansi-styles": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+			"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/ws": {
+			"version": "8.18.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+			"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/yallist": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/yaml": {
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+			"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/eemeli"
+			}
+		},
+		"node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/yargs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/yargs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yocto-queue": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/yoctocolors-cjs": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz",
+			"integrity": "sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
+			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
+			"license": "MIT"
+		}
+	}
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3b692ef
--- /dev/null
+++ b/package.json
@@ -0,0 +1,57 @@
+{
+	"name": "nexus-5-frontend-3",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"generate:wave": "graphql-codegen --config codegen.wave.ts"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@graphql-codegen/cli": "^6.1.0",
+		"@graphql-codegen/schema-ast": "^5.0.0",
+		"@graphql-codegen/typescript": "^5.0.6",
+		"@graphql-codegen/typescript-operations": "^5.0.6",
+		"@graphql-codegen/typescript-urql": "^4.0.1",
+		"@sveltejs/adapter-node": "^5.4.0",
+		"@sveltejs/kit": "^2.48.5",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/forms": "^0.5.10",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.17",
+		"@types/node": "^24",
+		"date-fns": "^4.1.0",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.0",
+		"globals": "^16.5.0",
+		"houdini": "^2.0.0-next.11",
+		"houdini-svelte": "^3.0.0-next.13",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.1",
+		"svelte": "^5.43.8",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.47.0",
+		"vite": "^7.2.2",
+		"vite-plugin-devtools-json": "^1.0.0",
+		"vite-plugin-mkcert": "^1.17.9"
+	},
+	"dependencies": {
+		"@urql/svelte": "^5.0.0",
+		"graphql": "^16.12.0",
+		"heic2any": "^0.0.4",
+		"urql": "^5.0.1"
+	}
+}
diff --git a/schema.graphql b/schema.graphql
new file mode 100644
index 0000000..ddfe9d3
--- /dev/null
+++ b/schema.graphql
@@ -0,0 +1,4411 @@
+input AccountAddressInput {
+  accountId: ID!
+  city: String!
+  isActive: Boolean! = true
+  isPrimary: Boolean! = false
+  name: String!
+  notes: String! = ""
+  state: String!
+  streetAddress: String!
+  zipCode: String!
+}
+
+"""Physical address information for an account"""
+type AccountAddressType implements Node {
+  accountId: UUID!
+  city: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  isPrimary: Boolean!
+  labors: [LaborType!]!
+  name: String!
+  notes: String!
+  schedules: [ScheduleType!]!
+  scopes: [ScopeType!]!
+  services: [ServiceType!]!
+  state: String!
+  streetAddress: String!
+  zipCode: String!
+}
+
+input AccountAddressUpdateInput {
+  city: String = null
+  id: ID!
+  isActive: Boolean = null
+  isPrimary: Boolean = null
+  name: String = null
+  notes: String = null
+  state: String = null
+  streetAddress: String = null
+  zipCode: String = null
+}
+
+"""Contact information for an account"""
+input AccountContactFilter {
+  AND: AccountContactFilter
+  DISTINCT: Boolean
+  NOT: AccountContactFilter
+  OR: AccountContactFilter
+  accountId: UUID
+  id: UUID
+  isActive: Boolean
+  isPrimary: Boolean
+}
+
+input AccountContactInput {
+  accountId: ID!
+  email: String = null
+  firstName: String!
+  isActive: Boolean! = true
+  isPrimary: Boolean! = false
+  lastName: String!
+  notes: String! = ""
+  phone: String = null
+}
+
+"""Contact information for an account"""
+type AccountContactType implements Node {
+  accountId: UUID!
+  email: String!
+  firstName: String!
+  fullName: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  isPrimary: Boolean!
+  lastName: String!
+  notes: String!
+  phone: String
+}
+
+input AccountContactUpdateInput {
+  email: String = null
+  firstName: String = null
+  id: ID!
+  isActive: Boolean = null
+  isPrimary: Boolean = null
+  lastName: String = null
+  notes: String = null
+  phone: String = null
+}
+
+"""Account model belonging to a customer"""
+input AccountFilter {
+  AND: AccountFilter
+  DISTINCT: Boolean
+  NOT: AccountFilter
+  OR: AccountFilter
+  customerId: UUID
+  id: UUID
+  isActive: Boolean
+  name: String
+  search: String
+}
+
+input AccountInput {
+  customerId: ID!
+  endDate: Date = null
+  name: String!
+  startDate: Date!
+  status: String!
+}
+
+"""Punchlist records for accounts"""
+input AccountPunchlistFilter {
+  AND: AccountPunchlistFilter
+  DISTINCT: Boolean
+  NOT: AccountPunchlistFilter
+  OR: AccountPunchlistFilter
+  accountId: UUID
+  id: UUID
+}
+
+input AccountPunchlistInput {
+  accountId: ID!
+  date: Date!
+}
+
+"""Punchlist records for accounts"""
+type AccountPunchlistType implements Node {
+  accountId: UUID!
+  date: Date!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+}
+
+input AccountPunchlistUpdateInput {
+  accountId: ID = null
+  date: Date = null
+  id: ID!
+}
+
+"""Account model belonging to a customer"""
+type AccountType implements Node {
+  addresses: [AccountAddressType!]!
+  contacts: [AccountContactType!]!
+  customerId: UUID!
+  endDate: Date
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Check if the account is currently active based on dates and status"""
+  isActive: Boolean!
+  name: String!
+
+  """Get the primary address for this account"""
+  primaryAddress: AccountAddressType
+  revenues: [RevenueType!]!
+  startDate: Date!
+
+  """Current status of the account"""
+  status: StatusChoices!
+}
+
+input AccountUpdateInput {
+  customerId: ID = null
+  endDate: Date = null
+  id: ID!
+  name: String = null
+  startDate: Date = null
+  status: String = null
+}
+
+input AddParticipantInput {
+  conversationId: ID!
+  participantId: ID!
+}
+
+"""Address choices for a customer"""
+enum AddressChoices {
+  BILLING
+  OFFICE
+  OTHER
+  SHIPPING
+}
+
+type AdminDashboardData {
+  invoices: [InvoiceType!]!
+  projectScopeTemplates: [ProjectScopeTemplateType!]!
+  projects: [ProjectType!]!
+  reports: [ReportType!]!
+  serviceScopeTemplates: [ScopeTemplateType!]!
+  services: [ServiceType!]!
+}
+
+input ArchiveConversationInput {
+  conversationId: ID!
+  isArchived: Boolean!
+}
+
+"""Area within a scope (e.g., Kitchen, Restrooms, Lobby)"""
+input AreaFilter {
+  AND: AreaFilter
+  DISTINCT: Boolean
+  NOT: AreaFilter
+  OR: AreaFilter
+  id: UUID
+  scopeId: UUID
+}
+
+input AreaInput {
+  name: String!
+  order: Int! = 0
+  scopeId: ID!
+}
+
+"""Reusable area definition belonging to a ScopeTemplate"""
+input AreaTemplateFilter {
+  AND: AreaTemplateFilter
+  DISTINCT: Boolean
+  NOT: AreaTemplateFilter
+  OR: AreaTemplateFilter
+  id: UUID
+  scopeTemplateId: UUID
+
+  """Case-insensitive search on name"""
+  search: String = null
+}
+
+input AreaTemplateInput {
+  name: String!
+  order: Int = 0
+  scopeTemplateId: ID!
+}
+
+"""Reusable area definition belonging to a ScopeTemplate"""
+type AreaTemplateType implements Node {
+  """The Globally Unique ID of this object"""
+  id: ID!
+  name: String!
+  order: Int!
+  scopeTemplateId: UUID!
+  taskTemplates: [TaskTemplateType!]!
+}
+
+input AreaTemplateUpdateInput {
+  id: ID!
+  name: String = null
+  order: Int = null
+}
+
+"""Area within a scope (e.g., Kitchen, Restrooms, Lobby)"""
+type AreaType implements Node {
+  """The Globally Unique ID of this object"""
+  id: ID!
+  name: String!
+  order: Int!
+  scopeId: UUID!
+  tasks: [TaskType!]!
+}
+
+input AreaUpdateInput {
+  id: ID!
+  name: String = null
+  order: Int = null
+  scopeId: ID = null
+}
+
+input BoolBaseFilterLookup {
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: Boolean
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [Boolean!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+}
+
+input CloseServiceSessionInput {
+  serviceId: ID!
+  taskIds: [ID!]!
+}
+
+"""
+Conversation thread that groups messages together.
+Can be linked to specific entities (Project, Service, Account, etc.) for context.
+"""
+input ConversationFilter {
+  AND: ConversationFilter
+  DISTINCT: Boolean
+  NOT: ConversationFilter
+  OR: ConversationFilter
+
+  """Type of conversation (DIRECT, GROUP, SUPPORT)"""
+  conversationType: ConversationTypeChoicesFilterLookup
+  createdAt: DatetimeDatetimeFilterLookup
+  id: UUIDFilterLookup
+
+  """Whether this conversation is archived (system-wide)"""
+  isArchived: BoolBaseFilterLookup
+
+  """Timestamp of most recent message"""
+  lastMessageAt: DatetimeDatetimeFilterLookup
+}
+
+input ConversationInput {
+  conversationType: String!
+  entityId: ID = null
+  entityType: String = null
+  metadata: String = null
+  participantIds: [ID!]!
+  subject: String!
+}
+
+"""
+Links users (TeamProfile or CustomerProfile) to conversations.
+Tracks per-user read status and preferences.
+"""
+type ConversationParticipantType implements Node {
+  """Conversation this participant belongs to"""
+  conversationId: UUID!
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Whether participant has archived this conversation (user-specific)"""
+  isArchived: Boolean!
+
+  """Whether participant has muted notifications for this conversation"""
+  isMuted: Boolean!
+
+  """When participant joined the conversation"""
+  joinedAt: DateTime!
+
+  """Timestamp when participant last read messages in this conversation"""
+  lastReadAt: DateTime
+  participant: ParticipantType!
+
+  """Number of unread messages for this participant"""
+  unreadCount: Int!
+  updatedAt: DateTime!
+}
+
+"""
+Conversation thread that groups messages together.
+Can be linked to specific entities (Project, Service, Account, etc.) for context.
+"""
+type ConversationType implements Node {
+  canDelete: Boolean!
+
+  """Type of conversation (DIRECT, GROUP, SUPPORT)"""
+  conversationType: ConversationTypeChoices!
+  createdAt: DateTime!
+  createdBy: ParticipantType
+  entity: EntityType
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Whether this conversation is archived (system-wide)"""
+  isArchived: Boolean!
+
+  """Timestamp of most recent message"""
+  lastMessageAt: DateTime
+  messageCount: Int!
+  messages(limit: Int = 50, offset: Int = 0): [MessageType!]!
+
+  """Additional conversation metadata"""
+  metadata: JSON!
+  participants: [ConversationParticipantType!]!
+
+  """Conversation subject/title"""
+  subject: String!
+  unreadCount: Int!
+  updatedAt: DateTime!
+}
+
+"""Type of conversation"""
+enum ConversationTypeChoices {
+  DIRECT
+  GROUP
+  SUPPORT
+}
+
+input ConversationTypeChoicesFilterLookup {
+  """
+  Case-sensitive containment test. Filter will be skipped on `null` value
+  """
+  contains: ConversationTypeChoices
+
+  """Case-sensitive ends-with. Filter will be skipped on `null` value"""
+  endsWith: ConversationTypeChoices
+
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: ConversationTypeChoices
+
+  """
+  Case-insensitive containment test. Filter will be skipped on `null` value
+  """
+  iContains: ConversationTypeChoices
+
+  """Case-insensitive ends-with. Filter will be skipped on `null` value"""
+  iEndsWith: ConversationTypeChoices
+
+  """Case-insensitive exact match. Filter will be skipped on `null` value"""
+  iExact: ConversationTypeChoices
+
+  """
+  Case-insensitive regular expression match. Filter will be skipped on `null` value
+  """
+  iRegex: ConversationTypeChoices
+
+  """Case-insensitive starts-with. Filter will be skipped on `null` value"""
+  iStartsWith: ConversationTypeChoices
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [ConversationTypeChoices!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+
+  """
+  Case-sensitive regular expression match. Filter will be skipped on `null` value
+  """
+  regex: ConversationTypeChoices
+
+  """Case-sensitive starts-with. Filter will be skipped on `null` value"""
+  startsWith: ConversationTypeChoices
+}
+
+"""A connection to a list of items."""
+type ConversationTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ConversationTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ConversationTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ConversationType!
+}
+
+input ConversationUpdateInput {
+  id: ID!
+  isArchived: Boolean = null
+  metadata: String = null
+  subject: String = null
+}
+
+input CreateProjectScopeFromTemplateInput {
+  accountAddressId: ID = null
+  accountId: ID = null
+  description: String = null
+  isActive: Boolean = true
+  name: String = null
+  projectId: ID!
+  templateId: ID!
+}
+
+input CreateScopeFromTemplateInput {
+  accountAddressId: ID = null
+  accountId: ID!
+  description: String = null
+  isActive: Boolean = true
+  name: String = null
+  templateId: ID!
+}
+
+input CustomerAddressInput {
+  addressType: String!
+  city: String!
+  customerId: ID!
+  isActive: Boolean! = true
+  isPrimary: Boolean! = false
+  state: String!
+  streetAddress: String!
+  zipCode: String!
+}
+
+"""Address information for a customer"""
+type CustomerAddressType implements Node {
+  """Type of address"""
+  addressType: AddressChoices!
+  city: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  isPrimary: Boolean!
+  state: String!
+  streetAddress: String!
+  zipCode: String!
+}
+
+input CustomerAddressUpdateInput {
+  addressType: String = null
+  city: String = null
+  id: ID!
+  isActive: Boolean = null
+  isPrimary: Boolean = null
+  state: String = null
+  streetAddress: String = null
+  zipCode: String = null
+}
+
+"""Contact information for a customer"""
+input CustomerContactFilter {
+  AND: CustomerContactFilter
+  DISTINCT: Boolean
+  NOT: CustomerContactFilter
+  OR: CustomerContactFilter
+  customerId: UUID
+  id: UUID
+  isActive: Boolean
+  isPrimary: Boolean
+}
+
+input CustomerContactInput {
+  customerId: ID!
+  email: String!
+  firstName: String!
+  isActive: Boolean! = true
+  isPrimary: Boolean! = false
+  lastName: String!
+  notes: String! = ""
+  phone: String!
+}
+
+"""Contact information for a customer"""
+type CustomerContactType implements Node {
+  email: String!
+  firstName: String!
+  fullName: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  isPrimary: Boolean!
+  lastName: String!
+  notes: String!
+  phone: String
+}
+
+input CustomerContactUpdateInput {
+  email: String = null
+  firstName: String = null
+  id: ID!
+  isActive: Boolean = null
+  isPrimary: Boolean = null
+  lastName: String = null
+  notes: String = null
+  phone: String = null
+}
+
+type CustomerDashboardData {
+  invoices: [InvoiceType!]!
+  projects: [ProjectType!]!
+  services: [ServiceType!]!
+}
+
+"""Customer model with contact information"""
+input CustomerFilter {
+  AND: CustomerFilter
+  DISTINCT: Boolean
+  NOT: CustomerFilter
+  OR: CustomerFilter
+  id: UUID
+
+  """Check if the customer is currently active based on dates and status"""
+  isActive: Boolean = null
+  search: String = null
+}
+
+input CustomerInput {
+  billingEmail: String!
+  billingTerms: String!
+  endDate: Date = null
+  name: String!
+  startDate: Date!
+  status: String!
+  waveCustomerId: String = null
+}
+
+"""External/public-facing customer accounts"""
+input CustomerProfileFilter {
+  AND: CustomerProfileFilter
+  DISTINCT: Boolean
+  NOT: CustomerProfileFilter
+  OR: CustomerProfileFilter
+
+  """Customers this profile has access to"""
+  customers: DjangoModelFilterInput
+  id: UUID
+}
+
+input CustomerProfileInput {
+  customerIds: [ID!] = null
+  email: String = null
+  firstName: String!
+  lastName: String!
+  notes: String = ""
+  phone: String = null
+  status: String! = "PENDING"
+  userId: ID = null
+}
+
+"""External/public-facing customer accounts"""
+type CustomerProfileType implements Node {
+  """Customers this profile has access to"""
+  customers: [CustomerType!]!
+  email: String
+  firstName: String!
+  fullName: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  lastName: String!
+  notes: String!
+
+  """Unique identifier from Ory Kratos authentication system"""
+  oryKratosId: String
+  phone: String
+
+  """Current status of the profile"""
+  status: StatusChoices!
+}
+
+union CustomerProfileTypeTeamProfileType = CustomerProfileType | TeamProfileType
+
+input CustomerProfileUpdateInput {
+  customerIds: [ID!] = null
+  email: String = null
+  firstName: String = null
+  id: ID!
+  lastName: String = null
+  notes: String = null
+  phone: String = null
+  status: String = null
+  userId: ID = null
+}
+
+"""Customer model with contact information"""
+type CustomerType implements Node {
+  accounts: [AccountType!]!
+  addresses: [CustomerAddressType!]!
+  billingEmail: String!
+  billingTerms: String!
+  contacts: [CustomerContactType!]!
+  endDate: Date
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Check if the customer is currently active based on dates and status"""
+  isActive: Boolean!
+  name: String!
+  startDate: Date!
+
+  """Current status of the customer"""
+  status: StatusChoices!
+
+  """Wave customer ID"""
+  waveCustomerId: String
+}
+
+input CustomerUpdateInput {
+  billingEmail: String = null
+  billingTerms: String = null
+  endDate: Date = null
+  id: ID!
+  name: String = null
+  startDate: Date = null
+  status: String = null
+  waveCustomerId: String = null
+}
+
+"""Date (isoformat)"""
+scalar Date
+
+input DateDateFilterLookup {
+  day: IntComparisonFilterLookup
+
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: Date
+
+  """Greater than. Filter will be skipped on `null` value"""
+  gt: Date
+
+  """Greater than or equal to. Filter will be skipped on `null` value"""
+  gte: Date
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [Date!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+  isoWeekDay: IntComparisonFilterLookup
+  isoYear: IntComparisonFilterLookup
+
+  """Less than. Filter will be skipped on `null` value"""
+  lt: Date
+
+  """Less than or equal to. Filter will be skipped on `null` value"""
+  lte: Date
+  month: IntComparisonFilterLookup
+  quarter: IntComparisonFilterLookup
+
+  """Inclusive range test (between)"""
+  range: DateRangeLookup
+  week: IntComparisonFilterLookup
+  weekDay: IntComparisonFilterLookup
+  year: IntComparisonFilterLookup
+}
+
+enum DateOrdering {
+  ASC
+  DESC
+}
+
+input DateRangeLookup {
+  end: Date = null
+  start: Date = null
+}
+
+"""Date with time (isoformat)"""
+scalar DateTime
+
+input DatetimeDatetimeFilterLookup {
+  date: IntComparisonFilterLookup
+  day: IntComparisonFilterLookup
+
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: DateTime
+
+  """Greater than. Filter will be skipped on `null` value"""
+  gt: DateTime
+
+  """Greater than or equal to. Filter will be skipped on `null` value"""
+  gte: DateTime
+  hour: IntComparisonFilterLookup
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [DateTime!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+  isoWeekDay: IntComparisonFilterLookup
+  isoYear: IntComparisonFilterLookup
+
+  """Less than. Filter will be skipped on `null` value"""
+  lt: DateTime
+
+  """Less than or equal to. Filter will be skipped on `null` value"""
+  lte: DateTime
+  minute: IntComparisonFilterLookup
+  month: IntComparisonFilterLookup
+  quarter: IntComparisonFilterLookup
+
+  """Inclusive range test (between)"""
+  range: DatetimeRangeLookup
+  second: IntComparisonFilterLookup
+  time: IntComparisonFilterLookup
+  week: IntComparisonFilterLookup
+  weekDay: IntComparisonFilterLookup
+  year: IntComparisonFilterLookup
+}
+
+input DatetimeRangeLookup {
+  end: DateTime = null
+  start: DateTime = null
+}
+
+"""Decimal (fixed-point)"""
+scalar Decimal
+
+enum DeliveryStatusChoices {
+  BOUNCED
+  DELIVERED
+  FAILED
+  PENDING
+  QUEUED
+  SENDING
+  SENT
+}
+
+type DjangoFileType {
+  name: String!
+  path: String!
+  size: Int!
+  url: String!
+}
+
+type DjangoImageType {
+  height: Int!
+  name: String!
+  path: String!
+  size: Int!
+  url: String!
+  width: Int!
+}
+
+input DjangoModelFilterInput {
+  pk: ID!
+}
+
+type DjangoModelType {
+  pk: ID!
+}
+
+type EntityType {
+  account: AccountType
+  customer: CustomerType
+  entityId: ID!
+  entityType: String!
+  project: ProjectType
+  service: ServiceType
+}
+
+"""
+Event model to track system events that may trigger notifications.
+Provides audit trail and basis for notification system.
+"""
+type EventType {
+  createdAt: DateTime!
+
+  """UUID of the entity that triggered this event"""
+  entityId: ID!
+
+  """Type of entity (e.g., 'Project', 'Report', 'Invoice')"""
+  entityType: String!
+
+  """Type of event that occurred"""
+  eventType: EventTypeChoices!
+  id: ID!
+
+  """
+  Additional event metadata (e.g., old_status, new_status, changed_fields)
+  """
+  metadata: JSON!
+  triggeredById: ID
+  triggeredByType: String
+  updatedAt: DateTime!
+}
+
+enum EventTypeChoices {
+  ACCOUNT_ADDRESS_CREATED
+  ACCOUNT_ADDRESS_DELETED
+  ACCOUNT_ADDRESS_UPDATED
+  ACCOUNT_CONTACT_CREATED
+  ACCOUNT_CONTACT_DELETED
+  ACCOUNT_CONTACT_UPDATED
+  ACCOUNT_CREATED
+  ACCOUNT_DELETED
+  ACCOUNT_PUNCHLIST_CREATED
+  ACCOUNT_PUNCHLIST_DELETED
+  ACCOUNT_PUNCHLIST_UPDATED
+  ACCOUNT_STATUS_CHANGED
+  ACCOUNT_UPDATED
+  AREA_CREATED
+  AREA_DELETED
+  AREA_TEMPLATE_CREATED
+  AREA_TEMPLATE_DELETED
+  AREA_TEMPLATE_UPDATED
+  AREA_UPDATED
+  CONVERSATION_ARCHIVED
+  CONVERSATION_CREATED
+  CONVERSATION_PARTICIPANT_ADDED
+  CONVERSATION_PARTICIPANT_REMOVED
+  CUSTOMER_ADDRESS_CREATED
+  CUSTOMER_ADDRESS_DELETED
+  CUSTOMER_ADDRESS_UPDATED
+  CUSTOMER_CONTACT_CREATED
+  CUSTOMER_CONTACT_DELETED
+  CUSTOMER_CONTACT_UPDATED
+  CUSTOMER_CREATED
+  CUSTOMER_DELETED
+  CUSTOMER_PROFILE_ACCESS_GRANTED
+  CUSTOMER_PROFILE_ACCESS_REVOKED
+  CUSTOMER_PROFILE_CREATED
+  CUSTOMER_PROFILE_DELETED
+  CUSTOMER_PROFILE_UPDATED
+  CUSTOMER_STATUS_CHANGED
+  CUSTOMER_UPDATED
+  INVOICE_CANCELLED
+  INVOICE_GENERATED
+  INVOICE_OVERDUE
+  INVOICE_PAID
+  INVOICE_SENT
+  LABOR_RATE_CREATED
+  LABOR_RATE_DELETED
+  LABOR_RATE_UPDATED
+  MESSAGE_DELETED
+  MESSAGE_READ
+  MESSAGE_RECEIVED
+  MESSAGE_SENT
+  MONITORING_COMMAND_EXECUTED
+  MONITORING_INCOMPLETE_WORK_REMINDER
+  MONITORING_NIGHTLY_ASSIGNMENTS
+  PROJECT_CANCELLED
+  PROJECT_COMPLETED
+  PROJECT_CREATED
+  PROJECT_DELETED
+  PROJECT_DISPATCHED
+  PROJECT_PUNCHLIST_CREATED
+  PROJECT_PUNCHLIST_DELETED
+  PROJECT_PUNCHLIST_UPDATED
+  PROJECT_SCOPE_CATEGORY_CREATED
+  PROJECT_SCOPE_CATEGORY_DELETED
+  PROJECT_SCOPE_CATEGORY_UPDATED
+  PROJECT_SCOPE_CREATED
+  PROJECT_SCOPE_DELETED
+  PROJECT_SCOPE_TASK_CREATED
+  PROJECT_SCOPE_TASK_DELETED
+  PROJECT_SCOPE_TASK_UPDATED
+  PROJECT_SCOPE_TEMPLATE_INSTANTIATED
+  PROJECT_SCOPE_UPDATED
+  PROJECT_SESSION_CLOSED
+  PROJECT_SESSION_OPENED
+  PROJECT_SESSION_REVERTED
+  PROJECT_STATUS_CHANGED
+  PROJECT_TASK_COMPLETED
+  PROJECT_TASK_UNCOMPLETED
+  PROJECT_UPDATED
+  PUNCHLIST_PRIORITY_CHANGED
+  PUNCHLIST_STATUS_CHANGED
+  REPORT_APPROVED
+  REPORT_CREATED
+  REPORT_DELETED
+  REPORT_SUBMITTED
+  REPORT_UPDATED
+  REVENUE_RATE_CREATED
+  REVENUE_RATE_DELETED
+  REVENUE_RATE_UPDATED
+  SCHEDULE_CREATED
+  SCHEDULE_DELETED
+  SCHEDULE_FREQUENCY_CHANGED
+  SCHEDULE_UPDATED
+  SCOPE_CREATED
+  SCOPE_DELETED
+  SCOPE_TEMPLATE_CREATED
+  SCOPE_TEMPLATE_DELETED
+  SCOPE_TEMPLATE_INSTANTIATED
+  SCOPE_TEMPLATE_UPDATED
+  SCOPE_UPDATED
+  SERVICES_BULK_GENERATED
+  SERVICE_CANCELLED
+  SERVICE_COMPLETED
+  SERVICE_CREATED
+  SERVICE_DELETED
+  SERVICE_DISPATCHED
+  SERVICE_SESSION_CLOSED
+  SERVICE_SESSION_OPENED
+  SERVICE_SESSION_REVERTED
+  SERVICE_STATUS_CHANGED
+  SERVICE_TASK_COMPLETED
+  SERVICE_TASK_UNCOMPLETED
+  SERVICE_TEAM_ASSIGNED
+  SERVICE_TEAM_UNASSIGNED
+  SERVICE_UPDATED
+  SESSION_IMAGE_DELETED
+  SESSION_IMAGE_UPDATED
+  SESSION_IMAGE_UPLOADED
+  SESSION_MEDIA_INTERNAL_FLAGGED
+  SESSION_NOTE_CREATED
+  SESSION_NOTE_DELETED
+  SESSION_NOTE_UPDATED
+  SESSION_VIDEO_DELETED
+  SESSION_VIDEO_UPDATED
+  SESSION_VIDEO_UPLOADED
+  TASK_COMPLETION_RECORDED
+  TASK_CREATED
+  TASK_DELETED
+  TASK_TEMPLATE_CREATED
+  TASK_TEMPLATE_DELETED
+  TASK_TEMPLATE_UPDATED
+  TASK_UPDATED
+  TEAM_PROFILE_CREATED
+  TEAM_PROFILE_DELETED
+  TEAM_PROFILE_ROLE_CHANGED
+  TEAM_PROFILE_UPDATED
+}
+
+"""Hungry Howies location records"""
+input HungryHowiesLocationFilter {
+  AND: HungryHowiesLocationFilter
+  DISTINCT: Boolean
+  NOT: HungryHowiesLocationFilter
+  OR: HungryHowiesLocationFilter
+  accountId: UUID
+  id: UUID
+  ovenType: HungryHowiesOvenChoices
+  storeNumber: String
+}
+
+input HungryHowiesLocationInput {
+  accountId: ID!
+  ovenType: String = null
+  storeNumber: String!
+}
+
+"""
+HungryHowiesLocationNote(id, created_at, updated_at, content, author, internal, location)
+"""
+input HungryHowiesLocationNoteFilter {
+  AND: HungryHowiesLocationNoteFilter
+  DISTINCT: Boolean
+  NOT: HungryHowiesLocationNoteFilter
+  OR: HungryHowiesLocationNoteFilter
+  authorId: UUID
+  contentContains: String = null
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean
+  locationId: UUID
+}
+
+input HungryHowiesLocationNoteInput {
+  authorId: ID = null
+  content: String!
+  internal: Boolean! = true
+  locationId: ID!
+}
+
+"""
+HungryHowiesLocationNote(id, created_at, updated_at, content, author, internal, location)
+"""
+type HungryHowiesLocationNoteType implements Node {
+  authorId: UUID
+  content: String!
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean!
+  locationId: UUID!
+  updatedAt: DateTime!
+}
+
+input HungryHowiesLocationNoteUpdateInput {
+  authorId: ID = null
+  content: String = null
+  id: ID!
+  internal: Boolean = null
+}
+
+"""Hungry Howies location records"""
+type HungryHowiesLocationType implements Node {
+  account: AccountType!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  notes: [HungryHowiesLocationNoteType!]!
+  ovenType: HungryHowiesOvenChoices
+  storeNumber: String!
+}
+
+input HungryHowiesLocationUpdateInput {
+  accountId: ID = null
+  id: ID!
+  ovenType: String = null
+  storeNumber: String = null
+}
+
+enum HungryHowiesOvenChoices {
+  MIDDLEBY_MARSHALL
+  OTHER
+  XLT
+}
+
+"""Punchlist records for Hungry Howies projects"""
+input HungryHowiesPunchlistFilter {
+  AND: HungryHowiesPunchlistFilter
+  DISTINCT: Boolean
+  NOT: HungryHowiesPunchlistFilter
+  OR: HungryHowiesPunchlistFilter
+  id: UUID
+  projectId: UUID
+}
+
+input HungryHowiesPunchlistInput {
+  backCeiling: Boolean! = false
+  backVents: Boolean! = false
+  date: Date!
+  endClean: Boolean! = false
+  endLock: Boolean! = false
+  endTrash: Boolean! = false
+  equip: Boolean! = false
+  equipCut: Boolean! = false
+  equipDelivery: Boolean! = false
+  equipDisp: Boolean! = false
+  equipDough: Boolean! = false
+  equipHotbox: Boolean! = false
+  equipMake: Boolean! = false
+  equipManager: Boolean! = false
+  equipOther: Boolean! = false
+  equipSinks: Boolean! = false
+  equipSub: Boolean! = false
+  exportedAt: DateTime = null
+  kitchenCeiling: Boolean! = false
+  kitchenOven: String! = ""
+  kitchenOvenAlerts: Boolean! = false
+  kitchenOvenDisassemble: Boolean! = false
+  kitchenOvenExterior: Boolean! = false
+  kitchenOvenReassemble: Boolean! = false
+  kitchenPos: Boolean! = false
+  kitchenQt: Boolean! = false
+  kitchenVents: Boolean! = false
+  kitchenWalls: Boolean! = false
+  lobbyCeiling: Boolean! = false
+  lobbyCounter: Boolean! = false
+  lobbyPos: Boolean! = false
+  lobbyVents: Boolean! = false
+  notes: String! = ""
+  pdfUrl: String = null
+  projectId: ID!
+  secondDate: DateTime = null
+  secondVisit: Boolean! = false
+  sheetUrl: String = null
+}
+
+"""Punchlist records for Hungry Howies projects"""
+type HungryHowiesPunchlistType implements Node {
+  backCeiling: Boolean!
+  backVents: Boolean!
+  date: Date!
+  endClean: Boolean!
+  endLock: Boolean!
+  endTrash: Boolean!
+  equip: Boolean!
+  equipCut: Boolean!
+  equipDelivery: Boolean!
+  equipDisp: Boolean!
+  equipDough: Boolean!
+  equipHotbox: Boolean!
+  equipMake: Boolean!
+  equipManager: Boolean!
+  equipOther: Boolean!
+  equipSinks: Boolean!
+  equipSub: Boolean!
+  exportedAt: DateTime
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  kitchenCeiling: Boolean!
+  kitchenOven: String!
+  kitchenOvenAlerts: Boolean!
+  kitchenOvenDisassemble: Boolean!
+  kitchenOvenExterior: Boolean!
+  kitchenOvenReassemble: Boolean!
+  kitchenPos: Boolean!
+  kitchenQt: Boolean!
+  kitchenVents: Boolean!
+  kitchenWalls: Boolean!
+  lobbyCeiling: Boolean!
+  lobbyCounter: Boolean!
+  lobbyPos: Boolean!
+  lobbyVents: Boolean!
+  notes: String!
+  pdfUrl: String
+  projectId: UUID!
+  secondDate: DateTime
+  secondVisit: Boolean!
+  sheetUrl: String
+}
+
+input HungryHowiesPunchlistUpdateInput {
+  backCeiling: Boolean = null
+  backVents: Boolean = null
+  date: Date = null
+  endClean: Boolean = null
+  endLock: Boolean = null
+  endTrash: Boolean = null
+  equip: Boolean = null
+  equipCut: Boolean = null
+  equipDelivery: Boolean = null
+  equipDisp: Boolean = null
+  equipDough: Boolean = null
+  equipHotbox: Boolean = null
+  equipMake: Boolean = null
+  equipManager: Boolean = null
+  equipOther: Boolean = null
+  equipSinks: Boolean = null
+  equipSub: Boolean = null
+  exportedAt: DateTime = null
+  id: ID!
+  kitchenCeiling: Boolean = null
+  kitchenOven: String = null
+  kitchenOvenAlerts: Boolean = null
+  kitchenOvenDisassemble: Boolean = null
+  kitchenOvenExterior: Boolean = null
+  kitchenOvenReassemble: Boolean = null
+  kitchenPos: Boolean = null
+  kitchenQt: Boolean = null
+  kitchenVents: Boolean = null
+  kitchenWalls: Boolean = null
+  lobbyCeiling: Boolean = null
+  lobbyCounter: Boolean = null
+  lobbyPos: Boolean = null
+  lobbyVents: Boolean = null
+  notes: String = null
+  pdfUrl: String = null
+  projectId: ID = null
+  secondDate: DateTime = null
+  secondVisit: Boolean = null
+  sheetUrl: String = null
+}
+
+input IntComparisonFilterLookup {
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: Int
+
+  """Greater than. Filter will be skipped on `null` value"""
+  gt: Int
+
+  """Greater than or equal to. Filter will be skipped on `null` value"""
+  gte: Int
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [Int!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+
+  """Less than. Filter will be skipped on `null` value"""
+  lt: Int
+
+  """Less than or equal to. Filter will be skipped on `null` value"""
+  lte: Int
+
+  """Inclusive range test (between)"""
+  range: IntRangeLookup
+}
+
+input IntRangeLookup {
+  end: Int = null
+  start: Int = null
+}
+
+"""Status choices for an invoice"""
+enum InvoiceChoices {
+  CANCELLED
+  DRAFT
+  OVERDUE
+  PAID
+  SENT
+}
+
+"""Invoice records"""
+input InvoiceFilter {
+  AND: InvoiceFilter
+  DISTINCT: Boolean
+  NOT: InvoiceFilter
+  OR: InvoiceFilter
+  customerId: UUID
+  id: UUID
+
+  """Current status of the invoice"""
+  status: InvoiceChoices
+}
+
+input InvoiceInput {
+  customerId: ID!
+  date: Date!
+  datePaid: Date = null
+  paymentType: String = null
+  projectIds: [ID!] = null
+  revenueIds: [ID!] = null
+  status: String!
+  waveInvoiceId: String = null
+}
+
+"""Invoice records"""
+type InvoiceType implements Node {
+  customerId: UUID!
+  date: Date!
+  datePaid: Date
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  paymentType: PaymentChoices
+  projects: [ProjectType!]!
+  revenues: [RevenueType!]!
+
+  """Current status of the invoice"""
+  status: InvoiceChoices!
+
+  """Wave invoice ID"""
+  waveInvoiceId: String
+}
+
+input InvoiceUpdateInput {
+  customerId: ID = null
+  date: Date = null
+  datePaid: Date = null
+  id: ID!
+  paymentType: String = null
+  projectIds: [ID!] = null
+  revenueIds: [ID!] = null
+  status: String = null
+  waveInvoiceId: String = null
+}
+
+"""
+The `JSON` scalar type represents JSON values as specified by [ECMA-404](https://ecma-international.org/wp-content/uploads/ECMA-404_2nd_edition_december_2017.pdf).
+"""
+scalar JSON
+
+type LaborBreakdown {
+  grandTotal: Decimal!
+  projects: [LaborBreakdownProject!]!
+  projectsTotal: Decimal!
+  services: [LaborBreakdownService!]!
+  servicesTotal: Decimal!
+  teamMemberId: ID!
+  teamMemberName: String!
+}
+
+type LaborBreakdownProject {
+  isTeamMemberAssigned: Boolean!
+  laborShare: Decimal!
+  projectId: ID!
+  projectName: String!
+  teamMemberCount: Int!
+  totalLaborAmount: Decimal!
+}
+
+type LaborBreakdownService {
+  isTeamMemberAssigned: Boolean!
+  laborShare: Decimal!
+  serviceId: ID!
+  teamMemberCount: Int!
+  totalLaborRate: Decimal!
+}
+
+"""Labor records for accounts"""
+input LaborFilter {
+  AND: LaborFilter
+  DISTINCT: Boolean
+  NOT: LaborFilter
+  OR: LaborFilter
+  accountAddressId: UUID
+  id: UUID
+}
+
+input LaborInput {
+  accountAddressId: ID!
+  amount: Float!
+  endDate: Date = null
+  startDate: Date!
+}
+
+"""Labor records for accounts"""
+type LaborType implements Node {
+  accountAddressId: UUID
+  amount: Decimal!
+  endDate: Date
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  startDate: Date!
+}
+
+input LaborUpdateInput {
+  accountAddressId: ID = null
+  amount: Float = null
+  endDate: Date = null
+  id: ID!
+  startDate: Date = null
+}
+
+input MarkAsReadInput {
+  conversationId: ID!
+}
+
+"""Individual message within a conversation."""
+input MessageFilter {
+  AND: MessageFilter
+  DISTINCT: Boolean
+  NOT: MessageFilter
+  OR: MessageFilter
+
+  """Conversation this message belongs to"""
+  conversationId: UUIDFilterLookup
+  createdAt: DatetimeDatetimeFilterLookup
+  id: UUIDFilterLookup
+
+  """Whether this is an automated system message"""
+  isSystemMessage: BoolBaseFilterLookup
+}
+
+input MessageInput {
+  attachments: String = null
+  body: String!
+  conversationId: ID!
+  metadata: String = null
+  replyToId: ID = null
+}
+
+"""
+Tracks when individual messages are read by specific participants.
+Allows for fine-grained read tracking beyond conversation-level.
+"""
+type MessageReadReceiptType implements Node {
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Message that was read"""
+  messageId: UUID!
+
+  """When the message was read"""
+  readAt: DateTime!
+  reader: ParticipantType!
+  updatedAt: DateTime!
+}
+
+"""Individual message within a conversation."""
+type MessageType implements Node {
+  """Array of attachment metadata (file paths, names, sizes, types)"""
+  attachments: JSON!
+
+  """Message content"""
+  body: String!
+  canDelete: Boolean!
+
+  """Conversation this message belongs to"""
+  conversationId: UUID!
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Whether this is an automated system message"""
+  isSystemMessage: Boolean!
+
+  """Additional message metadata (formatting, mentions, etc.)"""
+  metadata: JSON!
+  readBy: [MessageReadReceiptType!]!
+  replyTo: MessageType
+
+  """Message this is replying to (for threading)"""
+  replyToId: UUID
+  sender: ParticipantType!
+  updatedAt: DateTime!
+}
+
+"""A connection to a list of items."""
+type MessageTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [MessageTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type MessageTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: MessageType!
+}
+
+type Mutation {
+  """Add a participant to a conversation"""
+  addParticipant(input: AddParticipantInput!): ConversationParticipantType!
+
+  """Add a task completion to an active project session"""
+  addProjectTaskCompletion(notes: String = null, projectId: ID!, taskId: ID!): ProjectSessionType!
+
+  """Add a task completion to an active service session"""
+  addTaskCompletion(notes: String = null, serviceId: ID!, taskId: ID!): ServiceSessionType!
+
+  """Archive or unarchive a conversation"""
+  archiveConversation(input: ArchiveConversationInput!): ConversationType!
+
+  """Close the active ProjectSession"""
+  closeProjectSession(input: ProjectSessionCloseInput!): ProjectSessionType!
+
+  """Close the active service session and record completed tasks"""
+  closeServiceSession(input: CloseServiceSessionInput!): ServiceSessionType!
+
+  """Create a new account"""
+  createAccount(input: AccountInput!): AccountType!
+
+  """Create a new account address"""
+  createAccountAddress(input: AccountAddressInput!): AccountAddressType!
+
+  """Create a new account contact"""
+  createAccountContact(input: AccountContactInput!): AccountContactType!
+
+  """Create a new account punchlist"""
+  createAccountPunchlist(input: AccountPunchlistInput!): AccountPunchlistType!
+
+  """Create a new area"""
+  createArea(input: AreaInput!): AreaType!
+
+  """Create a new area template"""
+  createAreaTemplate(input: AreaTemplateInput!): AreaTemplateType!
+
+  """Create a new conversation"""
+  createConversation(input: ConversationInput!): ConversationType!
+
+  """Create a new customer"""
+  createCustomer(input: CustomerInput!): CustomerType!
+
+  """Create a new customer address"""
+  createCustomerAddress(input: CustomerAddressInput!): CustomerAddressType!
+
+  """Create a new customer contact"""
+  createCustomerContact(input: CustomerContactInput!): CustomerContactType!
+
+  """Create a new customer profile"""
+  createCustomerProfile(input: CustomerProfileInput!): CustomerProfileType!
+
+  """Create a new hungry howies punchlist"""
+  createHhPunchlist(input: HungryHowiesPunchlistInput!): HungryHowiesPunchlistType!
+
+  """Create a new Hungry Howies location"""
+  createHungryHowiesLocation(input: HungryHowiesLocationInput!): HungryHowiesLocationType!
+
+  """Create a new Hungry Howies location note"""
+  createHungryHowiesLocationNote(input: HungryHowiesLocationNoteInput!): HungryHowiesLocationNoteType!
+
+  """Create a new invoice"""
+  createInvoice(input: InvoiceInput!): InvoiceType!
+
+  """Create a new labor rate"""
+  createLabor(input: LaborInput!): LaborType!
+
+  """Create a notification rule (Admin only)"""
+  createNotificationRule(input: NotificationRuleInput!): NotificationRuleType!
+
+  """Create a new project"""
+  createProject(input: ProjectInput!): ProjectType!
+
+  """Create a Project Area Template"""
+  createProjectAreaTemplate(input: ProjectAreaTemplateInput!): ProjectAreaTemplateType!
+
+  """Create a new project punchlist"""
+  createProjectPunchlist(input: ProjectPunchlistInput!): ProjectPunchlistType!
+
+  """Create a new ProjectScope"""
+  createProjectScope(input: ProjectScopeInput!): ProjectScopeType!
+
+  """Create a ProjectScopeCategory"""
+  createProjectScopeCategory(input: ProjectScopeCategoryInput!): ProjectScopeCategoryType!
+
+  """
+  Instantiate a ProjectScope (with Categories and Tasks) from a ProjectScopeTemplate
+  """
+  createProjectScopeFromTemplate(input: CreateProjectScopeFromTemplateInput!): ProjectScopeType!
+
+  """Create a ProjectScopeTask"""
+  createProjectScopeTask(input: ProjectScopeTaskInput!): ProjectScopeTaskType!
+
+  """Create a new Project Scope Template"""
+  createProjectScopeTemplate(input: ProjectScopeTemplateInput!): ProjectScopeTemplateType!
+
+  """
+  Create a ProjectScopeTemplate (and nested Categories/Tasks) from a JSON payload
+  """
+  createProjectScopeTemplateFromJson(payload: JSON!, replace: Boolean! = false): ProjectScopeTemplateType!
+
+  """Create a new project session note"""
+  createProjectSessionNote(input: ProjectSessionNoteInput!): ProjectSessionNoteType!
+
+  """Create a Project Task Template"""
+  createProjectTaskTemplate(input: ProjectTaskTemplateInput!): ProjectTaskTemplateType!
+
+  """Create a new report"""
+  createReport(input: ReportInput!): ReportType!
+
+  """Create a new revenue rate"""
+  createRevenue(input: RevenueInput!): RevenueType!
+
+  """Create a new service schedule"""
+  createSchedule(input: ScheduleInput!): ScheduleType!
+
+  """Create a new scope"""
+  createScope(input: ScopeInput!): ScopeType!
+
+  """Instantiate a Scope (with Areas and Tasks) from a ScopeTemplate"""
+  createScopeFromTemplate(input: CreateScopeFromTemplateInput!): ScopeType!
+
+  """Create a new scope template"""
+  createScopeTemplate(input: ScopeTemplateInput!): ScopeTemplateType!
+
+  """Create a ScopeTemplate (and nested Areas/Tasks) from a JSON payload"""
+  createScopeTemplateFromJson(payload: JSON!, replace: Boolean! = false): ScopeTemplateType!
+
+  """Create a new service visit"""
+  createService(input: ServiceInput!): ServiceType!
+
+  """Create a new service session note"""
+  createServiceSessionNote(input: ServiceSessionNoteInput!): ServiceSessionNoteType!
+
+  """Create a new task"""
+  createTask(input: TaskInput!): TaskType!
+
+  """Create a new task completion"""
+  createTaskCompletion(input: TaskCompletionInput!): TaskCompletionType!
+
+  """Create a new task template"""
+  createTaskTemplate(input: TaskTemplateInput!): TaskTemplateType!
+
+  """Create a new team profile"""
+  createTeamProfile(input: TeamProfileInput!): TeamProfileType!
+
+  """Delete an existing account"""
+  deleteAccount(id: ID!): ID!
+
+  """Delete an existing account address"""
+  deleteAccountAddress(id: ID!): ID!
+
+  """Delete an existing account contact"""
+  deleteAccountContact(id: ID!): ID!
+
+  """Delete an existing account punchlist"""
+  deleteAccountPunchlist(id: ID!): ID!
+
+  """Delete an existing area"""
+  deleteArea(id: ID!): ID!
+
+  """Delete an existing area template"""
+  deleteAreaTemplate(id: ID!): ID!
+
+  """Delete a conversation"""
+  deleteConversation(id: ID!): ID!
+
+  """Delete an existing customer"""
+  deleteCustomer(id: ID!): ID!
+
+  """Delete an existing customer address"""
+  deleteCustomerAddress(id: ID!): ID!
+
+  """Delete an existing customer contact"""
+  deleteCustomerContact(id: ID!): ID!
+
+  """Delete an existing customer profile"""
+  deleteCustomerProfile(id: ID!): ID!
+
+  """Delete an existing hungry howies punchlist"""
+  deleteHhPunchlist(id: ID!): ID!
+
+  """Delete a Hungry Howies location"""
+  deleteHungryHowiesLocation(id: ID!): ID!
+
+  """Delete a Hungry Howies location note"""
+  deleteHungryHowiesLocationNote(id: ID!): ID!
+
+  """Delete an existing invoice"""
+  deleteInvoice(id: ID!): ID!
+
+  """Delete an existing labor rate"""
+  deleteLabor(id: ID!): ID!
+
+  """Delete a message"""
+  deleteMessage(id: ID!): ID!
+
+  """Delete a notification"""
+  deleteNotification(id: ID!): ID!
+
+  """Delete a notification rule (Admin only)"""
+  deleteNotificationRule(id: ID!): ID!
+
+  """Delete an existing project"""
+  deleteProject(id: ID!): ID!
+
+  """Delete a Project Area Template"""
+  deleteProjectAreaTemplate(id: ID!): ID!
+
+  """Delete an existing project punchlist"""
+  deleteProjectPunchlist(id: ID!): ID!
+
+  """Delete a ProjectScope"""
+  deleteProjectScope(id: ID!): ID!
+
+  """Delete a ProjectScopeCategory"""
+  deleteProjectScopeCategory(id: ID!): ID!
+
+  """Delete a ProjectScopeTask"""
+  deleteProjectScopeTask(id: ID!): ID!
+
+  """Delete a Project Scope Template"""
+  deleteProjectScopeTemplate(id: ID!): ID!
+
+  """Delete a ProjectSession image"""
+  deleteProjectSessionImage(id: ID!): ID!
+
+  """Delete a project session note"""
+  deleteProjectSessionNote(id: ID!): ID!
+
+  """Delete a ProjectSession video"""
+  deleteProjectSessionVideo(id: ID!): ID!
+
+  """Delete a Project Task Template"""
+  deleteProjectTaskTemplate(id: ID!): ID!
+
+  """Delete an existing report"""
+  deleteReport(id: ID!): ID!
+
+  """Delete an existing revenue rate"""
+  deleteRevenue(id: ID!): ID!
+
+  """Delete an existing service schedule"""
+  deleteSchedule(id: ID!): ID!
+
+  """Delete an existing scope"""
+  deleteScope(id: ID!): ID!
+
+  """Delete an existing scope template"""
+  deleteScopeTemplate(id: ID!): ID!
+
+  """Delete an existing service visit"""
+  deleteService(id: ID!): ID!
+
+  """Delete a ServiceSession image"""
+  deleteServiceSessionImage(id: ID!): ID!
+
+  """Delete a service session note"""
+  deleteServiceSessionNote(id: ID!): ID!
+
+  """Delete a ServiceSession video"""
+  deleteServiceSessionVideo(id: ID!): ID!
+
+  """Delete an existing task"""
+  deleteTask(id: ID!): ID!
+
+  """Delete an existing task completion"""
+  deleteTaskCompletion(id: ID!): ID!
+
+  """Delete an existing task template"""
+  deleteTaskTemplate(id: ID!): ID!
+
+  """Delete an existing team profile"""
+  deleteTeamProfile(id: ID!): ID!
+
+  """Generate service visits for a given month (all-or-nothing)"""
+  generateServicesByMonth(input: ServiceGenerationInput!): [ServiceType!]!
+
+  """Mark all notifications as read for current user"""
+  markAllNotificationsAsRead: Int!
+
+  """Mark conversation as read"""
+  markConversationAsRead(input: MarkAsReadInput!): ConversationType!
+
+  """Mark notification as read"""
+  markNotificationAsRead(id: ID!): NotificationType!
+
+  """Mute or unmute a conversation"""
+  muteConversation(input: MuteConversationInput!): ConversationType!
+
+  """Start a new ProjectSession for a scheduled project"""
+  openProjectSession(input: ProjectSessionStartInput!): ProjectSessionType!
+
+  """Open a service session for a scheduled service"""
+  openServiceSession(input: OpenServiceSessionInput!): ServiceSessionType!
+
+  """Remove a participant from a conversation"""
+  removeParticipant(input: RemoveParticipantInput!): ID!
+
+  """Remove a task completion from an active project session"""
+  removeProjectTaskCompletion(projectId: ID!, taskId: ID!): ProjectSessionType!
+
+  """Remove a task completion from an active service session"""
+  removeTaskCompletion(serviceId: ID!, taskId: ID!): ServiceSessionType!
+
+  """
+  Revert the active ProjectSession back to scheduled (deletes the active session)
+  """
+  revertProjectSession(input: ProjectSessionRevertInput!): Boolean!
+
+  """
+  Revert an active service session back to scheduled (deletes the active session)
+  """
+  revertServiceSession(input: RevertServiceSessionInput!): Boolean!
+
+  """Send a message in a conversation"""
+  sendMessage(input: MessageInput!): MessageType!
+
+  """Update an existing account"""
+  updateAccount(input: AccountUpdateInput!): AccountType!
+
+  """Update an existing account address"""
+  updateAccountAddress(input: AccountAddressUpdateInput!): AccountAddressType!
+
+  """Update an existing account contact"""
+  updateAccountContact(input: AccountContactUpdateInput!): AccountContactType!
+
+  """Update an existing account punchlist"""
+  updateAccountPunchlist(input: AccountPunchlistUpdateInput!): AccountPunchlistType!
+
+  """Update an existing area"""
+  updateArea(input: AreaUpdateInput!): AreaType!
+
+  """Update an existing area template"""
+  updateAreaTemplate(input: AreaTemplateUpdateInput!): AreaTemplateType!
+
+  """Update a conversation"""
+  updateConversation(input: ConversationUpdateInput!): ConversationType!
+
+  """Update an existing customer"""
+  updateCustomer(input: CustomerUpdateInput!): CustomerType!
+
+  """Update an existing customer address"""
+  updateCustomerAddress(input: CustomerAddressUpdateInput!): CustomerAddressType!
+
+  """Update an existing customer contact"""
+  updateCustomerContact(input: CustomerContactUpdateInput!): CustomerContactType!
+
+  """Update an existing customer profile"""
+  updateCustomerProfile(input: CustomerProfileUpdateInput!): CustomerProfileType!
+
+  """Update an existing hungry howies punchlist"""
+  updateHhPunchlist(input: HungryHowiesPunchlistUpdateInput!): HungryHowiesPunchlistType!
+
+  """Update an existing Hungry Howies location"""
+  updateHungryHowiesLocation(input: HungryHowiesLocationUpdateInput!): HungryHowiesLocationType!
+
+  """Update an existing Hungry Howies location note"""
+  updateHungryHowiesLocationNote(input: HungryHowiesLocationNoteUpdateInput!): HungryHowiesLocationNoteType!
+
+  """Update an existing invoice"""
+  updateInvoice(input: InvoiceUpdateInput!): InvoiceType!
+
+  """Update an existing labor rate"""
+  updateLabor(input: LaborUpdateInput!): LaborType!
+
+  """Update a notification rule (Admin only)"""
+  updateNotificationRule(input: NotificationRuleUpdateInput!): NotificationRuleType!
+
+  """Update an existing project"""
+  updateProject(input: ProjectUpdateInput!): ProjectType!
+
+  """Update a Project Area Template"""
+  updateProjectAreaTemplate(input: ProjectAreaTemplateUpdateInput!): ProjectAreaTemplateType!
+
+  """Update an existing project punchlist"""
+  updateProjectPunchlist(input: ProjectPunchlistUpdateInput!): ProjectPunchlistType!
+
+  """Update an existing ProjectScope"""
+  updateProjectScope(input: ProjectScopeUpdateInput!): ProjectScopeType!
+
+  """Update a ProjectScopeCategory"""
+  updateProjectScopeCategory(input: ProjectScopeCategoryUpdateInput!): ProjectScopeCategoryType!
+
+  """Update a ProjectScopeTask"""
+  updateProjectScopeTask(input: ProjectScopeTaskUpdateInput!): ProjectScopeTaskType!
+
+  """Update an existing Project Scope Template"""
+  updateProjectScopeTemplate(input: ProjectScopeTemplateUpdateInput!): ProjectScopeTemplateType!
+
+  """Update an existing ProjectSession image (e.g., title)"""
+  updateProjectSessionImage(input: ProjectSessionImageUpdateInput!): ProjectSessionImageType!
+
+  """Update an existing project session note"""
+  updateProjectSessionNote(input: ProjectSessionNoteUpdateInput!): ProjectSessionNoteType!
+
+  """Update an existing ProjectSession video (e.g., title)"""
+  updateProjectSessionVideo(input: ProjectSessionVideoUpdateInput!): ProjectSessionVideoType!
+
+  """Update a Project Task Template"""
+  updateProjectTaskTemplate(input: ProjectTaskTemplateUpdateInput!): ProjectTaskTemplateType!
+
+  """Update an existing report"""
+  updateReport(input: ReportUpdateInput!): ReportType!
+
+  """Update an existing revenue rate"""
+  updateRevenue(input: RevenueUpdateInput!): RevenueType!
+
+  """Update an existing service schedule"""
+  updateSchedule(input: ScheduleUpdateInput!): ScheduleType!
+
+  """Update an existing scope"""
+  updateScope(input: ScopeUpdateInput!): ScopeType!
+
+  """Update an existing scope template"""
+  updateScopeTemplate(input: ScopeTemplateUpdateInput!): ScopeTemplateType!
+
+  """Update an existing service visit"""
+  updateService(input: ServiceUpdateInput!): ServiceType!
+
+  """Update an existing ServiceSession image (e.g., title)"""
+  updateServiceSessionImage(input: ServiceSessionImageUpdateInput!): ServiceSessionImageType!
+
+  """Update an existing service session note"""
+  updateServiceSessionNote(input: ServiceSessionNoteUpdateInput!): ServiceSessionNoteType!
+
+  """Update an existing ServiceSession video (e.g., title)"""
+  updateServiceSessionVideo(input: ServiceSessionVideoUpdateInput!): ServiceSessionVideoType!
+
+  """Update an existing task"""
+  updateTask(input: TaskUpdateInput!): TaskType!
+
+  """Update an existing task completion"""
+  updateTaskCompletion(input: TaskCompletionUpdateInput!): TaskCompletionType!
+
+  """Update an existing task template"""
+  updateTaskTemplate(input: TaskTemplateUpdateInput!): TaskTemplateType!
+
+  """Update an existing team profile"""
+  updateTeamProfile(input: TeamProfileUpdateInput!): TeamProfileType!
+
+  """Upload an image to a ProjectSession"""
+  uploadProjectSessionImage(file: Upload!, internal: Boolean! = true, notes: String = null, sessionId: ID!, title: String = null): ProjectSessionImageType!
+
+  """Upload a video to a ProjectSession"""
+  uploadProjectSessionVideo(file: Upload!, internal: Boolean! = true, notes: String = null, sessionId: ID!, title: String = null): ProjectSessionVideoType!
+
+  """Upload an image to a ServiceSession"""
+  uploadServiceSessionImage(file: Upload!, internal: Boolean! = true, notes: String = null, sessionId: ID!, title: String = null): ServiceSessionImageType!
+
+  """Upload a video to a ServiceSession"""
+  uploadServiceSessionVideo(file: Upload!, internal: Boolean! = true, notes: String = null, sessionId: ID!, title: String = null): ServiceSessionVideoType!
+}
+
+input MuteConversationInput {
+  conversationId: ID!
+  isMuted: Boolean!
+}
+
+"""An object with a Globally Unique ID"""
+interface Node {
+  """The Globally Unique ID of this object"""
+  id: ID!
+}
+
+enum NotificationChannelChoices {
+  EMAIL
+  IN_APP
+  SMS
+}
+
+"""Track delivery attempts for a notification via specific channels."""
+type NotificationDeliveryType {
+  """Number of delivery attempts"""
+  attempts: Int!
+
+  """Delivery channel (IN_APP, EMAIL, SMS)"""
+  channel: NotificationChannelChoices!
+  createdAt: DateTime!
+
+  """Timestamp when delivery was confirmed (if supported by channel)"""
+  deliveredAt: DateTime
+
+  """Error message from failed delivery attempts"""
+  errorMessage: String!
+
+  """External service ID (e.g., Twilio message SID, email message ID)"""
+  externalId: String!
+  id: ID!
+
+  """Timestamp of last delivery attempt"""
+  lastAttemptAt: DateTime
+
+  """Additional delivery metadata"""
+  metadata: JSON!
+
+  """Notification being delivered"""
+  notification: NotificationType!
+
+  """Timestamp when successfully sent"""
+  sentAt: DateTime
+
+  """Current delivery status"""
+  status: DeliveryStatusChoices!
+  updatedAt: DateTime!
+}
+
+input NotificationRuleInput {
+  channels: [NotificationChannelChoices!]!
+  conditions: JSON = null
+  description: String = ""
+  eventTypes: [EventTypeChoices!]!
+  isActive: Boolean = true
+  name: String!
+  targetCustomerProfileIds: [ID!] = null
+  targetRoles: [RoleChoices!] = null
+  targetTeamProfileIds: [ID!] = null
+  templateBody: String = ""
+  templateSubject: String = ""
+}
+
+"""Admin-defined rules for generating notifications based on events."""
+type NotificationRuleType {
+  """Delivery channels for notifications (IN_APP, EMAIL, SMS)"""
+  channels: [NotificationChannelChoices!]!
+
+  """
+  Additional conditions for when this rule applies (e.g., {'status': 'COMPLETED'})
+  """
+  conditions: JSON!
+  createdAt: DateTime!
+
+  """Description of when and how this rule applies"""
+  description: String!
+
+  """List of event types that trigger this rule"""
+  eventTypes: [EventTypeChoices!]!
+  id: ID!
+
+  """Whether this rule is currently active"""
+  isActive: Boolean!
+
+  """Descriptive name for this notification rule"""
+  name: String!
+  targetCustomerProfileIds: [ID!]!
+
+  """
+  Roles that should receive notifications (empty = all authenticated users)
+  """
+  targetRoles: [RoleChoices!]!
+  targetTeamProfileIds: [ID!]!
+
+  """Template for notification body (supports variables)"""
+  templateBody: String!
+
+  """Template for notification subject (supports variables)"""
+  templateSubject: String!
+  updatedAt: DateTime!
+}
+
+input NotificationRuleUpdateInput {
+  channels: [NotificationChannelChoices!] = null
+  conditions: JSON = null
+  description: String = null
+  eventTypes: [EventTypeChoices!] = null
+  id: ID!
+  isActive: Boolean = null
+  name: String = null
+  targetCustomerProfileIds: [ID!] = null
+  targetRoles: [RoleChoices!] = null
+  targetTeamProfileIds: [ID!] = null
+  templateBody: String = null
+  templateSubject: String = null
+}
+
+enum NotificationStatusChoices {
+  FAILED
+  PENDING
+  READ
+  SENT
+}
+
+"""Individual notification instance sent to a specific recipient."""
+type NotificationType {
+  """Optional URL for action button (e.g., link to project detail)"""
+  actionUrl: String!
+
+  """Notification body content"""
+  body: String!
+  createdAt: DateTime!
+
+  """Event that triggered this notification"""
+  event: EventType!
+  id: ID!
+  isRead: Boolean!
+
+  """Additional notification metadata"""
+  metadata: JSON!
+
+  """Timestamp when notification was marked as read"""
+  readAt: DateTime
+  recipientId: ID!
+  recipientType: String!
+
+  """Rule that generated this notification"""
+  rule: NotificationRuleType
+
+  """Current status of the notification"""
+  status: NotificationStatusChoices!
+
+  """Notification subject line"""
+  subject: String!
+  updatedAt: DateTime!
+}
+
+input OpenServiceSessionInput {
+  serviceId: ID!
+}
+
+"""Information to aid in pagination."""
+type PageInfo {
+  """When paginating forwards, the cursor to continue."""
+  endCursor: String
+
+  """When paginating forwards, are there more items?"""
+  hasNextPage: Boolean!
+
+  """When paginating backwards, are there more items?"""
+  hasPreviousPage: Boolean!
+
+  """When paginating backwards, the cursor to continue."""
+  startCursor: String
+}
+
+type ParticipantType {
+  customerProfile: CustomerProfileType
+  teamProfile: TeamProfileType
+}
+
+"""Payment choices for a transaction"""
+enum PaymentChoices {
+  BANK_TRANSFER
+  CASH
+  CHECK
+  CREDIT_CARD
+}
+
+"""Reusable category definition belonging to a ProjectScopeTemplate"""
+input ProjectAreaTemplateFilter {
+  AND: ProjectAreaTemplateFilter
+  DISTINCT: Boolean
+  NOT: ProjectAreaTemplateFilter
+  OR: ProjectAreaTemplateFilter
+  id: UUID
+
+  """Case-insensitive search on name"""
+  nameSearch: String = null
+  order: Int
+  scopeTemplateId: UUID
+}
+
+input ProjectAreaTemplateInput {
+  name: String!
+  order: Int! = 0
+  scopeTemplateId: ID!
+}
+
+"""Reusable category definition belonging to a ProjectScopeTemplate"""
+type ProjectAreaTemplateType implements Node {
+  """The Globally Unique ID of this object"""
+  id: ID!
+  name: String!
+  order: Int!
+  scopeTemplateId: UUID!
+  taskTemplates: [ProjectTaskTemplateType!]!
+}
+
+"""A connection to a list of items."""
+type ProjectAreaTemplateTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ProjectAreaTemplateTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ProjectAreaTemplateTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ProjectAreaTemplateType!
+}
+
+input ProjectAreaTemplateUpdateInput {
+  id: ID!
+  name: String = null
+  order: Int = null
+}
+
+"""Project records for customers"""
+input ProjectFilter {
+  AND: ProjectFilter
+  DISTINCT: Boolean
+  NOT: ProjectFilter
+  OR: ProjectFilter
+
+  """
+  If set, the project uses this account address; otherwise, fill the address fields below
+  """
+  accountAddressId: UUIDFilterLookup
+  customerId: UUIDFilterLookup
+  date: DateDateFilterLookup
+  id: UUIDFilterLookup
+
+  """Current status of the project"""
+  status: ServiceChoicesFilterLookup
+  teamMembers: DjangoModelFilterInput
+}
+
+input ProjectInput {
+  accountAddressId: ID = null
+  amount: Float!
+  calendarEventId: String = null
+  city: String = null
+  customerId: ID!
+  date: Date!
+  labor: Float!
+  name: String!
+  notes: String = null
+  scopeId: ID = null
+  state: String = null
+  status: String!
+  streetAddress: String = null
+  teamMemberIds: [ID!] = null
+  waveServiceId: String = null
+  zipCode: String = null
+}
+
+"""Punchlist records for projects"""
+input ProjectPunchlistFilter {
+  AND: ProjectPunchlistFilter
+  DISTINCT: Boolean
+  NOT: ProjectPunchlistFilter
+  OR: ProjectPunchlistFilter
+  id: UUID
+  projectId: UUID
+}
+
+input ProjectPunchlistInput {
+  date: Date!
+  projectId: ID!
+}
+
+"""Punchlist records for projects"""
+type ProjectPunchlistType implements Node {
+  date: Date!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  projectId: UUID!
+}
+
+input ProjectPunchlistUpdateInput {
+  date: Date = null
+  id: ID!
+  projectId: ID = null
+}
+
+"""Category of work definition for a project"""
+input ProjectScopeCategoryFilter {
+  AND: ProjectScopeCategoryFilter
+  DISTINCT: Boolean
+  NOT: ProjectScopeCategoryFilter
+  OR: ProjectScopeCategoryFilter
+  id: UUID
+  order: Int
+  scopeId: UUID
+}
+
+input ProjectScopeCategoryInput {
+  name: String!
+  order: Int! = 0
+  scopeId: ID!
+}
+
+"""Category of work definition for a project"""
+type ProjectScopeCategoryType implements Node {
+  """The Globally Unique ID of this object"""
+  id: ID!
+  name: String!
+  order: Int!
+  projectTasks: [ProjectScopeTaskType!]!
+  scopeId: UUID!
+}
+
+"""A connection to a list of items."""
+type ProjectScopeCategoryTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ProjectScopeCategoryTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ProjectScopeCategoryTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ProjectScopeCategoryType!
+}
+
+input ProjectScopeCategoryUpdateInput {
+  id: ID!
+  name: String = null
+  order: Int = null
+}
+
+"""Scope of work definition for a project"""
+input ProjectScopeFilter {
+  AND: ProjectScopeFilter
+  DISTINCT: Boolean
+  NOT: ProjectScopeFilter
+  OR: ProjectScopeFilter
+  accountAddressId: UUID
+  accountId: UUID
+  id: UUID
+  isActive: Boolean
+  projectId: UUID
+}
+
+input ProjectScopeInput {
+  accountAddressId: ID = null
+  accountId: ID = null
+  description: String = null
+  isActive: Boolean = true
+  name: String!
+  projectId: ID!
+}
+
+"""Record of a task template being completed during a project"""
+input ProjectScopeTaskCompletionFilter {
+  AND: ProjectScopeTaskCompletionFilter
+  DISTINCT: Boolean
+  NOT: ProjectScopeTaskCompletionFilter
+  OR: ProjectScopeTaskCompletionFilter
+  accountAddressId: UUID
+  accountId: UUID
+  completedById: UUID
+  id: UUID
+  projectId: UUID
+  taskId: UUID
+}
+
+"""Record of a task template being completed during a project"""
+type ProjectScopeTaskCompletionType implements Node {
+  accountAddressId: UUID
+  completedAt: DateTime!
+  completedById: UUID!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  notes: String!
+  projectId: UUID!
+  taskId: UUID!
+}
+
+"""Specific task definition for a project"""
+input ProjectScopeTaskFilter {
+  AND: ProjectScopeTaskFilter
+  DISTINCT: Boolean
+  NOT: ProjectScopeTaskFilter
+  OR: ProjectScopeTaskFilter
+  categoryId: UUID
+  id: UUID
+  order: Int
+}
+
+input ProjectScopeTaskInput {
+  categoryId: ID!
+  checklistDescription: String = ""
+  description: String!
+  estimatedMinutes: Int = null
+  order: Int! = 0
+}
+
+"""Specific task definition for a project"""
+type ProjectScopeTaskType implements Node {
+  categoryId: UUID!
+  checklistDescription: String!
+  description: String!
+  estimatedMinutes: Int
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  order: Int!
+}
+
+"""A connection to a list of items."""
+type ProjectScopeTaskTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ProjectScopeTaskTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ProjectScopeTaskTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ProjectScopeTaskType!
+}
+
+input ProjectScopeTaskUpdateInput {
+  checklistDescription: String = null
+  description: String = null
+  estimatedMinutes: Int = null
+  id: ID!
+  order: Int = null
+}
+
+"""
+Reusable blueprint for creating a ProjectScope with Categories and Tasks
+"""
+input ProjectScopeTemplateFilter {
+  AND: ProjectScopeTemplateFilter
+  DISTINCT: Boolean
+  NOT: ProjectScopeTemplateFilter
+  OR: ProjectScopeTemplateFilter
+
+  """Case-insensitive search on description"""
+  descriptionSearch: String = null
+  id: UUID
+  isActive: Boolean
+
+  """Case-insensitive search on name"""
+  nameSearch: String = null
+}
+
+input ProjectScopeTemplateInput {
+  description: String = ""
+  isActive: Boolean = true
+  name: String!
+}
+
+"""
+Reusable blueprint for creating a ProjectScope with Categories and Tasks
+"""
+type ProjectScopeTemplateType implements Node {
+  categoryTemplates: [ProjectAreaTemplateType!]!
+  description: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  name: String!
+}
+
+input ProjectScopeTemplateUpdateInput {
+  description: String = null
+  id: ID!
+  isActive: Boolean = null
+  name: String = null
+}
+
+"""Scope of work definition for a project"""
+type ProjectScopeType implements Node {
+  accountAddressId: UUID
+  accountId: UUID
+  description: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  name: String!
+  projectAreas: [ProjectScopeCategoryType!]!
+  projectId: UUID!
+}
+
+input ProjectScopeUpdateInput {
+  accountAddressId: ID = null
+  accountId: ID = null
+  description: String = null
+  id: ID!
+  isActive: Boolean = null
+  name: String = null
+}
+
+input ProjectSessionCloseInput {
+  completedTaskIds: [ID!] = null
+  projectId: ID!
+}
+
+"""Project session records"""
+input ProjectSessionFilter {
+  AND: ProjectSessionFilter
+  DISTINCT: Boolean
+  NOT: ProjectSessionFilter
+  OR: ProjectSessionFilter
+  accountAddressId: UUIDFilterLookup
+  accountId: UUIDFilterLookup
+  createdById: UUIDFilterLookup
+  customerId: UUIDFilterLookup
+  date: DateDateFilterLookup
+  end: DatetimeDatetimeFilterLookup
+  id: UUIDFilterLookup
+  projectId: UUIDFilterLookup
+  scopeId: UUIDFilterLookup
+  start: DatetimeDatetimeFilterLookup
+  teamMemberId: String
+}
+
+"""
+ProjectSessionImage(id, created_at, updated_at, title, content_type, width, height, uploaded_by_team_profile, notes, internal, project_session, image, thumbnail)
+"""
+input ProjectSessionImageFilter {
+  AND: ProjectSessionImageFilter
+  DISTINCT: Boolean
+  NOT: ProjectSessionImageFilter
+  OR: ProjectSessionImageFilter
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+  projectSessionId: UUID
+  titleContains: String = null
+  uploadedByTeamProfileId: UUID
+}
+
+"""
+ProjectSessionImage(id, created_at, updated_at, title, content_type, width, height, uploaded_by_team_profile, notes, internal, project_session, image, thumbnail)
+"""
+type ProjectSessionImageType implements Node {
+  contentType: String!
+  createdAt: DateTime!
+  height: Int!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  image: DjangoImageType!
+  internal: Boolean!
+  notes: String!
+  projectSessionId: UUID!
+  thumbnail: DjangoImageType
+  title: String!
+  uploadedByTeamProfileId: UUID
+  width: Int!
+}
+
+input ProjectSessionImageUpdateInput {
+  id: ID!
+  internal: Boolean = null
+  notes: String = null
+  title: String = null
+}
+
+"""Notes attached to project sessions"""
+input ProjectSessionNoteFilter {
+  AND: ProjectSessionNoteFilter
+  DISTINCT: Boolean
+  NOT: ProjectSessionNoteFilter
+  OR: ProjectSessionNoteFilter
+  authorId: UUID
+  contentContains: String = null
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean
+  sessionId: UUID
+}
+
+input ProjectSessionNoteInput {
+  authorId: ID = null
+  content: String!
+  internal: Boolean! = true
+  sessionId: ID!
+}
+
+"""Notes attached to project sessions"""
+type ProjectSessionNoteType implements Node {
+  authorId: UUID
+  content: String!
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean!
+  sessionId: UUID!
+  updatedAt: DateTime!
+}
+
+input ProjectSessionNoteUpdateInput {
+  authorId: ID = null
+  content: String = null
+  id: ID!
+  internal: Boolean = null
+}
+
+input ProjectSessionRevertInput {
+  projectId: ID!
+}
+
+input ProjectSessionStartInput {
+  projectId: ID!
+}
+
+"""Project session records"""
+type ProjectSessionType implements Node {
+  accountAddressId: UUID
+  accountId: UUID
+  closedById: UUID
+  completedTasks: [ProjectScopeTaskCompletionType!]!
+  createdById: UUID!
+  customerId: UUID!
+  date: Date!
+  durationSeconds: Int!
+  end: DateTime
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """A session is active if it has not been closed."""
+  isActive: Boolean!
+  notes: [ProjectSessionNoteType!]!
+  photos: [ProjectSessionImageType!]!
+  projectId: UUID!
+  scopeId: UUID!
+  start: DateTime!
+  videos: [ProjectSessionVideoType!]!
+}
+
+"""Video attached to a ProjectSession for documentation."""
+input ProjectSessionVideoFilter {
+  AND: ProjectSessionVideoFilter
+  DISTINCT: Boolean
+  NOT: ProjectSessionVideoFilter
+  OR: ProjectSessionVideoFilter
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+  internal: Boolean
+  maxDuration: Int = null
+  minDuration: Int = null
+  projectSessionId: UUID
+  titleContains: String = null
+  uploadedByTeamProfileId: UUID
+}
+
+"""Video attached to a ProjectSession for documentation."""
+type ProjectSessionVideoType implements Node {
+  contentType: String!
+  createdAt: DateTime!
+
+  """Video duration in seconds"""
+  durationSeconds: Int!
+
+  """File size in bytes"""
+  fileSizeBytes: Int!
+  height: Int!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  internal: Boolean!
+  notes: String!
+  projectSessionId: UUID!
+  thumbnail: DjangoImageType
+  title: String!
+  uploadedByTeamProfileId: UUID
+  video: DjangoFileType!
+  width: Int!
+}
+
+input ProjectSessionVideoUpdateInput {
+  id: ID!
+  internal: Boolean = null
+  notes: String = null
+  title: String = null
+}
+
+"""Reusable task definition belonging to a ProjectAreaTemplate"""
+input ProjectTaskTemplateFilter {
+  AND: ProjectTaskTemplateFilter
+  DISTINCT: Boolean
+  NOT: ProjectTaskTemplateFilter
+  OR: ProjectTaskTemplateFilter
+  areaTemplateId: UUID
+
+  """Case-insensitive search on description"""
+  descriptionSearch: String = null
+  estimatedMinutes: Int
+  id: UUID
+  order: Int
+}
+
+input ProjectTaskTemplateInput {
+  areaTemplateId: ID!
+  checklistDescription: String = ""
+  description: String!
+  estimatedMinutes: Int = null
+  order: Int! = 0
+}
+
+"""Reusable task definition belonging to a ProjectAreaTemplate"""
+type ProjectTaskTemplateType implements Node {
+  areaTemplateId: UUID!
+  checklistDescription: String!
+  description: String!
+  estimatedMinutes: Int
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  order: Int!
+}
+
+"""A connection to a list of items."""
+type ProjectTaskTemplateTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ProjectTaskTemplateTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ProjectTaskTemplateTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ProjectTaskTemplateType!
+}
+
+input ProjectTaskTemplateUpdateInput {
+  checklistDescription: String = null
+  description: String = null
+  estimatedMinutes: Int = null
+  id: ID!
+  order: Int = null
+}
+
+"""Project records for customers"""
+type ProjectType implements Node {
+  """
+  If set, the project uses this account address; otherwise, fill the address fields below
+  """
+  accountAddressId: UUID
+  amount: Decimal!
+
+  """External calendar event ID"""
+  calendarEventId: String
+  city: String
+  customerId: UUID!
+  date: Date!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  labor: Decimal!
+  name: String!
+  notes: String
+  scopeId: UUID
+  state: String
+
+  """Current status of the project"""
+  status: ServiceChoices!
+  streetAddress: String
+  teamMembers: [DjangoModelType!]!
+
+  """Wave service ID"""
+  waveServiceId: String
+  zipCode: String
+}
+
+"""A connection to a list of items."""
+type ProjectTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ProjectTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ProjectTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ProjectType!
+}
+
+input ProjectUpdateInput {
+  accountAddressId: ID = null
+  amount: Float = null
+  calendarEventId: String = null
+  city: String = null
+  customerId: ID = null
+  date: Date = null
+  id: ID!
+  labor: Float = null
+  name: String = null
+  notes: String = null
+  scopeId: ID = null
+  state: String = null
+  status: String = null
+  streetAddress: String = null
+  teamMemberIds: [ID!] = null
+  waveServiceId: String = null
+  zipCode: String = null
+}
+
+type Query {
+  account(
+    """The ID of the object."""
+    id: ID!
+  ): AccountType
+  accountAddress(
+    """The ID of the object."""
+    id: ID!
+  ): AccountAddressType
+  accountContact(
+    """The ID of the object."""
+    id: ID!
+  ): AccountContactType
+  accountContacts(filters: AccountContactFilter): [AccountContactType!]!
+  accountPunchlist(
+    """The ID of the object."""
+    id: ID!
+  ): AccountPunchlistType
+  accountPunchlists(filters: AccountPunchlistFilter): [AccountPunchlistType!]!
+  accounts(filters: AccountFilter): [AccountType!]!
+
+  """Get the active project session for a given project"""
+  activeProjectSession(projectId: UUID!): ProjectSessionType
+
+  """Get the active service session for a given service"""
+  activeServiceSession(serviceId: UUID!): ServiceSessionType
+
+  """
+  Consolidated dashboard data for admin/team leader users. Returns all services, projects, invoices, reports, and scope templates for the given month in a single optimized query.
+  """
+  adminDashboard(invoiceStatus: String = null, month: String!): AdminDashboardData!
+  area(
+    """The ID of the object."""
+    id: ID!
+  ): AreaType
+  areaTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): AreaTemplateType
+  areaTemplates(filters: AreaTemplateFilter): [AreaTemplateType!]!
+  areas(filters: AreaFilter): [AreaType!]!
+  conversation(
+    """The ID of the object."""
+    id: ID!
+  ): ConversationType
+  conversations(filters: ConversationFilter): [ConversationType!]!
+  customer(
+    """The ID of the object."""
+    id: ID!
+  ): CustomerType
+  customerAddress(
+    """The ID of the object."""
+    id: ID!
+  ): CustomerAddressType
+  customerContact(
+    """The ID of the object."""
+    id: ID!
+  ): CustomerContactType
+  customerContacts(filters: CustomerContactFilter): [CustomerContactType!]!
+
+  """
+  Consolidated dashboard data for customer users. Returns services, projects, and invoices for the customer.
+  """
+  customerDashboard(customerId: ID!): CustomerDashboardData!
+  customerProfile(
+    """The ID of the object."""
+    id: ID!
+  ): CustomerProfileType
+  customerProfiles(filters: CustomerProfileFilter): [CustomerProfileType!]!
+  customers(filters: CustomerFilter): [CustomerType!]!
+
+  """Get event by ID"""
+  event(id: ID!): EventType
+
+  """Get all events"""
+  events(limit: Int = 50, offset: Int = 0): [EventType!]!
+
+  """
+  Return conversations linked to a specific entity (Project, Service, Account, etc.)
+  """
+  getConversationsByEntity(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    entityId: ID!
+    entityType: String!
+    filters: ConversationFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+  ): ConversationTypeCursorConnection!
+
+  """Return messages for a specific conversation"""
+  getMessagesByConversation(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    conversationId: ID!
+    filters: MessageFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+    includeSystem: Boolean! = true
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+  ): MessageTypeCursorConnection!
+
+  """Return conversations for the authenticated user (inbox)"""
+  getMyConversations(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ConversationFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+    includeArchived: Boolean! = false
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+  ): ConversationTypeCursorConnection!
+
+  """Return area templates for a given ProjectScopeTemplate"""
+  getProjectAreaTemplates(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ProjectAreaTemplateFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+    scopeTemplateId: ID!
+  ): ProjectAreaTemplateTypeCursorConnection!
+
+  """Return categories for a given ProjectScope"""
+  getProjectScopeCategories(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ProjectScopeCategoryFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+    scopeId: ID!
+  ): ProjectScopeCategoryTypeCursorConnection!
+
+  """Return tasks for a given ProjectScopeCategory"""
+  getProjectScopeTasks(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    categoryId: ID!
+    filters: ProjectScopeTaskFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+  ): ProjectScopeTaskTypeCursorConnection!
+
+  """Return task templates for a given ProjectAreaTemplate"""
+  getProjectTaskTemplates(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+    areaTemplateId: ID!
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ProjectTaskTemplateFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+  ): ProjectTaskTemplateTypeCursorConnection!
+
+  """Return projects that include the given TeamProfile ID as a team member"""
+  getProjectsByTeamMember(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ProjectFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+    ordering: DateOrdering = DESC
+    teamProfileId: ID!
+  ): ProjectTypeCursorConnection!
+
+  """Return services that include the given TeamProfile ID as a team member"""
+  getServicesByTeamMember(
+    """Returns the items in the list that come after the specified cursor."""
+    after: String = null
+
+    """Returns the items in the list that come before the specified cursor."""
+    before: String = null
+    filters: ServiceFilter
+
+    """Returns the first n items from the list."""
+    first: Int = null
+
+    """Returns the items in the list that come after the specified cursor."""
+    last: Int = null
+    ordering: DateOrdering = DESC
+    teamProfileId: ID!
+  ): ServiceTypeCursorConnection!
+  hhPunchlist(
+    """The ID of the object."""
+    id: ID!
+  ): HungryHowiesPunchlistType
+  hhPunchlists(filters: HungryHowiesPunchlistFilter): [HungryHowiesPunchlistType!]!
+  hungryHowiesLocation(
+    """The ID of the object."""
+    id: ID!
+  ): HungryHowiesLocationType
+  hungryHowiesLocationNote(
+    """The ID of the object."""
+    id: ID!
+  ): HungryHowiesLocationNoteType
+  hungryHowiesLocationNotes(filters: HungryHowiesLocationNoteFilter): [HungryHowiesLocationNoteType!]!
+  hungryHowiesLocations(filters: HungryHowiesLocationFilter): [HungryHowiesLocationType!]!
+  invoice(
+    """The ID of the object."""
+    id: ID!
+  ): InvoiceType
+  invoices(filters: InvoiceFilter): [InvoiceType!]!
+  labor(
+    """The ID of the object."""
+    id: ID!
+  ): LaborType
+  labors(filters: LaborFilter): [LaborType!]!
+
+  """Get the currently authenticated user's profile"""
+  me: CustomerProfileTypeTeamProfileType
+  message(
+    """The ID of the object."""
+    id: ID!
+  ): MessageType
+  messages(filters: MessageFilter): [MessageType!]!
+
+  """Get notifications for current user"""
+  myNotifications(limit: Int = 50, offset: Int = 0, unreadOnly: Boolean = false): [NotificationType!]!
+
+  """Get unread notification count for current user"""
+  myUnreadNotificationCount: Int!
+
+  """Get notification by ID"""
+  notification(id: ID!): NotificationType
+
+  """Get notification delivery status"""
+  notificationDeliveries(notificationId: ID!): [NotificationDeliveryType!]!
+
+  """Get notification rule by ID"""
+  notificationRule(id: ID!): NotificationRuleType
+
+  """Get all notification rules"""
+  notificationRules(isActive: Boolean = null): [NotificationRuleType!]!
+  project(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectType
+  projectAreaTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectAreaTemplateType
+  projectAreaTemplates(filters: ProjectAreaTemplateFilter): [ProjectAreaTemplateType!]!
+  projectPunchlist(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectPunchlistType
+  projectPunchlists(filters: ProjectPunchlistFilter): [ProjectPunchlistType!]!
+  projectScope(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectScopeType
+  projectScopeCategories(filters: ProjectScopeCategoryFilter): [ProjectScopeCategoryType!]!
+  projectScopeCategory(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectScopeCategoryType
+  projectScopeTask(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectScopeTaskType
+  projectScopeTaskCompletion(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectScopeTaskCompletionType
+  projectScopeTaskCompletions(filters: ProjectScopeTaskCompletionFilter): [ProjectScopeTaskCompletionType!]!
+  projectScopeTasks(filters: ProjectScopeTaskFilter): [ProjectScopeTaskType!]!
+  projectScopeTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectScopeTemplateType
+  projectScopeTemplates(filters: ProjectScopeTemplateFilter): [ProjectScopeTemplateType!]!
+  projectScopes(filters: ProjectScopeFilter): [ProjectScopeType!]!
+  projectSession(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectSessionType
+  projectSessionImage(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectSessionImageType
+  projectSessionImages(filters: ProjectSessionImageFilter): [ProjectSessionImageType!]!
+  projectSessionNote(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectSessionNoteType
+  projectSessionNotes(filters: ProjectSessionNoteFilter): [ProjectSessionNoteType!]!
+  projectSessionVideo(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectSessionVideoType
+  projectSessionVideos(filters: ProjectSessionVideoFilter): [ProjectSessionVideoType!]!
+  projectSessions(filters: ProjectSessionFilter): [ProjectSessionType!]!
+  projectTaskTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): ProjectTaskTemplateType
+  projectTaskTemplates(filters: ProjectTaskTemplateFilter): [ProjectTaskTemplateType!]!
+  projects(filters: ProjectFilter): [ProjectType!]!
+  report(
+    """The ID of the object."""
+    id: ID!
+  ): ReportType
+  reports(filters: ReportFilter): [ReportType!]!
+  revenue(
+    """The ID of the object."""
+    id: ID!
+  ): RevenueType
+  revenues(filters: RevenueFilter): [RevenueType!]!
+  schedule(
+    """The ID of the object."""
+    id: ID!
+  ): ScheduleType
+  schedules(filters: ScheduleFilter): [ScheduleType!]!
+  scope(
+    """The ID of the object."""
+    id: ID!
+  ): ScopeType
+  scopeTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): ScopeTemplateType
+  scopeTemplates(filters: ScopeTemplateFilter): [ScopeTemplateType!]!
+  scopes(filters: ScopeFilter): [ScopeType!]!
+  service(
+    """The ID of the object."""
+    id: ID!
+  ): ServiceType
+  serviceSession(
+    """The ID of the object."""
+    id: ID!
+  ): ServiceSessionType
+  serviceSessionImage(
+    """The ID of the object."""
+    id: ID!
+  ): ServiceSessionImageType
+  serviceSessionImages(filters: ServiceSessionImageFilter): [ServiceSessionImageType!]!
+  serviceSessionNote(
+    """The ID of the object."""
+    id: ID!
+  ): ServiceSessionNoteType
+  serviceSessionNotes(filters: ServiceSessionNoteFilter): [ServiceSessionNoteType!]!
+  serviceSessionVideo(
+    """The ID of the object."""
+    id: ID!
+  ): ServiceSessionVideoType
+  serviceSessionVideos(filters: ServiceSessionVideoFilter): [ServiceSessionVideoType!]!
+  serviceSessions(filters: ServiceSessionFilter): [ServiceSessionType!]!
+  services(filters: ServiceFilter): [ServiceType!]!
+  task(
+    """The ID of the object."""
+    id: ID!
+  ): TaskType
+  taskCompletion(
+    """The ID of the object."""
+    id: ID!
+  ): TaskCompletionType
+  taskCompletions(filters: TaskCompletionFilter): [TaskCompletionType!]!
+  taskTemplate(
+    """The ID of the object."""
+    id: ID!
+  ): TaskTemplateType
+  taskTemplates(filters: TaskTemplateFilter): [TaskTemplateType!]!
+  tasks(filters: TaskFilter): [TaskType!]!
+
+  """
+  Consolidated dashboard data for team member users. Returns services and projects assigned to the requesting user.
+  """
+  teamDashboard(month: String!, teamProfileId: ID!): TeamDashboardData!
+  teamProfile(
+    """The ID of the object."""
+    id: ID!
+  ): TeamProfileType
+  teamProfiles: [TeamProfileType!]!
+
+  """Get unread message count for the authenticated user"""
+  unreadMessageCount: Int!
+}
+
+input RemoveParticipantInput {
+  conversationId: ID!
+  participantId: ID!
+}
+
+"""Report records"""
+input ReportFilter {
+  AND: ReportFilter
+  DISTINCT: Boolean
+  NOT: ReportFilter
+  OR: ReportFilter
+  date: Date
+  id: UUID
+  teamMemberId: UUID
+}
+
+input ReportInput {
+  date: Date!
+  projectIds: [ID!] = null
+  serviceIds: [ID!] = null
+  teamMemberId: ID!
+}
+
+"""Report records"""
+type ReportType implements Node {
+  date: Date!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  laborBreakdown: LaborBreakdown!
+  projects: [ProjectType!]!
+  projectsLaborTotal: Decimal!
+  services: [ServiceType!]!
+  servicesLaborTotal: Decimal!
+  teamMemberId: UUID!
+  totalLaborValue: Decimal!
+}
+
+input ReportUpdateInput {
+  date: Date = null
+  id: ID!
+  projectIds: [ID!] = null
+  serviceIds: [ID!] = null
+  teamMemberId: ID = null
+}
+
+"""Revenue records for accounts"""
+input RevenueFilter {
+  AND: RevenueFilter
+  DISTINCT: Boolean
+  NOT: RevenueFilter
+  OR: RevenueFilter
+  accountId: UUID
+  id: UUID
+}
+
+input RevenueInput {
+  accountId: ID!
+  amount: Float!
+  endDate: Date = null
+  startDate: Date!
+  waveServiceId: String = null
+}
+
+"""Revenue records for accounts"""
+type RevenueType implements Node {
+  accountId: UUID!
+  amount: Decimal!
+  endDate: Date
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  startDate: Date!
+
+  """Wave service ID"""
+  waveServiceId: String
+}
+
+input RevenueUpdateInput {
+  accountId: ID = null
+  amount: Float = null
+  endDate: Date = null
+  id: ID!
+  startDate: Date = null
+  waveServiceId: String = null
+}
+
+input RevertServiceSessionInput {
+  serviceId: ID!
+}
+
+enum RoleChoices {
+  ADMIN
+  TEAM_LEADER
+  TEAM_MEMBER
+}
+
+"""Service schedules for accounts."""
+input ScheduleFilter {
+  AND: ScheduleFilter
+  DISTINCT: Boolean
+  NOT: ScheduleFilter
+  OR: ScheduleFilter
+  accountAddressId: UUID
+  id: UUID
+}
+
+input ScheduleInput {
+  accountAddressId: ID!
+  endDate: Date = null
+  fridayService: Boolean! = false
+  mondayService: Boolean! = false
+  name: String = null
+  saturdayService: Boolean! = false
+  scheduleException: String = null
+  startDate: Date!
+  sundayService: Boolean! = false
+  thursdayService: Boolean! = false
+  tuesdayService: Boolean! = false
+  wednesdayService: Boolean! = false
+  weekendService: Boolean! = false
+}
+
+"""Service schedules for accounts."""
+type ScheduleType implements Node {
+  accountAddressId: UUID
+
+  """Optional date when this schedule expires"""
+  endDate: Date
+  fridayService: Boolean!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  mondayService: Boolean!
+  name: String
+  saturdayService: Boolean!
+
+  """Notes about any exceptions or special requirements for this schedule"""
+  scheduleException: String
+
+  """Date when this schedule becomes active"""
+  startDate: Date!
+  sundayService: Boolean!
+  thursdayService: Boolean!
+  tuesdayService: Boolean!
+  wednesdayService: Boolean!
+
+  """
+  When enabled, represents a single service visit on Friday that can be performed any time between Friday-Sunday and verified by Monday morning. Individual Fri/Sat/Sun service flags must be disabled when this is enabled.
+  """
+  weekendService: Boolean!
+}
+
+input ScheduleUpdateInput {
+  accountAddressId: ID
+  endDate: Date = null
+  fridayService: Boolean = null
+  id: ID!
+  mondayService: Boolean = null
+  name: String = null
+  saturdayService: Boolean = null
+  scheduleException: String = null
+  startDate: Date = null
+  sundayService: Boolean = null
+  thursdayService: Boolean = null
+  tuesdayService: Boolean = null
+  wednesdayService: Boolean = null
+  weekendService: Boolean = null
+}
+
+"""Scope of work definition for an account address"""
+input ScopeFilter {
+  AND: ScopeFilter
+  DISTINCT: Boolean
+  NOT: ScopeFilter
+  OR: ScopeFilter
+  accountAddressId: UUID
+  accountId: UUID
+  id: UUID
+  isActive: Boolean
+  search: String = null
+}
+
+input ScopeInput {
+  accountAddressId: ID = null
+  accountId: ID!
+  description: String! = ""
+  isActive: Boolean! = true
+  name: String!
+}
+
+"""Reusable blueprint for creating a Scope with Areas and Tasks"""
+input ScopeTemplateFilter {
+  AND: ScopeTemplateFilter
+  DISTINCT: Boolean
+  NOT: ScopeTemplateFilter
+  OR: ScopeTemplateFilter
+  id: UUID
+  isActive: Boolean = null
+
+  """Case-insensitive search on name or description"""
+  search: String = null
+}
+
+input ScopeTemplateInput {
+  description: String = null
+  isActive: Boolean = true
+  name: String!
+}
+
+"""Reusable blueprint for creating a Scope with Areas and Tasks"""
+type ScopeTemplateType implements Node {
+  areaTemplates: [AreaTemplateType!]!
+  description: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  name: String!
+}
+
+input ScopeTemplateUpdateInput {
+  description: String = null
+  id: ID!
+  isActive: Boolean = null
+  name: String = null
+}
+
+"""Scope of work definition for an account address"""
+type ScopeType implements Node {
+  accountAddressId: UUID
+  accountId: UUID!
+  areas: [AreaType!]!
+  description: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  isActive: Boolean!
+  name: String!
+}
+
+input ScopeUpdateInput {
+  accountAddressId: ID = null
+  accountId: ID = null
+  description: String = null
+  id: ID!
+  isActive: Boolean = null
+  name: String = null
+}
+
+"""Status choices for a service workflow"""
+enum ServiceChoices {
+  CANCELLED
+  COMPLETED
+  IN_PROGRESS
+  SCHEDULED
+}
+
+input ServiceChoicesFilterLookup {
+  """
+  Case-sensitive containment test. Filter will be skipped on `null` value
+  """
+  contains: ServiceChoices
+
+  """Case-sensitive ends-with. Filter will be skipped on `null` value"""
+  endsWith: ServiceChoices
+
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: ServiceChoices
+
+  """
+  Case-insensitive containment test. Filter will be skipped on `null` value
+  """
+  iContains: ServiceChoices
+
+  """Case-insensitive ends-with. Filter will be skipped on `null` value"""
+  iEndsWith: ServiceChoices
+
+  """Case-insensitive exact match. Filter will be skipped on `null` value"""
+  iExact: ServiceChoices
+
+  """
+  Case-insensitive regular expression match. Filter will be skipped on `null` value
+  """
+  iRegex: ServiceChoices
+
+  """Case-insensitive starts-with. Filter will be skipped on `null` value"""
+  iStartsWith: ServiceChoices
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [ServiceChoices!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+
+  """
+  Case-sensitive regular expression match. Filter will be skipped on `null` value
+  """
+  regex: ServiceChoices
+
+  """Case-sensitive starts-with. Filter will be skipped on `null` value"""
+  startsWith: ServiceChoices
+}
+
+"""Service records for accounts"""
+input ServiceFilter {
+  AND: ServiceFilter
+  DISTINCT: Boolean
+  NOT: ServiceFilter
+  OR: ServiceFilter
+  accountAddressId: UUIDFilterLookup
+  accountId: UUIDFilterLookup
+  date: DateDateFilterLookup
+  id: UUIDFilterLookup
+
+  """Current status of the service"""
+  status: ServiceChoicesFilterLookup
+  teamMembers: DjangoModelFilterInput
+}
+
+input ServiceGenerationInput {
+  accountAddressId: ID!
+  month: Int!
+  scheduleId: ID!
+  year: Int!
+}
+
+input ServiceInput {
+  accountAddressId: ID!
+  accountId: ID = null
+  calendarEventId: String = null
+  date: Date!
+  notes: String = null
+  status: String!
+  teamMemberIds: [ID!] = null
+}
+
+"""Service session records"""
+input ServiceSessionFilter {
+  AND: ServiceSessionFilter
+  DISTINCT: Boolean
+  NOT: ServiceSessionFilter
+  OR: ServiceSessionFilter
+  accountAddressId: UUIDFilterLookup
+  createdById: UUIDFilterLookup
+  end: DatetimeDatetimeFilterLookup
+  id: UUIDFilterLookup
+
+  """A session is active if it has not been closed."""
+  isActive: Boolean = null
+  serviceId: UUIDFilterLookup
+  start: DatetimeDatetimeFilterLookup
+  teamMemberId: String
+}
+
+"""
+ServiceSessionImage(id, created_at, updated_at, title, content_type, width, height, uploaded_by_team_profile, notes, internal, service_session, image, thumbnail)
+"""
+input ServiceSessionImageFilter {
+  AND: ServiceSessionImageFilter
+  DISTINCT: Boolean
+  NOT: ServiceSessionImageFilter
+  OR: ServiceSessionImageFilter
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+  serviceSessionId: UUID
+  titleContains: String = null
+  uploadedByTeamProfileId: UUID
+}
+
+"""
+ServiceSessionImage(id, created_at, updated_at, title, content_type, width, height, uploaded_by_team_profile, notes, internal, service_session, image, thumbnail)
+"""
+type ServiceSessionImageType implements Node {
+  contentType: String!
+  createdAt: DateTime!
+  height: Int!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  image: DjangoImageType!
+  internal: Boolean!
+  notes: String!
+  serviceSessionId: UUID!
+  thumbnail: DjangoImageType
+  title: String!
+  uploadedByTeamProfileId: UUID
+  width: Int!
+}
+
+input ServiceSessionImageUpdateInput {
+  id: ID!
+  internal: Boolean = null
+  notes: String = null
+  title: String = null
+}
+
+"""Notes attached to service sessions"""
+input ServiceSessionNoteFilter {
+  AND: ServiceSessionNoteFilter
+  DISTINCT: Boolean
+  NOT: ServiceSessionNoteFilter
+  OR: ServiceSessionNoteFilter
+  authorId: UUID
+  contentContains: String = null
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean
+  sessionId: UUID
+}
+
+input ServiceSessionNoteInput {
+  authorId: ID = null
+  content: String!
+  internal: Boolean! = true
+  sessionId: ID!
+}
+
+"""Notes attached to service sessions"""
+type ServiceSessionNoteType implements Node {
+  authorId: UUID
+  content: String!
+  createdAt: DateTime!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Internal notes are only visible to team members, not customers"""
+  internal: Boolean!
+  sessionId: UUID!
+  updatedAt: DateTime!
+}
+
+input ServiceSessionNoteUpdateInput {
+  authorId: ID = null
+  content: String = null
+  id: ID!
+  internal: Boolean = null
+}
+
+"""Service session records"""
+type ServiceSessionType implements Node {
+  accountAddressId: UUID!
+  accountId: UUID!
+  completedTasks: [TaskCompletionType!]!
+  customerId: UUID!
+  durationSeconds: Int!
+  end: DateTime
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """A session is active if it has not been closed."""
+  isActive: Boolean!
+  notes: [ServiceSessionNoteType!]!
+  photos: [ServiceSessionImageType!]!
+  scopeId: UUID!
+  serviceId: UUID!
+  start: DateTime!
+  videos: [ServiceSessionVideoType!]!
+}
+
+"""Video attached to a ServiceSession for documentation."""
+input ServiceSessionVideoFilter {
+  AND: ServiceSessionVideoFilter
+  DISTINCT: Boolean
+  NOT: ServiceSessionVideoFilter
+  OR: ServiceSessionVideoFilter
+  createdAfter: DateTime = null
+  createdBefore: DateTime = null
+  id: UUID
+  internal: Boolean
+  maxDuration: Int = null
+  minDuration: Int = null
+  serviceSessionId: UUID
+  titleContains: String = null
+  uploadedByTeamProfileId: UUID
+}
+
+"""Video attached to a ServiceSession for documentation."""
+type ServiceSessionVideoType implements Node {
+  contentType: String!
+  createdAt: DateTime!
+
+  """Video duration in seconds"""
+  durationSeconds: Int!
+
+  """File size in bytes"""
+  fileSizeBytes: Int!
+  height: Int!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  internal: Boolean!
+  notes: String!
+  serviceSessionId: UUID!
+  thumbnail: DjangoImageType
+  title: String!
+  uploadedByTeamProfileId: UUID
+  video: DjangoFileType!
+  width: Int!
+}
+
+input ServiceSessionVideoUpdateInput {
+  id: ID!
+  internal: Boolean = null
+  notes: String = null
+  title: String = null
+}
+
+"""Service records for accounts"""
+type ServiceType implements Node {
+  accountAddressId: UUID
+  accountId: UUID
+
+  """External calendar event ID"""
+  calendarEventId: String
+  date: Date!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  notes: String
+
+  """Current status of the service"""
+  status: ServiceChoices!
+  teamMembers: [DjangoModelType!]!
+}
+
+"""A connection to a list of items."""
+type ServiceTypeCursorConnection {
+  """Contains the nodes in this connection"""
+  edges: [ServiceTypeCursorEdge!]!
+
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Total quantity of existing nodes."""
+  totalCount: Int!
+}
+
+"""An edge in a connection."""
+type ServiceTypeCursorEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: ServiceType!
+}
+
+input ServiceUpdateInput {
+  accountAddressId: ID = null
+  accountId: ID = null
+  calendarEventId: String = null
+  date: Date = null
+  id: ID!
+  notes: String = null
+  status: String = null
+  teamMemberIds: [ID!] = null
+}
+
+"""Status choices for a Customer, Account, or a future model"""
+enum StatusChoices {
+  ACTIVE
+  INACTIVE
+  PENDING
+}
+
+type Subscription {
+  """Subscribe to account address creation events"""
+  accountAddressCreated: AccountAddressType!
+
+  """Subscribe to account address deletion events"""
+  accountAddressDeleted: ID!
+
+  """Subscribe to account address updates"""
+  accountAddressUpdated: AccountAddressType!
+
+  """Subscribe to account contact creation events"""
+  accountContactCreated: AccountContactType!
+
+  """Subscribe to account contact deletion events"""
+  accountContactDeleted: ID!
+
+  """Subscribe to account contact updates"""
+  accountContactUpdated: AccountContactType!
+
+  """Subscribe to account creation events"""
+  accountCreated: AccountType!
+
+  """Subscribe to account deletion events"""
+  accountDeleted: ID!
+
+  """Subscribe to account punchlist creation events"""
+  accountPunchlistCreated: AccountPunchlistType!
+
+  """Subscribe to account punchlist deletion events"""
+  accountPunchlistDeleted: ID!
+
+  """Subscribe to account punchlist updates"""
+  accountPunchlistUpdated: AccountPunchlistType!
+
+  """Subscribe to account updates"""
+  accountUpdated: AccountType!
+
+  """Subscribe to area creation events"""
+  areaCreated: AreaType!
+
+  """Subscribe to area deletion events"""
+  areaDeleted: ID!
+
+  """Subscribe to area template creation events"""
+  areaTemplateCreated: AreaTemplateType!
+
+  """Subscribe to area template deletion events"""
+  areaTemplateDeleted: ID!
+
+  """Subscribe to area template updates"""
+  areaTemplateUpdated: AreaTemplateType!
+
+  """Subscribe to area updates"""
+  areaUpdated: AreaType!
+
+  """Subscribe to new conversations"""
+  conversationCreated: ConversationType!
+
+  """Subscribe to conversation deletion events"""
+  conversationDeleted: ID!
+
+  """Subscribe to conversation read events"""
+  conversationRead(conversationId: ID!): ConversationType!
+
+  """Subscribe to conversation updates"""
+  conversationUpdated: ConversationType!
+
+  """Subscribe to customer address creation events"""
+  customerAddressCreated: CustomerAddressType!
+
+  """Subscribe to customer address deletion events"""
+  customerAddressDeleted: ID!
+
+  """Subscribe to customer address updates"""
+  customerAddressUpdated: CustomerAddressType!
+
+  """Subscribe to customer contact creation events"""
+  customerContactCreated: CustomerContactType!
+
+  """Subscribe to customer contact deletion events"""
+  customerContactDeleted: ID!
+
+  """Subscribe to customer contact updates"""
+  customerContactUpdated: CustomerContactType!
+
+  """Subscribe to customer creation events"""
+  customerCreated: CustomerType!
+
+  """Subscribe to customer deletion events"""
+  customerDeleted: ID!
+
+  """Subscribe to customer profile creation events"""
+  customerProfileCreated: CustomerProfileType!
+
+  """Subscribe to customer profile deletion events"""
+  customerProfileDeleted: ID!
+
+  """Subscribe to customer profile updates"""
+  customerProfileUpdated: CustomerProfileType!
+
+  """Subscribe to customer updates"""
+  customerUpdated: CustomerType!
+
+  """Subscribe to hungry howies punchlist creation events"""
+  hhPunchlistCreated: HungryHowiesPunchlistType!
+
+  """Subscribe to hungry howies punchlist deletion events"""
+  hhPunchlistDeleted: ID!
+
+  """Subscribe to hungry howies punchlist updates"""
+  hhPunchlistUpdated: HungryHowiesPunchlistType!
+
+  """Subscribe to invoice creation events"""
+  invoiceCreated: InvoiceType!
+
+  """Subscribe to invoice deletion events"""
+  invoiceDeleted: ID!
+
+  """Subscribe to invoice updates"""
+  invoiceUpdated: InvoiceType!
+
+  """Subscribe to labor creation events"""
+  laborCreated: LaborType!
+
+  """Subscribe to labor deletion events"""
+  laborDeleted: ID!
+
+  """Subscribe to labor updates"""
+  laborUpdated: LaborType!
+
+  """Subscribe to message deletion events"""
+  messageDeleted(conversationId: ID!): ID!
+
+  """Subscribe to new messages across all conversations"""
+  messageReceived: MessageType!
+
+  """Subscribe to new messages in a specific conversation"""
+  messageSent(conversationId: ID!): MessageType!
+
+  """Subscribe to participant changes"""
+  participantAdded(conversationId: ID!): ConversationType!
+
+  """Subscribe to project area template creation events"""
+  projectAreaTemplateCreated: ProjectAreaTemplateType!
+
+  """Subscribe to project area template deletion events"""
+  projectAreaTemplateDeleted: ID!
+
+  """Subscribe to project area template updates"""
+  projectAreaTemplateUpdated: ProjectAreaTemplateType!
+
+  """Subscribe to project creation events"""
+  projectCreated: ProjectType!
+
+  """Subscribe to project deletion events"""
+  projectDeleted: ID!
+
+  """Subscribe to project punchlist creation events"""
+  projectPunchlistCreated: ProjectPunchlistType!
+
+  """Subscribe to project punchlist deletion events"""
+  projectPunchlistDeleted: ID!
+
+  """Subscribe to project punchlist updates"""
+  projectPunchlistUpdated: ProjectPunchlistType!
+
+  """Subscribe to project scope category creation events"""
+  projectScopeCategoryCreated: ProjectScopeCategoryType!
+
+  """Subscribe to project scope category deletion events"""
+  projectScopeCategoryDeleted: ID!
+
+  """Subscribe to project scope category updates"""
+  projectScopeCategoryUpdated: ProjectScopeCategoryType!
+
+  """Subscribe to project scope creation events"""
+  projectScopeCreated: ProjectScopeType!
+
+  """Subscribe to project scope deletion events"""
+  projectScopeDeleted: ID!
+
+  """Subscribe to project scope task creation events"""
+  projectScopeTaskCreated: ProjectScopeTaskType!
+
+  """Subscribe to project scope task deletion events"""
+  projectScopeTaskDeleted: ID!
+
+  """Subscribe to project scope task updates"""
+  projectScopeTaskUpdated: ProjectScopeTaskType!
+
+  """Subscribe to project scope template creation events"""
+  projectScopeTemplateCreated: ProjectScopeTemplateType!
+
+  """Subscribe to project scope template deletion events"""
+  projectScopeTemplateDeleted: ID!
+
+  """Subscribe to project scope template updates"""
+  projectScopeTemplateUpdated: ProjectScopeTemplateType!
+
+  """Subscribe to project scope updates"""
+  projectScopeUpdated: ProjectScopeType!
+
+  """Subscribe to project task template creation events"""
+  projectTaskTemplateCreated: ProjectTaskTemplateType!
+
+  """Subscribe to project task template deletion events"""
+  projectTaskTemplateDeleted: ID!
+
+  """Subscribe to project task template updates"""
+  projectTaskTemplateUpdated: ProjectTaskTemplateType!
+
+  """Subscribe to project updates"""
+  projectUpdated: ProjectType!
+
+  """Subscribe to report creation events"""
+  reportCreated: ReportType!
+
+  """Subscribe to report deletion events"""
+  reportDeleted: ID!
+
+  """Subscribe to report updates"""
+  reportUpdated: ReportType!
+
+  """Subscribe to revenue creation events"""
+  revenueCreated: RevenueType!
+
+  """Subscribe to revenue deletion events"""
+  revenueDeleted: ID!
+
+  """Subscribe to revenue updates"""
+  revenueUpdated: RevenueType!
+
+  """Subscribe to schedule creation events"""
+  scheduleCreated: ScheduleType!
+
+  """Subscribe to schedule deletion events"""
+  scheduleDeleted: ID!
+
+  """Subscribe to schedule updates"""
+  scheduleUpdated: ScheduleType!
+
+  """Subscribe to scope creation events"""
+  scopeCreated: ScopeType!
+
+  """Subscribe to scopes created from a template"""
+  scopeCreatedFromTemplate: ScopeType!
+
+  """Subscribe to scope deletion events"""
+  scopeDeleted: ID!
+
+  """Subscribe to scope template creation events"""
+  scopeTemplateCreated: ScopeTemplateType!
+
+  """Subscribe to scope template deletion events"""
+  scopeTemplateDeleted: ID!
+
+  """Subscribe to scope template updates"""
+  scopeTemplateUpdated: ScopeTemplateType!
+
+  """Subscribe to scope updates"""
+  scopeUpdated: ScopeType!
+
+  """Subscribe to service visit creation events"""
+  serviceCreated: ServiceType!
+
+  """Subscribe to service visit deletion events"""
+  serviceDeleted: ID!
+
+  """Subscribe to service visit updates"""
+  serviceUpdated: ServiceType!
+
+  """Subscribe to task completion creation events"""
+  taskCompletionCreated: TaskCompletionType!
+
+  """Subscribe to task completion deletion events"""
+  taskCompletionDeleted: ID!
+
+  """Subscribe to task completion updates"""
+  taskCompletionUpdated: TaskCompletionType!
+
+  """Subscribe to task creation events"""
+  taskCreated: TaskType!
+
+  """Subscribe to task deletion events"""
+  taskDeleted: ID!
+
+  """Subscribe to task template creation events"""
+  taskTemplateCreated: TaskTemplateType!
+
+  """Subscribe to task template deletion events"""
+  taskTemplateDeleted: ID!
+
+  """Subscribe to task template updates"""
+  taskTemplateUpdated: TaskTemplateType!
+
+  """Subscribe to task updates"""
+  taskUpdated: TaskType!
+
+  """Subscribe to team profile creation events"""
+  teamProfileCreated: TeamProfileType!
+
+  """Subscribe to team profile deletion events"""
+  teamProfileDeleted: ID!
+
+  """Subscribe to team profile updates"""
+  teamProfileUpdated: TeamProfileType!
+}
+
+"""Record of a task template being completed during a service visit"""
+input TaskCompletionFilter {
+  AND: TaskCompletionFilter
+  DISTINCT: Boolean
+  NOT: TaskCompletionFilter
+  OR: TaskCompletionFilter
+  completedById: UUID
+  id: UUID
+  month: Int
+  serviceId: UUID
+  taskId: UUID
+  year: Int
+}
+
+input TaskCompletionInput {
+  completedAt: DateTime!
+  completedById: ID!
+  notes: String! = ""
+  serviceId: ID!
+  taskId: ID!
+}
+
+"""Record of a task template being completed during a service visit"""
+type TaskCompletionType implements Node {
+  accountAddressId: UUID
+  completedAt: DateTime!
+  completedById: UUID!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  month: Int!
+  notes: String!
+  serviceId: UUID!
+  taskId: UUID!
+  year: Int!
+}
+
+input TaskCompletionUpdateInput {
+  completedAt: DateTime = null
+  completedById: ID = null
+  id: ID!
+  notes: String = null
+  serviceId: ID = null
+  taskId: ID = null
+}
+
+"""Individual task template within an area"""
+input TaskFilter {
+  AND: TaskFilter
+  DISTINCT: Boolean
+  NOT: TaskFilter
+  OR: TaskFilter
+  areaId: UUID
+
+  """How often the task should be performed"""
+  frequency: TaskFrequencyChoices
+  id: UUID
+}
+
+enum TaskFrequencyChoices {
+  ANNUAL
+  AS_NEEDED
+  DAILY
+  MONTHLY
+  QUARTERLY
+  TRIANNUAL
+  WEEKLY
+}
+
+input TaskInput {
+  areaId: ID!
+  checklistDescription: String = null
+  description: String!
+  estimatedMinutes: Int = null
+  frequency: String!
+  isConditional: Boolean! = false
+  order: Int! = 0
+}
+
+"""Reusable task definition belonging to an AreaTemplate"""
+input TaskTemplateFilter {
+  AND: TaskTemplateFilter
+  DISTINCT: Boolean
+  NOT: TaskTemplateFilter
+  OR: TaskTemplateFilter
+  areaTemplateId: UUID
+
+  """Case-insensitive search on description"""
+  descriptionSearch: String = null
+
+  """How often the task should be performed"""
+  frequency: String = null
+  id: UUID
+
+  """Task marked 'where applicable'"""
+  isConditional: Boolean = null
+}
+
+input TaskTemplateInput {
+  areaTemplateId: ID!
+  checklistDescription: String = null
+  description: String!
+  estimatedMinutes: Int = null
+  frequency: String!
+  isConditional: Boolean = false
+  order: Int = 0
+}
+
+"""Reusable task definition belonging to an AreaTemplate"""
+type TaskTemplateType implements Node {
+  areaTemplateId: UUID!
+  checklistDescription: String!
+  description: String!
+  estimatedMinutes: Int
+
+  """How often the task should be performed"""
+  frequency: TaskFrequencyChoices!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Task marked 'where applicable'"""
+  isConditional: Boolean!
+  order: Int!
+}
+
+input TaskTemplateUpdateInput {
+  checklistDescription: String = null
+  description: String = null
+  estimatedMinutes: Int = null
+  frequency: String = null
+  id: ID!
+  isConditional: Boolean = null
+  order: Int = null
+}
+
+"""Individual task template within an area"""
+type TaskType implements Node {
+  areaId: UUID!
+  checklistDescription: String!
+  description: String!
+  estimatedMinutes: Int
+
+  """How often the task should be performed"""
+  frequency: TaskFrequencyChoices!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+
+  """Task marked 'where applicable'"""
+  isConditional: Boolean!
+  order: Int!
+}
+
+input TaskUpdateInput {
+  areaId: ID = null
+  checklistDescription: String = null
+  description: String = null
+  estimatedMinutes: Int = null
+  frequency: String = null
+  id: ID!
+  isConditional: Boolean = null
+  order: Int = null
+}
+
+type TeamDashboardData {
+  projects: [ProjectType!]!
+  reports: [ReportType!]!
+  services: [ServiceType!]!
+}
+
+input TeamProfileInput {
+  email: String = null
+  firstName: String!
+  lastName: String!
+  notes: String = null
+  phone: String = null
+  role: String!
+  status: String! = "PENDING"
+  userId: ID = null
+}
+
+"""Internal team member accounts"""
+type TeamProfileType implements Node {
+  email: String
+  firstName: String!
+  fullName: String!
+
+  """The Globally Unique ID of this object"""
+  id: ID!
+  lastName: String!
+  notes: String!
+
+  """Unique identifier from Ory Kratos authentication system"""
+  oryKratosId: String
+  phone: String
+
+  """Role of the team member"""
+  role: RoleChoices!
+
+  """Current status of the profile"""
+  status: StatusChoices!
+}
+
+input TeamProfileUpdateInput {
+  email: String = null
+  firstName: String = null
+  id: ID!
+  lastName: String = null
+  notes: String = null
+  phone: String = null
+  role: String = null
+  status: String = null
+  userId: ID = null
+}
+
+scalar UUID
+
+input UUIDFilterLookup {
+  """
+  Case-sensitive containment test. Filter will be skipped on `null` value
+  """
+  contains: UUID
+
+  """Case-sensitive ends-with. Filter will be skipped on `null` value"""
+  endsWith: UUID
+
+  """Exact match. Filter will be skipped on `null` value"""
+  exact: UUID
+
+  """
+  Case-insensitive containment test. Filter will be skipped on `null` value
+  """
+  iContains: UUID
+
+  """Case-insensitive ends-with. Filter will be skipped on `null` value"""
+  iEndsWith: UUID
+
+  """Case-insensitive exact match. Filter will be skipped on `null` value"""
+  iExact: UUID
+
+  """
+  Case-insensitive regular expression match. Filter will be skipped on `null` value
+  """
+  iRegex: UUID
+
+  """Case-insensitive starts-with. Filter will be skipped on `null` value"""
+  iStartsWith: UUID
+
+  """
+  Exact match of items in a given list. Filter will be skipped on `null` value
+  """
+  inList: [UUID!]
+
+  """Assignment test. Filter will be skipped on `null` value"""
+  isNull: Boolean
+
+  """
+  Case-sensitive regular expression match. Filter will be skipped on `null` value
+  """
+  regex: UUID
+
+  """Case-sensitive starts-with. Filter will be skipped on `null` value"""
+  startsWith: UUID
+}
+
+scalar Upload
\ No newline at end of file
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..d50f880
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,9 @@
+declare global {
+	namespace App {
+		interface Locals {
+			cookie: string | null;
+		}
+	}
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..99d82b9
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Nexus</title>
+		<script>
+			(function () {
+				const stored = localStorage.getItem('theme-preference');
+				const theme =
+					stored === 'light' || stored === 'dark'
+						? stored
+						: stored === 'system' || !stored
+							? window.matchMedia('(prefers-color-scheme: dark)').matches
+								? 'dark'
+								: 'light'
+							: 'light';
+				document.documentElement.classList.add(theme);
+			})();
+		</script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
new file mode 100644
index 0000000..1466898
--- /dev/null
+++ b/src/hooks.server.ts
@@ -0,0 +1,8 @@
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const cookie = event.cookies.get('ory_kratos_session');
+	event.locals.cookie = cookie ? `ory_kratos_session=${cookie}` : null;
+
+	return resolve(event);
+};
diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
new file mode 100644
index 0000000..cc5dc66
--- /dev/null
+++ b/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/lib/assets/floors.jpg b/src/lib/assets/floors.jpg
new file mode 100644
index 0000000..a1fe338
Binary files /dev/null and b/src/lib/assets/floors.jpg differ
diff --git a/src/lib/assets/hero.jpg b/src/lib/assets/hero.jpg
new file mode 100644
index 0000000..986fa6e
Binary files /dev/null and b/src/lib/assets/hero.jpg differ
diff --git a/src/lib/assets/hh-ceilings.jpg b/src/lib/assets/hh-ceilings.jpg
new file mode 100644
index 0000000..feb04e1
Binary files /dev/null and b/src/lib/assets/hh-ceilings.jpg differ
diff --git a/src/lib/assets/hh-equipment.jpg b/src/lib/assets/hh-equipment.jpg
new file mode 100644
index 0000000..5ee48ba
Binary files /dev/null and b/src/lib/assets/hh-equipment.jpg differ
diff --git a/src/lib/assets/hh-walls.jpg b/src/lib/assets/hh-walls.jpg
new file mode 100644
index 0000000..e9b2841
Binary files /dev/null and b/src/lib/assets/hh-walls.jpg differ
diff --git a/src/lib/assets/kitchens.jpg b/src/lib/assets/kitchens.jpg
new file mode 100644
index 0000000..6016324
Binary files /dev/null and b/src/lib/assets/kitchens.jpg differ
diff --git a/src/lib/assets/logo-icon.png b/src/lib/assets/logo-icon.png
new file mode 100644
index 0000000..dbeff20
Binary files /dev/null and b/src/lib/assets/logo-icon.png differ
diff --git a/src/lib/components/BusinessFooter.svelte b/src/lib/components/BusinessFooter.svelte
new file mode 100644
index 0000000..c972b7e
--- /dev/null
+++ b/src/lib/components/BusinessFooter.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	const currentYear = new Date().getFullYear();
+
+	const footerLinks = {
+		services: [
+			{ label: 'Our Services', href: '/services' },
+			{ label: 'Our Standard', href: '/standard' },
+			{ label: 'Pricing', href: '/pricing' }
+		],
+		company: [
+			{ label: 'About', href: '/about' },
+			{ label: 'Contact', href: '/contact' },
+			{ label: 'Terms of Use', href: '/terms' },
+			{ label: 'Privacy Policy', href: '/privacy' }
+		]
+	};
+</script>
+
+<footer class="border-t border-theme bg-theme-card">
+	<div class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
+			<!-- Brand -->
+			<div>
+				<a href="/" class="text-xl font-bold text-theme">Nexus Cleaning</a>
+				<p class="mt-2 text-sm text-theme-muted">
+					Dependable commercial cleaning services for businesses that demand excellence.
+				</p>
+			</div>
+
+			<!-- Services -->
+			<div>
+				<h3 class="text-sm font-semibold tracking-wider text-theme uppercase">Services</h3>
+				<ul class="mt-4 space-y-2">
+					{#each footerLinks.services as link (link.href)}
+						<li>
+							<a
+								href={link.href}
+								class="text-sm text-theme-secondary transition-colors hover:text-theme"
+							>
+								{link.label}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+
+			<!-- Company -->
+			<div>
+				<h3 class="text-sm font-semibold tracking-wider text-theme uppercase">Company</h3>
+				<ul class="mt-4 space-y-2">
+					{#each footerLinks.company as link (link.href)}
+						<li>
+							<a
+								href={link.href}
+								class="text-sm text-theme-secondary transition-colors hover:text-theme"
+							>
+								{link.label}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+
+		<!-- Bottom bar -->
+		<div class="mt-12 border-t border-theme pt-8 text-center">
+			<p class="text-sm text-theme-muted">
+				&copy; {currentYear} Corellon Digital. All rights reserved.
+			</p>
+		</div>
+	</div>
+</footer>
diff --git a/src/lib/components/PublicBackLink.svelte b/src/lib/components/PublicBackLink.svelte
new file mode 100644
index 0000000..0c75a4e
--- /dev/null
+++ b/src/lib/components/PublicBackLink.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	interface Props {
+		href?: string;
+		label?: string;
+		class?: string;
+	}
+
+	let { href = '/', label = 'Home', class: className = '' }: Props = $props();
+</script>
+
+<a
+	{href}
+	class="inline-flex items-center gap-1 text-sm text-theme-muted transition-colors hover:text-theme {className}"
+>
+	<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+	</svg>
+	{label}
+</a>
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
new file mode 100644
index 0000000..952d773
--- /dev/null
+++ b/src/lib/components/ThemeToggle.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { theme } from '$lib/stores/theme.svelte';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={() => theme.toggle()}
+	class="relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-theme
+		bg-theme-card text-theme-secondary transition-colors duration-200
+		hover:bg-theme-secondary hover:text-theme {className}"
+	aria-label={theme.isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+>
+	{#if theme.isDark}
+		<!-- Sun icon for dark mode (click to go light) -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			style="fill: none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="h-5 w-5"
+		>
+			<circle cx="12" cy="12" r="4" />
+			<path d="M12 2v2" />
+			<path d="M12 20v2" />
+			<path d="m4.93 4.93 1.41 1.41" />
+			<path d="m17.66 17.66 1.41 1.41" />
+			<path d="M2 12h2" />
+			<path d="M20 12h2" />
+			<path d="m6.34 17.66-1.41 1.41" />
+			<path d="m19.07 4.93-1.41 1.41" />
+		</svg>
+	{:else}
+		<!-- Moon icon for light mode (click to go dark) -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			style="fill: none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="h-5 w-5"
+		>
+			<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+		</svg>
+	{/if}
+</button>
diff --git a/src/lib/components/admin/AdminDashboardHeader.svelte b/src/lib/components/admin/AdminDashboardHeader.svelte
new file mode 100644
index 0000000..2fee9de
--- /dev/null
+++ b/src/lib/components/admin/AdminDashboardHeader.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import { goto, beforeNavigate } from '$app/navigation';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		subtitleSnippet?: Snippet<[{ toggleMenu: () => void }]>;
+		showBackButton?: boolean;
+		backHref?: string;
+		invalidateOnBack?: boolean;
+	}
+
+	let {
+		title,
+		subtitle,
+		subtitleSnippet,
+		showBackButton = true,
+		backHref = '/admin',
+		invalidateOnBack = false
+	}: Props = $props();
+
+	let menuOpen = $state(false);
+	let isNavigatingBack = $state(false);
+
+	// Track when we're navigating to the back URL
+	beforeNavigate(({ to }) => {
+		if (to?.url.pathname === backHref) {
+			isNavigatingBack = true;
+		}
+	});
+
+	function handleBack(event: MouseEvent) {
+		if (invalidateOnBack) {
+			event.preventDefault();
+			goto(backHref, { invalidateAll: true });
+		}
+	}
+
+	function toggleMenu() {
+		menuOpen = !menuOpen;
+	}
+
+	const navItems = [
+		{
+			label: 'Customers',
+			href: '/admin/customers',
+			color: 'text-accent3-600 dark:text-accent3-400'
+		},
+		{ label: 'Accounts', href: '/admin/accounts', color: 'text-primary-600 dark:text-primary-400' },
+		{
+			label: 'Services',
+			href: '/admin/services',
+			color: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{ label: 'Projects', href: '/admin/projects', color: 'text-accent-600 dark:text-accent-400' },
+		{ label: 'Scopes', href: '/admin/scopes', color: 'text-accent3-600 dark:text-accent3-400' },
+		{ label: 'Reports', href: '/admin/reports', color: 'text-accent2-600 dark:text-accent2-400' },
+		{ label: 'Invoices', href: '/admin/invoices', color: 'text-accent6-600 dark:text-accent6-400' },
+		{ label: 'Calendar', href: '/admin/calendar', color: 'text-accent7-600 dark:text-accent7-400' },
+		{ label: 'Profiles', href: '/admin/profiles', color: 'text-accent4-600 dark:text-accent4-400' }
+	];
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.nav-menu-container') && !target.closest('.menu-trigger')) {
+			menuOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			menuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="mb-6">
+	{#if showBackButton}
+		<!-- 3-column grid: back button | content | spacer for centering -->
+		<div class="grid grid-cols-[auto_1fr_auto] items-start gap-4">
+			<a
+				href={backHref}
+				onclick={handleBack}
+				class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Go back"
+			>
+				{#if isNavigatingBack}
+					<svg
+						class="h-5 w-5 animate-spin text-primary-600 dark:text-primary-400"
+						style="fill: none"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{:else}
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				{/if}
+			</a>
+			<div>
+				<div class="flex items-center gap-2">
+					<h1 class="page-title text-primary-600 dark:text-primary-400">{title}</h1>
+					<div class="nav-menu-container relative">
+						<button
+							type="button"
+							onclick={() => (menuOpen = !menuOpen)}
+							class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+							aria-label="Navigation menu"
+							aria-expanded={menuOpen}
+						>
+							<svg
+								class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 5l7 7-7 7"
+								/>
+							</svg>
+						</button>
+
+						{#if menuOpen}
+							<div
+								class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+							>
+								{#each navItems as item (item.href)}
+									<a
+										href={item.href}
+										class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+										item.href
+											? 'font-semibold'
+											: ''}"
+										onclick={() => (menuOpen = false)}
+									>
+										{item.label}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+				{#if subtitleSnippet}
+					<p class="page-subtitle">
+						{@render subtitleSnippet({ toggleMenu })}
+					</p>
+				{:else if subtitle}
+					<p class="page-subtitle">{subtitle}</p>
+				{/if}
+			</div>
+			<!-- Spacer to balance the back button and center the content -->
+			<div class="w-7"></div>
+		</div>
+	{:else}
+		<!-- No back button - simple layout -->
+		<div class="flex items-center gap-2">
+			<h1 class="page-title text-primary-600 dark:text-primary-400">{title}</h1>
+			<div class="nav-menu-container relative">
+				<button
+					type="button"
+					onclick={() => (menuOpen = !menuOpen)}
+					class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Navigation menu"
+					aria-expanded={menuOpen}
+				>
+					<svg
+						class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7"
+						/>
+					</svg>
+				</button>
+
+				{#if menuOpen}
+					<div
+						class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+					>
+						{#each navItems as item (item.href)}
+							<a
+								href={item.href}
+								class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+								item.href
+									? 'font-semibold'
+									: ''}"
+								onclick={() => (menuOpen = false)}
+							>
+								{item.label}
+							</a>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+		{#if subtitleSnippet}
+			<p class="page-subtitle">
+				{@render subtitleSnippet({ toggleMenu })}
+			</p>
+		{:else if subtitle}
+			<p class="page-subtitle">{subtitle}</p>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/admin/AdminListLayout.svelte b/src/lib/components/admin/AdminListLayout.svelte
new file mode 100644
index 0000000..8b3b389
--- /dev/null
+++ b/src/lib/components/admin/AdminListLayout.svelte
@@ -0,0 +1,282 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import { navigating } from '$app/state';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import StatusTabs from '$lib/components/team/StatusTabs.svelte';
+
+	interface Props {
+		title: string;
+		subtitle: string;
+		items: T[];
+		currentStatus: string;
+		currentMonth: string;
+		counts?: {
+			scheduled: number;
+			inProgress: number;
+			completed: number;
+		};
+		item: Snippet<[T]>;
+		emptyIcon?: Snippet;
+		emptyTitle?: string;
+		emptyText?: string;
+		colorScheme?:
+			| 'primary'
+			| 'secondary'
+			| 'accent'
+			| 'accent2'
+			| 'accent3'
+			| 'accent6'
+			| 'accent7';
+		// Admin-specific props
+		searchQuery?: string;
+		onSearchChange?: (query: string) => void;
+		searchPlaceholder?: string;
+		createButtonText?: string;
+		onCreateClick?: () => void;
+		emptyAction?: Snippet;
+		headerActions?: Snippet;
+		backHref?: string;
+	}
+
+	let {
+		title,
+		subtitle,
+		items,
+		currentStatus,
+		currentMonth,
+		counts,
+		item,
+		emptyIcon,
+		emptyTitle = 'No items found',
+		emptyText = 'There are no items matching your current filters.',
+		colorScheme = 'primary',
+		searchQuery = '',
+		onSearchChange,
+		searchPlaceholder = 'Search...',
+		createButtonText,
+		onCreateClick,
+		emptyAction,
+		headerActions,
+		backHref = '/admin'
+	}: Props = $props();
+
+	let hasItems = $derived(items.length > 0);
+	let isLoading = $derived(navigating.to !== null);
+
+	const colorClasses: Record<string, string> = {
+		primary: 'text-primary-600 dark:text-primary-400',
+		secondary: 'text-secondary-600 dark:text-secondary-400',
+		accent: 'text-accent-600 dark:text-accent-400',
+		accent2: 'text-accent2-600 dark:text-accent2-400',
+		accent3: 'text-accent3-600 dark:text-accent3-400',
+		accent6: 'text-accent6-600 dark:text-accent6-400',
+		accent7: 'text-accent7-600 dark:text-accent7-400'
+	};
+
+	function handleSearchInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		onSearchChange?.(target.value);
+	}
+</script>
+
+<svelte:head>
+	<title>{title} - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href={backHref}
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold md:text-3xl {colorClasses[colorScheme]}">{title}</h1>
+						<p class="mt-2 text-theme-secondary">{subtitle}</p>
+					</div>
+				</div>
+				<div class="hidden items-center gap-2 sm:flex">
+					{#if headerActions}
+						{@render headerActions()}
+					{/if}
+					{#if createButtonText && onCreateClick}
+						<button
+							type="button"
+							onclick={onCreateClick}
+							class="inline-flex shrink-0 items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 whitespace-nowrap text-white transition-colors hover:bg-primary-600"
+						>
+							<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							<span>{createButtonText}</span>
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<!-- Filters Row -->
+		<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<MonthSelector value={currentMonth} />
+			<div class="sm:hidden">
+				<StatusTabs current={currentStatus} {counts} compact />
+			</div>
+		</div>
+
+		<!-- Mobile Header Actions -->
+		{#if headerActions}
+			<div class="mb-6 flex flex-wrap items-center gap-2 sm:hidden">
+				{@render headerActions()}
+			</div>
+		{/if}
+
+		<!-- Desktop Tabs -->
+		<div class="mb-6 hidden sm:block">
+			<StatusTabs current={currentStatus} {counts} />
+		</div>
+
+		<!-- Search -->
+		{#if onSearchChange}
+			<div class="mb-6">
+				<div class="relative">
+					<svg
+						class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<input
+						type="text"
+						value={searchQuery}
+						oninput={handleSearchInput}
+						placeholder={searchPlaceholder}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+					/>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Content -->
+		<div role="tabpanel" id="{currentStatus}-panel" class="relative">
+			{#if isLoading}
+				<!-- Loading Overlay -->
+				<div
+					class="bg-theme/50 absolute inset-0 z-10 flex min-h-[200px] items-start justify-center pt-12 backdrop-blur-sm"
+				>
+					<div class="flex flex-col items-center gap-3">
+						<svg
+							class="h-8 w-8 animate-spin text-theme-secondary"
+							style="fill: none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+						<span class="text-sm text-theme-secondary">Loading...</span>
+					</div>
+				</div>
+			{/if}
+
+			{#if hasItems}
+				<div class="space-y-3">
+					{#each items as itemData, index (index)}
+						{@render item(itemData)}
+					{/each}
+				</div>
+			{:else if !isLoading}
+				<!-- Empty State (only show when not loading) -->
+				<div class="empty-state">
+					{#if emptyIcon}
+						{@render emptyIcon()}
+					{:else}
+						<svg
+							class="empty-state-icon"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+							/>
+						</svg>
+					{/if}
+					<h2 class="empty-state-title">{emptyTitle}</h2>
+					<p class="empty-state-text">{emptyText}</p>
+					{#if emptyAction}
+						{@render emptyAction()}
+					{:else if createButtonText && onCreateClick && !searchQuery}
+						<button
+							type="button"
+							onclick={onCreateClick}
+							class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+						>
+							<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 4v16m8-8H4"
+								/>
+							</svg>
+							<span>{createButtonText}</span>
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+{#if createButtonText && onCreateClick}
+	<button
+		type="button"
+		onclick={onCreateClick}
+		class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+		aria-label={createButtonText}
+	>
+		<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+		</svg>
+	</button>
+{/if}
diff --git a/src/lib/components/admin/AdminPageHeader.svelte b/src/lib/components/admin/AdminPageHeader.svelte
new file mode 100644
index 0000000..0220ee3
--- /dev/null
+++ b/src/lib/components/admin/AdminPageHeader.svelte
@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import { goto, beforeNavigate } from '$app/navigation';
+	import { IconEdit } from '$lib/components/icons';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		subtitleSnippet?: Snippet<[{ toggleMenu: () => void }]>;
+		colorScheme?:
+			| 'primary'
+			| 'secondary'
+			| 'accent'
+			| 'accent2'
+			| 'accent3'
+			| 'accent4'
+			| 'accent5'
+			| 'accent6'
+			| 'accent7';
+		showBackButton?: boolean;
+		backHref?: string;
+		showNavMenu?: boolean;
+		invalidateOnBack?: boolean;
+		onEdit?: () => void;
+	}
+
+	let {
+		title,
+		subtitle,
+		subtitleSnippet,
+		colorScheme = 'primary',
+		showBackButton = true,
+		backHref = '/admin',
+		showNavMenu = false,
+		invalidateOnBack = false,
+		onEdit
+	}: Props = $props();
+
+	function handleBack(event: MouseEvent) {
+		if (invalidateOnBack) {
+			event.preventDefault();
+			goto(backHref, { invalidateAll: true });
+		}
+	}
+
+	let menuOpen = $state(false);
+	let isNavigatingBack = $state(false);
+
+	// Track when we're navigating to the back URL
+	beforeNavigate(({ to }) => {
+		if (to?.url.pathname === backHref) {
+			isNavigatingBack = true;
+		}
+	});
+
+	function toggleMenu() {
+		menuOpen = !menuOpen;
+	}
+
+	const colorClasses: Record<string, string> = {
+		primary: 'text-primary-600 dark:text-primary-400',
+		secondary: 'text-secondary-600 dark:text-secondary-400',
+		accent: 'text-accent-600 dark:text-accent-400',
+		accent2: 'text-accent2-600 dark:text-accent2-400',
+		accent3: 'text-accent3-600 dark:text-accent3-400',
+		accent4: 'text-accent4-600 dark:text-accent4-400',
+		accent5: 'text-accent5-600 dark:text-accent5-400',
+		accent6: 'text-accent6-600 dark:text-accent6-400',
+		accent7: 'text-accent7-600 dark:text-accent7-400'
+	};
+
+	const navItems = [
+		{
+			label: 'Customers',
+			href: '/admin/customers',
+			color: 'text-accent3-600 dark:text-accent3-400'
+		},
+		{
+			label: 'Accounts',
+			href: '/admin/accounts',
+			color: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Services',
+			href: '/admin/services',
+			color: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'Projects',
+			href: '/admin/projects',
+			color: 'text-accent-600 dark:text-accent-400'
+		},
+		{
+			label: 'Reports',
+			href: '/admin/reports',
+			color: 'text-accent2-600 dark:text-accent2-400'
+		},
+		{
+			label: 'Invoices',
+			href: '/admin/invoices',
+			color: 'text-accent6-600 dark:text-accent6-400'
+		},
+		{
+			label: 'Calendar',
+			href: '/admin/calendar',
+			color: 'text-accent7-600 dark:text-accent7-400'
+		},
+		{
+			label: 'Profiles',
+			href: '/admin/profiles',
+			color: 'text-accent4-600 dark:text-accent4-400'
+		}
+	];
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.nav-menu-container') && !target.closest('.menu-trigger')) {
+			menuOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			menuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="mb-6">
+	{#if showBackButton}
+		<!-- 3-column grid: back button | content | spacer for centering -->
+		<div class="grid grid-cols-[auto_1fr_auto] items-start gap-4">
+			<a
+				href={backHref}
+				onclick={handleBack}
+				class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Go back"
+			>
+				{#if isNavigatingBack}
+					<svg
+						class="h-5 w-5 animate-spin {colorClasses[colorScheme]}"
+						style="fill: none"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{:else}
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				{/if}
+			</a>
+			<div>
+				<div class="flex items-center gap-2">
+					<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+					{#if showNavMenu}
+						<div class="nav-menu-container relative">
+							<button
+								type="button"
+								onclick={() => (menuOpen = !menuOpen)}
+								class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Navigation menu"
+								aria-expanded={menuOpen}
+							>
+								<svg
+									class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</button>
+
+							{#if menuOpen}
+								<div
+									class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+								>
+									{#each navItems as item (item.href)}
+										<a
+											href={item.href}
+											class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+											item.href
+												? 'font-semibold'
+												: ''}"
+											onclick={() => (menuOpen = false)}
+										>
+											{item.label}
+										</a>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+				{#if subtitleSnippet}
+					<p class="page-subtitle">
+						{@render subtitleSnippet({ toggleMenu })}
+					</p>
+				{:else if subtitle}
+					<p class="page-subtitle">{subtitle}</p>
+				{/if}
+			</div>
+			<!-- Edit button or spacer to balance the back button -->
+			{#if onEdit}
+				<button
+					type="button"
+					onclick={onEdit}
+					class="rounded-lg p-2 text-theme-secondary transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15"
+					aria-label="Edit"
+				>
+					<IconEdit class="h-5 w-5" />
+				</button>
+			{:else}
+				<div class="w-7"></div>
+			{/if}
+		</div>
+	{:else}
+		<!-- No back button - simple layout -->
+		<div class="flex items-center gap-2">
+			<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+			{#if showNavMenu}
+				<div class="nav-menu-container relative">
+					<button
+						type="button"
+						onclick={() => (menuOpen = !menuOpen)}
+						class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Navigation menu"
+						aria-expanded={menuOpen}
+					>
+						<svg
+							class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+
+					{#if menuOpen}
+						<div
+							class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+						>
+							{#each navItems as item (item.href)}
+								<a
+									href={item.href}
+									class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+									item.href
+										? 'font-semibold'
+										: ''}"
+									onclick={() => (menuOpen = false)}
+								>
+									{item.label}
+								</a>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if subtitleSnippet}
+			<p class="page-subtitle">
+				{@render subtitleSnippet({ toggleMenu })}
+			</p>
+		{:else if subtitle}
+			<p class="page-subtitle">{subtitle}</p>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/admin/DeleteConfirmModal.svelte b/src/lib/components/admin/DeleteConfirmModal.svelte
new file mode 100644
index 0000000..af4d6af
--- /dev/null
+++ b/src/lib/components/admin/DeleteConfirmModal.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Props {
+		open: boolean;
+		title?: string;
+		message?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		loading?: boolean;
+		onconfirm: () => Promise<void> | void;
+		oncancel: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		title = 'Confirm Delete',
+		message = 'Are you sure you want to delete this item? This action cannot be undone.',
+		confirmLabel = 'Delete',
+		cancelLabel = 'Cancel',
+		loading = false,
+		onconfirm,
+		oncancel
+	}: Props = $props();
+
+	let error = $state('');
+	let isSubmitting = $state(false);
+
+	async function handleConfirm() {
+		if (!onconfirm) return;
+		isSubmitting = true;
+		error = '';
+		try {
+			await onconfirm();
+			open = false;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to perform action';
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function handleCancel() {
+		if (isSubmitting) return;
+		error = '';
+		open = false;
+		oncancel?.();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open && !isSubmitting) {
+			handleCancel();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget && !isSubmitting) {
+			handleCancel();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		transition:fade={{ duration: 150 }}
+		onclick={handleBackdropClick}
+		role="presentation"
+	>
+		<!-- Modal -->
+		<div
+			class="w-full max-w-sm rounded-xl border border-theme bg-theme p-6 shadow-theme-lg"
+			transition:scale={{ duration: 150, start: 0.95 }}
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby="modal-title"
+			aria-describedby="modal-description"
+		>
+			{#if error}
+				<div class="mb-4 rounded-lg border border-danger bg-danger p-3 text-sm text-danger">
+					{error}
+				</div>
+			{/if}
+
+			<div class="text-center">
+				<!-- Warning Icon -->
+				<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-danger">
+					<svg
+						class="h-6 w-6 text-danger"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+				</div>
+
+				<h3 id="modal-title" class="mb-2 text-lg font-semibold text-theme">
+					{title}
+				</h3>
+				<p id="modal-description" class="mb-6 text-sm text-theme-secondary">
+					{message}
+				</p>
+
+				<div class="flex gap-3">
+					<button
+						type="button"
+						onclick={handleCancel}
+						disabled={isSubmitting || loading}
+						class="flex-1 rounded-lg border border-theme bg-theme px-4 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+					>
+						{cancelLabel}
+					</button>
+					<button
+						type="button"
+						onclick={handleConfirm}
+						disabled={isSubmitting || loading}
+						class="btn-danger flex-1 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#if isSubmitting || loading}
+							<span class="flex items-center justify-center gap-2">
+								<IconSpinner class="h-4 w-4" />
+								<span>Deleting...</span>
+							</span>
+						{:else}
+							{confirmLabel}
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/admin/ItemActions.svelte b/src/lib/components/admin/ItemActions.svelte
new file mode 100644
index 0000000..2692620
--- /dev/null
+++ b/src/lib/components/admin/ItemActions.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { IconEdit, IconTrash } from '$lib/components/icons';
+
+	interface Props {
+		editLabel?: string;
+		deleteLabel?: string;
+		size?: 'sm' | 'md';
+		onEdit: () => void;
+		onDelete: () => void;
+	}
+
+	let {
+		editLabel = 'Edit',
+		deleteLabel = 'Delete',
+		size = 'md',
+		onEdit,
+		onDelete
+	}: Props = $props();
+
+	const buttonClass = size === 'sm' ? 'rounded p-1' : 'rounded p-1.5';
+	const iconClass = size === 'sm' ? 'h-3 w-3' : '';
+</script>
+
+<div class="flex items-center gap-1">
+	<button
+		type="button"
+		onclick={onEdit}
+		class="{buttonClass} text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+		aria-label={editLabel}
+	>
+		<IconEdit class={iconClass} />
+	</button>
+	<button
+		type="button"
+		onclick={onDelete}
+		class="{buttonClass} text-theme-secondary hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+		aria-label={deleteLabel}
+	>
+		<IconTrash class={iconClass} />
+	</button>
+</div>
diff --git a/src/lib/components/admin/SectionHeader.svelte b/src/lib/components/admin/SectionHeader.svelte
new file mode 100644
index 0000000..7e757c7
--- /dev/null
+++ b/src/lib/components/admin/SectionHeader.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { IconPlus, IconEdit } from '$lib/components/icons';
+
+	interface Props {
+		title: string;
+		buttonText?: string;
+		buttonIcon?: 'plus' | 'edit' | 'none';
+		onButtonClick?: () => void;
+	}
+
+	let { title, buttonText, buttonIcon = 'plus', onButtonClick }: Props = $props();
+</script>
+
+<div class="mb-4 flex items-center justify-between">
+	<h2 class="text-lg font-semibold text-theme">{title}</h2>
+	{#if onButtonClick && buttonText}
+		<button
+			type="button"
+			onclick={onButtonClick}
+			class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-primary-500 transition-colors hover:bg-primary-500/10"
+		>
+			{#if buttonIcon === 'plus'}
+				<IconPlus />
+			{:else if buttonIcon === 'edit'}
+				<IconEdit />
+			{/if}
+			<span>{buttonText}</span>
+		</button>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/AccountForm.svelte b/src/lib/components/admin/accounts/AccountForm.svelte
new file mode 100644
index 0000000..41dfac4
--- /dev/null
+++ b/src/lib/components/admin/accounts/AccountForm.svelte
@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { CreateAccountStore, UpdateAccountStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import { toGlobalId } from '$lib/utils/relay';
+
+	type Account = NonNullable<GetAccount$result['account']>;
+
+	interface Props {
+		account?: Account;
+		customers: { id: string; name: string }[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { account, customers, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!account);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Convert customerId from UUID to GlobalID to match dropdown option values
+	function getCustomerGlobalId(customerId: string | null | undefined): string {
+		if (!customerId) return '';
+		return toGlobalId('CustomerType', customerId);
+	}
+
+	let name = $state(account?.name ?? '');
+	let customerId = $state(getCustomerGlobalId(account?.customerId));
+	let startDate = $state(account?.startDate ?? '');
+	let endDate = $state(account?.endDate ?? '');
+	let status = $state(account?.status ?? 'ACTIVE');
+
+	const createStore = new CreateAccountStore();
+	const updateStore = new UpdateAccountStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name || !customerId || !startDate) {
+				error = 'Please provide name, customer, and start date';
+				return;
+			}
+
+			if (isEdit && account) {
+				const res = await updateStore.mutate({
+					input: {
+						id: account.id,
+						name,
+						customerId,
+						startDate,
+						endDate: endDate || null,
+						status
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						name,
+						customerId,
+						startDate,
+						endDate: endDate || null,
+						status
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save account';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Account Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="Enter account name"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="customerId" class="mb-1.5 block text-sm font-medium text-theme">
+				Customer <span class="text-red-500">*</span>
+			</label>
+			<div class="relative w-full">
+				<select
+					id="customerId"
+					bind:value={customerId}
+					disabled={submitting}
+					class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="">Select a customer</option>
+					{#each customers as customer (customer.id)}
+						<option value={customer.id}>{customer.name}</option>
+					{/each}
+				</select>
+				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+					<svg
+						class="h-4 w-4 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</div>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">
+					Start Date <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="startDate"
+					type="date"
+					bind:value={startDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme"> End Date </label>
+				<input
+					id="endDate"
+					type="date"
+					bind:value={endDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		{#if isEdit}
+			<div>
+				<label for="status" class="mb-1.5 block text-sm font-medium text-theme"> Status </label>
+				<select
+					id="status"
+					bind:value={status}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="ACTIVE">Active</option>
+					<option value="PENDING">Pending</option>
+					<option value="INACTIVE">Inactive</option>
+				</select>
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Account'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/AddressCard.svelte b/src/lib/components/admin/accounts/AddressCard.svelte
new file mode 100644
index 0000000..bd16ff0
--- /dev/null
+++ b/src/lib/components/admin/accounts/AddressCard.svelte
@@ -0,0 +1,362 @@
+<script lang="ts">
+	import ItemActions from '$lib/components/admin/ItemActions.svelte';
+	import LaborSection from './LaborSection.svelte';
+	import ScopeSection from './ScopeSection.svelte';
+	import { IconChevronRight, IconEdit, IconTrash } from '$lib/components/icons';
+	import { formatDate } from '$lib/utils/date';
+	import { SvelteDate, type SvelteSet } from 'svelte/reactivity';
+	import type { GetAccount$result, GetScopeTemplates$result } from '$houdini';
+	import type { ScopeType, AreaType, TaskType } from '$lib/stores/scopeEditor.svelte';
+
+	// Extract types from Houdini generated result
+	type AddressType = NonNullable<GetAccount$result['account']>['addresses'][number];
+	type LaborType = AddressType['labors'][number];
+	type ScheduleType = AddressType['schedules'][number];
+	type ScopeTemplateType = GetScopeTemplates$result['scopeTemplates'][number];
+
+	interface Props {
+		address: AddressType;
+		isExpanded: boolean;
+		showLaborHistory: boolean;
+		showScheduleHistory: boolean;
+		expandedScopes: SvelteSet<string>;
+		expandedAreas: SvelteSet<string>;
+		scopeTemplates: ScopeTemplateType[];
+		scopeError?: string;
+		onToggleExpanded: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+		onAddSchedule: () => void;
+		onEditSchedule: (schedule: ScheduleType) => void;
+		onDeleteSchedule: (scheduleId: string) => void;
+		onToggleScheduleHistory: () => void;
+		onAddLabor: () => void;
+		onEditLabor: (labor: LaborType) => void;
+		onDeleteLabor: (laborId: string) => void;
+		onToggleLaborHistory: () => void;
+		onToggleScope: (scopeId: string) => void;
+		onToggleArea: (areaId: string) => void;
+		onAddScope: () => void;
+		onAddScopeFromTemplate: (templateId: string) => void;
+		onEditScope: (scope: ScopeType) => void;
+		onDeleteScope: (scopeId: string) => void;
+		onAddArea: (scopeId: string, nextOrder: number) => void;
+		onEditArea: (scopeId: string, area: AreaType) => void;
+		onDeleteArea: (areaId: string) => void;
+		onAddTask: (areaId: string, nextOrder: number) => void;
+		onEditTask: (areaId: string, task: TaskType) => void;
+		onDeleteTask: (taskId: string) => void;
+		onGenerateServices?: (addressId: string, scheduleId: string) => void;
+		onClearScopeError?: () => void;
+	}
+
+	let {
+		address,
+		isExpanded,
+		showLaborHistory,
+		showScheduleHistory,
+		expandedScopes,
+		expandedAreas,
+		scopeTemplates,
+		scopeError = '',
+		onToggleExpanded,
+		onEdit,
+		onDelete,
+		onAddSchedule,
+		onEditSchedule,
+		onDeleteSchedule,
+		onToggleScheduleHistory,
+		onAddLabor,
+		onEditLabor,
+		onDeleteLabor,
+		onToggleLaborHistory,
+		onToggleScope,
+		onToggleArea,
+		onAddScope,
+		onAddScopeFromTemplate,
+		onEditScope,
+		onDeleteScope,
+		onAddArea,
+		onEditArea,
+		onDeleteArea,
+		onAddTask,
+		onEditTask,
+		onDeleteTask,
+		onGenerateServices,
+		onClearScopeError
+	}: Props = $props();
+
+	// Separate current and past schedules
+	let currentSchedules = $derived(
+		address.schedules?.filter((s) => {
+			if (!s.endDate) return true;
+			const endDate = new Date(s.endDate);
+			const today = new SvelteDate();
+			today.setHours(0, 0, 0, 0);
+			return endDate >= today;
+		}) ?? []
+	);
+
+	let pastSchedules = $derived(
+		address.schedules?.filter((s) => {
+			if (!s.endDate) return false;
+			const endDate = new Date(s.endDate);
+			const today = new SvelteDate();
+			today.setHours(0, 0, 0, 0);
+			return endDate < today;
+		}) ?? []
+	);
+
+	function getScheduleDays(schedule: ScheduleType): string[] {
+		const days: string[] = [];
+		if (schedule.mondayService) days.push('Mon');
+		if (schedule.tuesdayService) days.push('Tue');
+		if (schedule.wednesdayService) days.push('Wed');
+		if (schedule.thursdayService) days.push('Thu');
+		if (schedule.fridayService) days.push('Fri');
+		if (schedule.saturdayService) days.push('Sat');
+		if (schedule.sundayService) days.push('Sun');
+		return days;
+	}
+</script>
+
+<div
+	class="rounded-lg border border-theme bg-theme {address.isPrimary
+		? 'border-l-2 border-l-primary-500'
+		: ''}"
+>
+	<!-- Address Header -->
+	<div class="flex items-start justify-between gap-1 p-3">
+		<button type="button" onclick={onToggleExpanded} class="min-w-0 flex-1 text-left">
+			<span class="flex items-center gap-2">
+				<IconChevronRight
+					class="h-4 w-4 flex-shrink-0 text-theme-muted transition-transform {isExpanded
+						? 'rotate-90'
+						: ''}"
+				/>
+				<span class="font-medium text-theme"
+					>{address.name ||
+						(address.isPrimary ? 'Primary Service Address' : 'Service Address')}</span
+				>
+				{#if !address.isActive}
+					<span class="badge-neutral">Inactive</span>
+				{/if}
+			</span>
+			<span class="mt-0.5 block pl-6 text-sm text-theme-secondary">
+				{address.streetAddress}, {address.city}, {address.state}
+				{address.zipCode}
+			</span>
+		</button>
+		<div class="flex shrink-0 items-center gap-1">
+			<button
+				type="button"
+				onclick={onEdit}
+				class="rounded p-1.5 text-gray-500 hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
+				aria-label="Edit address"
+			>
+				<IconEdit />
+			</button>
+			<button
+				type="button"
+				onclick={onDelete}
+				class="rounded p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-500 dark:text-gray-400 dark:hover:bg-red-900/20"
+				aria-label="Delete address"
+			>
+				<IconTrash />
+			</button>
+		</div>
+	</div>
+
+	<!-- Address Expanded Content -->
+	{#if isExpanded}
+		<div class="border-t border-theme px-3 pb-3">
+			<!-- Notes -->
+			{#if address.notes}
+				<p class="mt-3 text-sm text-theme-secondary italic">{address.notes}</p>
+			{/if}
+
+			<!-- Schedules for this address -->
+			<div class="mt-3 border-t border-theme pt-3">
+				<div class="mb-2 flex items-center justify-between">
+					<p class="text-xs font-medium tracking-wide text-theme-muted uppercase">Schedules</p>
+					<button
+						type="button"
+						onclick={onAddSchedule}
+						class="text-xs font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+					>
+						+ Add Schedule
+					</button>
+				</div>
+
+				{#if currentSchedules.length > 0 || pastSchedules.length > 0}
+					<div class="space-y-2">
+						<!-- Current Schedules -->
+						{#each currentSchedules as schedule (schedule.id)}
+							{@const scheduleDays = getScheduleDays(schedule)}
+							{@const isCurrentSchedule = !schedule.endDate}
+							<div class="rounded border border-theme bg-theme-card p-2 text-sm">
+								<div class="flex items-start justify-between gap-2">
+									<div class="min-w-0 flex-1">
+										<div class="flex flex-wrap items-center gap-2">
+											<span class="font-medium text-theme"
+												>{schedule.name || 'Unnamed Schedule'}</span
+											>
+											<span class="text-xs text-theme-muted">
+												{#if isCurrentSchedule}
+													As of {formatDate(schedule.startDate) || '—'}
+												{:else}
+													{formatDate(schedule.startDate) || '—'} - {formatDate(schedule.endDate)}
+												{/if}
+											</span>
+											{#if isCurrentSchedule && onGenerateServices}
+												<button
+													type="button"
+													onclick={() => onGenerateServices(address.id, schedule.id)}
+													class="rounded bg-secondary-100 px-2 py-0.5 text-xs font-medium text-secondary-700 transition-colors hover:bg-secondary-200 dark:bg-secondary-900/40 dark:text-secondary-400 dark:hover:bg-secondary-900/60"
+												>
+													Generate
+												</button>
+											{/if}
+										</div>
+										<div class="mt-2 flex flex-wrap gap-1">
+											{#if schedule.weekendService}
+												<span
+													class="rounded bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-400"
+												>
+													Weekend
+												</span>
+											{:else if scheduleDays.length > 0}
+												{#each scheduleDays as day (day)}
+													<span
+														class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+													>
+														{day}
+													</span>
+												{/each}
+											{:else}
+												<span class="text-xs text-theme-muted">No days selected</span>
+											{/if}
+										</div>
+										{#if schedule.scheduleException}
+											<p class="mt-1 text-xs text-theme-muted italic">
+												{schedule.scheduleException}
+											</p>
+										{/if}
+									</div>
+									<div class="shrink-0">
+										<ItemActions
+											size="sm"
+											editLabel="Edit schedule"
+											deleteLabel="Delete schedule"
+											onEdit={() => onEditSchedule(schedule)}
+											onDelete={() => onDeleteSchedule(schedule.id)}
+										/>
+									</div>
+								</div>
+							</div>
+						{/each}
+
+						<!-- Past Schedules (collapsed by default) -->
+						{#if pastSchedules.length > 0}
+							<div class="mt-2">
+								<button
+									type="button"
+									onclick={onToggleScheduleHistory}
+									class="text-xs font-medium text-theme-muted hover:text-theme-secondary"
+								>
+									{showScheduleHistory ? 'Hide' : 'Show'} past schedules ({pastSchedules.length})
+								</button>
+
+								{#if showScheduleHistory}
+									<div class="mt-2 space-y-2">
+										{#each pastSchedules as schedule (schedule.id)}
+											{@const scheduleDays = getScheduleDays(schedule)}
+											<div class="rounded border border-theme bg-theme-card p-2 text-sm opacity-60">
+												<div class="flex items-start justify-between gap-2">
+													<div class="min-w-0 flex-1">
+														<div class="flex flex-wrap items-center gap-2">
+															<span class="font-medium text-theme"
+																>{schedule.name || 'Unnamed Schedule'}</span
+															>
+															<span class="text-xs text-theme-muted">
+																{formatDate(schedule.startDate) || '—'} - {formatDate(
+																	schedule.endDate
+																)}
+															</span>
+														</div>
+														<div class="mt-2 flex flex-wrap gap-1">
+															{#if schedule.weekendService}
+																<span
+																	class="rounded bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-400"
+																>
+																	Weekend
+																</span>
+															{:else if scheduleDays.length > 0}
+																{#each scheduleDays as day (day)}
+																	<span
+																		class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+																	>
+																		{day}
+																	</span>
+																{/each}
+															{:else}
+																<span class="text-xs text-theme-muted">No days selected</span>
+															{/if}
+														</div>
+													</div>
+													<div class="shrink-0">
+														<ItemActions
+															size="sm"
+															editLabel="Edit schedule"
+															deleteLabel="Delete schedule"
+															onEdit={() => onEditSchedule(schedule)}
+															onDelete={() => onDeleteSchedule(schedule.id)}
+														/>
+													</div>
+												</div>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<p class="text-sm text-theme-muted">No schedules configured</p>
+				{/if}
+			</div>
+
+			<!-- Labor for this address -->
+			<LaborSection
+				labors={address.labors}
+				showHistory={showLaborHistory}
+				onAdd={onAddLabor}
+				onEdit={onEditLabor}
+				onDelete={onDeleteLabor}
+				onToggleHistory={onToggleLaborHistory}
+			/>
+
+			<!-- Scopes for this address -->
+			<ScopeSection
+				scopes={address.scopes ?? []}
+				{scopeTemplates}
+				{expandedScopes}
+				{expandedAreas}
+				{scopeError}
+				{onToggleScope}
+				{onToggleArea}
+				{onAddScope}
+				{onAddScopeFromTemplate}
+				{onEditScope}
+				{onDeleteScope}
+				{onAddArea}
+				{onEditArea}
+				{onDeleteArea}
+				{onAddTask}
+				{onEditTask}
+				{onDeleteTask}
+				onClearError={onClearScopeError}
+			/>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/AreaForm.svelte b/src/lib/components/admin/accounts/AreaForm.svelte
new file mode 100644
index 0000000..e6f3723
--- /dev/null
+++ b/src/lib/components/admin/accounts/AreaForm.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { createArea, updateArea } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Area = NonNullable<
+		GetAccount$result['account']
+	>['addresses'][number]['scopes'][number]['areas'][number];
+
+	interface Props {
+		scopeId: string;
+		area?: Area;
+		nextOrder?: number;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { scopeId, area, nextOrder = 0, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!area);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let name = $state(area?.name ?? '');
+	let order = $state(area?.order ?? nextOrder);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name.trim()) {
+				error = 'Please provide an area name';
+				return;
+			}
+
+			if (isEdit && area) {
+				await updateArea({
+					id: area.id,
+					name: name.trim(),
+					order
+				});
+			} else {
+				await createArea({
+					scopeId,
+					name: name.trim(),
+					order
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save area';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Area Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Kitchen, Lobby, Restrooms"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="order" class="mb-1.5 block text-sm font-medium text-theme"> Display Order </label>
+			<input
+				id="order"
+				type="number"
+				min="0"
+				bind:value={order}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+			<p class="mt-1 text-xs text-theme-muted">Lower numbers appear first</p>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Area'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/ContactListItem.svelte b/src/lib/components/admin/accounts/ContactListItem.svelte
new file mode 100644
index 0000000..c321407
--- /dev/null
+++ b/src/lib/components/admin/accounts/ContactListItem.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { IconEdit, IconTrash } from '$lib/components/icons';
+
+	interface Contact {
+		fullName: string;
+		email: string | null;
+		phone: string | null;
+		isPrimary: boolean;
+		isActive: boolean;
+	}
+
+	interface Props {
+		contact: Contact;
+		onEdit: () => void;
+		onDelete: () => void;
+	}
+
+	let { contact, onEdit, onDelete }: Props = $props();
+</script>
+
+<div class="rounded-lg border border-theme bg-theme p-3">
+	{#if contact.isPrimary || !contact.isActive}
+		<div class="mb-1.5 flex flex-wrap gap-1.5 sm:hidden">
+			{#if contact.isPrimary}
+				<span class="badge-primary">Primary</span>
+			{/if}
+			{#if !contact.isActive}
+				<span class="badge-neutral">Inactive</span>
+			{/if}
+		</div>
+	{/if}
+	<div class="flex items-start justify-between gap-2">
+		<div class="min-w-0 flex-1">
+			<div class="flex flex-wrap items-center gap-2">
+				<span class="font-medium text-theme">{contact.fullName}</span>
+				{#if contact.isPrimary}
+					<span class="hidden badge-primary sm:inline-flex">Primary</span>
+				{/if}
+				{#if !contact.isActive}
+					<span class="hidden badge-neutral sm:inline-flex">Inactive</span>
+				{/if}
+			</div>
+		</div>
+		<div class="flex shrink-0 items-center gap-1">
+			<button
+				type="button"
+				onclick={onEdit}
+				class="rounded p-1.5 text-gray-500 hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
+				aria-label="Edit contact"
+			>
+				<IconEdit />
+			</button>
+			<button
+				type="button"
+				onclick={onDelete}
+				class="rounded p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-500 dark:text-gray-400 dark:hover:bg-red-900/20"
+				aria-label="Delete contact"
+			>
+				<IconTrash />
+			</button>
+		</div>
+	</div>
+	{#if contact.email || contact.phone}
+		<div class="mt-2 flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-x-4">
+			{#if contact.email}
+				<p class="text-sm text-theme-secondary">{contact.email}</p>
+			{/if}
+			{#if contact.phone}
+				<p class="text-sm text-theme-muted">{contact.phone}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/LaborForm.svelte b/src/lib/components/admin/accounts/LaborForm.svelte
new file mode 100644
index 0000000..6ab54a3
--- /dev/null
+++ b/src/lib/components/admin/accounts/LaborForm.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { CreateLaborStore, UpdateLaborStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Labor = NonNullable<GetAccount$result['account']>['addresses'][number]['labors'][number];
+
+	interface Props {
+		accountAddressId: string;
+		labor?: Labor;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { accountAddressId, labor, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!labor);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let amount = $state(labor?.amount?.toString() ?? '');
+	let startDate = $state(labor?.startDate ?? '');
+	let endDate = $state(labor?.endDate ?? '');
+
+	const createStore = new CreateLaborStore();
+	const updateStore = new UpdateLaborStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			const parsedAmount = parseFloat(amount);
+			if (isNaN(parsedAmount) || parsedAmount < 0) {
+				error = 'Please provide a valid amount';
+				return;
+			}
+
+			if (!startDate) {
+				error = 'Please provide a start date';
+				return;
+			}
+
+			if (isEdit && labor) {
+				const res = await updateStore.mutate({
+					input: {
+						id: labor.id,
+						amount: parsedAmount,
+						startDate,
+						endDate: endDate || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						accountAddressId,
+						amount: parsedAmount,
+						startDate,
+						endDate: endDate || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save labor';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="amount" class="mb-1.5 block text-sm font-medium text-theme">
+				Labor Rate (per visit) <span class="text-red-500">*</span>
+			</label>
+			<div class="relative">
+				<span class="absolute top-1/2 left-3 -translate-y-1/2 text-theme-muted">$</span>
+				<input
+					id="amount"
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={amount}
+					disabled={submitting}
+					placeholder="0.00"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-7 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">
+					Start Date <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="startDate"
+					type="date"
+					bind:value={startDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme"> End Date </label>
+				<input
+					id="endDate"
+					type="date"
+					bind:value={endDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<p class="text-xs text-theme-muted">
+			Leave end date empty to mark this as the current labor rate.
+		</p>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Labor'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/LaborSection.svelte b/src/lib/components/admin/accounts/LaborSection.svelte
new file mode 100644
index 0000000..404b50e
--- /dev/null
+++ b/src/lib/components/admin/accounts/LaborSection.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import ItemActions from '$lib/components/admin/ItemActions.svelte';
+	import { IconEdit, IconTrash } from '$lib/components/icons';
+	import { formatDate } from '$lib/utils/date';
+
+	interface Labor {
+		id: string;
+		amount: number | null;
+		startDate: string | null;
+		endDate: string | null;
+	}
+
+	interface Props {
+		labors: Labor[];
+		showHistory: boolean;
+		onAdd: () => void;
+		onEdit: (labor: Labor) => void;
+		onDelete: (laborId: string) => void;
+		onToggleHistory: () => void;
+	}
+
+	let { labors, showHistory, onAdd, onEdit, onDelete, onToggleHistory }: Props = $props();
+
+	let currentLabor = $derived(labors.find((l) => !l.endDate));
+	let historicalLabors = $derived(labors.filter((l) => l.endDate));
+
+	function formatCurrency(amount: number | null | undefined): string {
+		if (amount === null || amount === undefined) return '$0.00';
+		return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+	}
+</script>
+
+<div class="mt-3 border-t border-theme pt-3">
+	<div class="mb-2 flex items-center justify-between">
+		<p class="text-xs font-medium tracking-wide text-theme-muted uppercase">Labor</p>
+		<button
+			type="button"
+			onclick={onAdd}
+			class="text-xs font-medium text-primary-500 hover:text-primary-600"
+		>
+			+ Add
+		</button>
+	</div>
+
+	{#if currentLabor}
+		<div
+			class="rounded border-2 border-blue-200 bg-blue-50 p-2 text-sm dark:border-blue-800 dark:bg-blue-900/20"
+		>
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-2">
+					<span class="font-bold text-blue-700 dark:text-blue-400">
+						{formatCurrency(currentLabor.amount)}
+					</span>
+					<span
+						class="rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-400"
+					>
+						Current
+					</span>
+				</div>
+				<div class="flex items-center gap-1">
+					<button
+						type="button"
+						onclick={() => onEdit(currentLabor)}
+						class="rounded p-1 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900/40"
+						aria-label="Edit labor"
+					>
+						<IconEdit class="h-3.5 w-3.5" />
+					</button>
+					<button
+						type="button"
+						onclick={() => onDelete(currentLabor.id)}
+						class="rounded p-1 text-blue-600 hover:bg-red-50 hover:text-red-500 dark:text-blue-400 dark:hover:bg-red-900/20"
+						aria-label="Delete labor"
+					>
+						<IconTrash class="h-3.5 w-3.5" />
+					</button>
+				</div>
+			</div>
+			<p class="mt-1 text-xs text-blue-600 dark:text-blue-500">
+				As of {formatDate(currentLabor.startDate) || '—'}
+			</p>
+		</div>
+	{:else}
+		<p class="text-xs text-theme-muted">No current labor rate set.</p>
+	{/if}
+
+	{#if historicalLabors.length > 0}
+		<button
+			type="button"
+			onclick={onToggleHistory}
+			class="mt-2 flex w-full items-center justify-between text-xs text-theme-secondary hover:text-theme"
+		>
+			<span>History ({historicalLabors.length})</span>
+			<svg
+				class="h-3 w-3 transition-transform {showHistory ? 'rotate-180' : ''}"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+
+		{#if showHistory}
+			<div class="mt-2 space-y-1">
+				{#each historicalLabors as labor (labor.id)}
+					<div
+						class="flex items-center justify-between rounded border border-theme bg-theme-card p-2 text-xs"
+					>
+						<div>
+							<span class="font-medium text-theme">{formatCurrency(labor.amount)}</span>
+							<span class="text-theme-muted">
+								({formatDate(labor.startDate) || '—'} - {formatDate(labor.endDate) || 'Present'})
+							</span>
+						</div>
+						<ItemActions
+							size="sm"
+							editLabel="Edit labor"
+							deleteLabel="Delete labor"
+							onEdit={() => onEdit(labor)}
+							onDelete={() => onDelete(labor.id)}
+						/>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/RevenueForm.svelte b/src/lib/components/admin/accounts/RevenueForm.svelte
new file mode 100644
index 0000000..b1e9774
--- /dev/null
+++ b/src/lib/components/admin/accounts/RevenueForm.svelte
@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { CreateRevenueStore, UpdateRevenueStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	type Revenue = NonNullable<GetAccount$result['account']>['revenues'][number];
+
+	interface WaveProduct {
+		id: string;
+		name: string;
+		description: string | null;
+		unitPrice: number | string;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		accountId: string;
+		revenue?: Revenue;
+		waveProducts?: WaveProduct[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { accountId, revenue, waveProducts = [], onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!revenue);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let amount = $state(revenue?.amount?.toString() ?? '');
+	let startDate = $state(revenue?.startDate ?? '');
+	let endDate = $state(revenue?.endDate ?? '');
+	let waveServiceId = $state(revenue?.waveServiceId ?? '');
+
+	// Find currently linked product for display
+	let linkedProduct = $derived(
+		waveServiceId ? waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId) : null
+	);
+
+	const createStore = new CreateRevenueStore();
+	const updateStore = new UpdateRevenueStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			const parsedAmount = parseFloat(amount);
+			if (isNaN(parsedAmount) || parsedAmount < 0) {
+				error = 'Please provide a valid amount';
+				return;
+			}
+
+			if (!startDate) {
+				error = 'Please provide a start date';
+				return;
+			}
+
+			if (isEdit && revenue) {
+				const res = await updateStore.mutate({
+					input: {
+						id: revenue.id,
+						amount: parsedAmount,
+						startDate,
+						endDate: endDate || null,
+						waveServiceId: waveServiceId || ''
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						accountId,
+						amount: parsedAmount,
+						startDate,
+						endDate: endDate || null,
+						waveServiceId: waveServiceId || ''
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save revenue';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="amount" class="mb-1.5 block text-sm font-medium text-theme">
+				Monthly Revenue <span class="text-red-500">*</span>
+			</label>
+			<div class="relative">
+				<span class="absolute top-1/2 left-3 -translate-y-1/2 text-theme-muted">$</span>
+				<input
+					id="amount"
+					type="number"
+					step="0.01"
+					min="0"
+					bind:value={amount}
+					disabled={submitting}
+					placeholder="0.00"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-7 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">
+					Start Date <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="startDate"
+					type="date"
+					bind:value={startDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme"> End Date </label>
+				<input
+					id="endDate"
+					type="date"
+					bind:value={endDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<p class="text-xs text-theme-muted">
+			Leave end date empty to mark this as the current revenue rate.
+		</p>
+
+		{#if waveProducts.length > 0}
+			<div class="border-t border-theme pt-4">
+				<label for="waveProduct" class="mb-1.5 block text-sm font-medium text-theme">
+					Wave Product
+				</label>
+				<select
+					id="waveProduct"
+					bind:value={waveServiceId}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="">No linked product</option>
+					{#each waveProducts as product (product.id)}
+						{@const decodedId = fromGlobalId(product.id)}
+						<option value={decodedId}>
+							{product.name} (${Number(product.unitPrice).toFixed(2)})
+						</option>
+					{/each}
+				</select>
+				{#if linkedProduct}
+					<p class="mt-1 text-xs text-theme-muted">
+						Currently linked to: {linkedProduct.name}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Revenue'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/RevenueSection.svelte b/src/lib/components/admin/accounts/RevenueSection.svelte
new file mode 100644
index 0000000..36d5ca0
--- /dev/null
+++ b/src/lib/components/admin/accounts/RevenueSection.svelte
@@ -0,0 +1,170 @@
+<script lang="ts">
+	import SectionHeader from '$lib/components/admin/SectionHeader.svelte';
+	import ItemActions from '$lib/components/admin/ItemActions.svelte';
+	import { IconEdit, IconTrash } from '$lib/components/icons';
+	import { formatDate } from '$lib/utils/date';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	interface Revenue {
+		id: string;
+		amount: number | null;
+		startDate: string | null;
+		endDate: string | null;
+		waveServiceId: string | null;
+	}
+
+	interface WaveProduct {
+		id: string;
+		name: string;
+		description: string | null;
+		unitPrice: number;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		revenues: Revenue[];
+		waveProducts?: WaveProduct[];
+		onAdd: () => void;
+		onEdit: (revenue: Revenue) => void;
+		onDelete: (revenueId: string) => void;
+	}
+
+	let { revenues, waveProducts = [], onAdd, onEdit, onDelete }: Props = $props();
+
+	let currentRevenue = $derived(revenues.find((r) => !r.endDate));
+	let historicalRevenues = $derived(revenues.filter((r) => r.endDate));
+	let showHistoricalRevenues = $state(false);
+
+	function formatCurrency(amount: number | null | undefined): string {
+		if (amount === null || amount === undefined) return '$0.00';
+		return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+	}
+
+	function getLinkedProduct(waveServiceId: string | null | undefined): WaveProduct | null {
+		if (!waveServiceId) return null;
+		return waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId) ?? null;
+	}
+</script>
+
+<div class="card-padded">
+	<SectionHeader title="Revenue" buttonText="Add" onButtonClick={onAdd} />
+
+	{#if currentRevenue}
+		{@const linkedProduct = getLinkedProduct(currentRevenue.waveServiceId)}
+		<!-- Current revenue shown prominently -->
+		<div
+			class="mb-4 rounded-lg border-2 border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/20"
+		>
+			<div class="flex items-start justify-between">
+				<div>
+					<div class="flex items-center gap-2">
+						<span class="text-2xl font-bold text-green-700 dark:text-green-400">
+							{formatCurrency(currentRevenue.amount)}
+						</span>
+						<span class="badge-success">Current</span>
+						{#if currentRevenue.waveServiceId}
+							<span class="badge-primary">Linked</span>
+						{/if}
+					</div>
+					<p class="mt-1 text-sm text-green-600 dark:text-green-500">
+						As of {formatDate(currentRevenue.startDate) || '—'}
+					</p>
+					{#if linkedProduct}
+						<p class="mt-1 text-sm text-green-600 dark:text-green-500">
+							Wave: {linkedProduct.name}
+						</p>
+						<p class="mt-1 font-mono text-xs text-green-500 dark:text-green-600">
+							{currentRevenue.waveServiceId}
+						</p>
+					{:else if currentRevenue.waveServiceId}
+						<p class="mt-1 font-mono text-xs text-green-500 dark:text-green-600">
+							{currentRevenue.waveServiceId}
+						</p>
+					{/if}
+				</div>
+				<div class="flex items-center gap-1">
+					<button
+						type="button"
+						onclick={() => onEdit(currentRevenue)}
+						class="rounded p-1.5 text-green-600 hover:bg-green-100 dark:text-green-400 dark:hover:bg-green-900/40"
+						aria-label="Edit revenue"
+					>
+						<IconEdit />
+					</button>
+					<button
+						type="button"
+						onclick={() => onDelete(currentRevenue.id)}
+						class="rounded p-1.5 text-green-600 hover:bg-red-50 hover:text-red-500 dark:text-green-400 dark:hover:bg-red-900/20"
+						aria-label="Delete revenue"
+					>
+						<IconTrash />
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<p class="mb-4 text-center text-theme-muted">No current revenue rate set.</p>
+	{/if}
+
+	<!-- Historical revenues (collapsed by default) -->
+	{#if historicalRevenues.length > 0}
+		<div class="border-t border-theme pt-4">
+			<button
+				type="button"
+				onclick={() => (showHistoricalRevenues = !showHistoricalRevenues)}
+				class="flex w-full items-center justify-between text-sm font-medium text-theme-secondary hover:text-theme"
+			>
+				<span>Historical Revenue ({historicalRevenues.length})</span>
+				<svg
+					class="h-4 w-4 transition-transform {showHistoricalRevenues ? 'rotate-180' : ''}"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 9l-7 7-7-7"
+					/>
+				</svg>
+			</button>
+
+			{#if showHistoricalRevenues}
+				<div class="mt-3 space-y-2">
+					{#each historicalRevenues as revenue (revenue.id)}
+						{@const linkedProduct = getLinkedProduct(revenue.waveServiceId)}
+						<div
+							class="flex items-center justify-between rounded-lg border border-theme bg-theme p-3"
+						>
+							<div>
+								<div class="flex items-center gap-2">
+									<span class="font-medium text-theme">{formatCurrency(revenue.amount)}</span>
+									{#if revenue.waveServiceId}
+										<span class="badge-primary text-xs">Linked</span>
+									{/if}
+								</div>
+								<p class="text-xs text-theme-muted">
+									{formatDate(revenue.startDate) || '—'} - {formatDate(revenue.endDate) ||
+										'Present'}
+								</p>
+								{#if linkedProduct}
+									<p class="text-xs text-theme-muted">Wave: {linkedProduct.name}</p>
+									<p class="font-mono text-xs text-theme-muted">{revenue.waveServiceId}</p>
+								{:else if revenue.waveServiceId}
+									<p class="font-mono text-xs text-theme-muted">{revenue.waveServiceId}</p>
+								{/if}
+							</div>
+							<ItemActions
+								editLabel="Edit revenue"
+								deleteLabel="Delete revenue"
+								onEdit={() => onEdit(revenue)}
+								onDelete={() => onDelete(revenue.id)}
+							/>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/ScheduleForm.svelte b/src/lib/components/admin/accounts/ScheduleForm.svelte
new file mode 100644
index 0000000..543c454
--- /dev/null
+++ b/src/lib/components/admin/accounts/ScheduleForm.svelte
@@ -0,0 +1,347 @@
+<script lang="ts">
+	import { CreateScheduleStore, UpdateScheduleStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Schedule = NonNullable<
+		GetAccount$result['account']
+	>['addresses'][number]['schedules'][number];
+
+	interface Props {
+		accountAddressId: string;
+		schedule?: Schedule;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { accountAddressId, schedule, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!schedule);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Form fields
+	let name = $state(schedule?.name ?? '');
+	let startDate = $state(schedule?.startDate ?? '');
+	let endDate = $state(schedule?.endDate ?? '');
+	let mondayService = $state(schedule?.mondayService ?? false);
+	let tuesdayService = $state(schedule?.tuesdayService ?? false);
+	let wednesdayService = $state(schedule?.wednesdayService ?? false);
+	let thursdayService = $state(schedule?.thursdayService ?? false);
+	let fridayService = $state(schedule?.fridayService ?? false);
+	let saturdayService = $state(schedule?.saturdayService ?? false);
+	let sundayService = $state(schedule?.sundayService ?? false);
+	let weekendService = $state(schedule?.weekendService ?? false);
+	let scheduleException = $state(schedule?.scheduleException ?? '');
+
+	const createStore = new CreateScheduleStore();
+	const updateStore = new UpdateScheduleStore();
+
+	// When weekend service is toggled on, clear Fri/Sat/Sun
+	function handleWeekendServiceChange(checked: boolean) {
+		weekendService = checked;
+		if (checked) {
+			fridayService = false;
+			saturdayService = false;
+			sundayService = false;
+		}
+	}
+
+	// When any of Fri/Sat/Sun is toggled on, clear weekend service
+	function handleWeekendDayChange(day: 'friday' | 'saturday' | 'sunday', checked: boolean) {
+		if (day === 'friday') fridayService = checked;
+		if (day === 'saturday') saturdayService = checked;
+		if (day === 'sunday') sundayService = checked;
+		if (checked) {
+			weekendService = false;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!startDate) {
+				error = 'Please provide a start date';
+				return;
+			}
+
+			const hasAnyService =
+				mondayService ||
+				tuesdayService ||
+				wednesdayService ||
+				thursdayService ||
+				fridayService ||
+				saturdayService ||
+				sundayService ||
+				weekendService;
+
+			if (!hasAnyService) {
+				error = 'Please select at least one service day or weekend service';
+				return;
+			}
+
+			if (isEdit && schedule) {
+				const res = await updateStore.mutate({
+					input: {
+						id: schedule.id,
+						accountAddressId,
+						name: name || null,
+						startDate,
+						endDate: endDate || null,
+						mondayService,
+						tuesdayService,
+						wednesdayService,
+						thursdayService,
+						fridayService,
+						saturdayService,
+						sundayService,
+						weekendService,
+						scheduleException: scheduleException || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						accountAddressId,
+						name: name || null,
+						startDate,
+						endDate: endDate || null,
+						mondayService,
+						tuesdayService,
+						wednesdayService,
+						thursdayService,
+						fridayService,
+						saturdayService,
+						sundayService,
+						weekendService,
+						scheduleException: scheduleException || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save schedule';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+
+	const dayCheckboxClass =
+		'h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<!-- Name -->
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme"> Schedule Name </label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Summer Schedule"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<!-- Dates -->
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">
+					Start Date <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="startDate"
+					type="date"
+					bind:value={startDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme"> End Date </label>
+				<input
+					id="endDate"
+					type="date"
+					bind:value={endDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<p class="text-xs text-theme-muted">
+			Leave end date empty to mark this as the current active schedule.
+		</p>
+
+		<!-- Service Days -->
+		<div>
+			<p class="mb-2 text-sm font-medium text-theme">
+				Service Days <span class="text-red-500">*</span>
+			</p>
+
+			<!-- Weekday checkboxes -->
+			<div class="grid grid-cols-4 gap-3">
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={mondayService}
+						disabled={submitting}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme">Mon</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={tuesdayService}
+						disabled={submitting}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme">Tue</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={wednesdayService}
+						disabled={submitting}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme">Wed</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={thursdayService}
+						disabled={submitting}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme">Thu</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						checked={fridayService}
+						onchange={(e) => handleWeekendDayChange('friday', e.currentTarget.checked)}
+						disabled={submitting || weekendService}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme {weekendService ? 'opacity-50' : ''}">Fri</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						checked={saturdayService}
+						onchange={(e) => handleWeekendDayChange('saturday', e.currentTarget.checked)}
+						disabled={submitting || weekendService}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme {weekendService ? 'opacity-50' : ''}">Sat</span>
+				</label>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						checked={sundayService}
+						onchange={(e) => handleWeekendDayChange('sunday', e.currentTarget.checked)}
+						disabled={submitting || weekendService}
+						class={dayCheckboxClass}
+					/>
+					<span class="text-sm text-theme {weekendService ? 'opacity-50' : ''}">Sun</span>
+				</label>
+			</div>
+
+			<!-- Weekend Service toggle -->
+			<div class="mt-3 border-t border-theme pt-3">
+				<label class="flex items-start gap-2">
+					<input
+						type="checkbox"
+						checked={weekendService}
+						onchange={(e) => handleWeekendServiceChange(e.currentTarget.checked)}
+						disabled={submitting}
+						class="mt-0.5 {dayCheckboxClass}"
+					/>
+					<span class="flex flex-col">
+						<span class="text-sm font-medium text-theme">Weekend Service</span>
+						<span class="text-xs text-theme-muted">
+							Single service visit on Friday that can be performed anytime Friday-Sunday
+						</span>
+					</span>
+				</label>
+			</div>
+		</div>
+
+		<!-- Schedule Exception -->
+		<div>
+			<label for="scheduleException" class="mb-1.5 block text-sm font-medium text-theme">
+				Schedule Notes / Exceptions
+			</label>
+			<textarea
+				id="scheduleException"
+				bind:value={scheduleException}
+				disabled={submitting}
+				rows={3}
+				placeholder="Any special requirements or exceptions..."
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<!-- Actions -->
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Schedule'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/ScopeForm.svelte b/src/lib/components/admin/accounts/ScopeForm.svelte
new file mode 100644
index 0000000..c81e859
--- /dev/null
+++ b/src/lib/components/admin/accounts/ScopeForm.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { createScope, updateScope } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Scope = NonNullable<GetAccount$result['account']>['addresses'][number]['scopes'][number];
+
+	interface Props {
+		accountId: string;
+		accountAddressId: string;
+		scope?: Scope;
+		existingScopes?: Scope[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let {
+		accountId,
+		accountAddressId,
+		scope,
+		existingScopes = [],
+		onSuccess,
+		onCancel
+	}: Props = $props();
+
+	let isEdit = $derived(!!scope);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let name = $state(scope?.name ?? '');
+	let description = $state(scope?.description ?? '');
+
+	// Check if there's already an active scope (other than the one being edited)
+	let existingActiveScope = $derived(existingScopes.find((s) => s.isActive && s.id !== scope?.id));
+	let hasExistingActiveScope = $derived(!!existingActiveScope);
+
+	// Default to active only if there's no existing active scope
+	let isActive = $state(scope?.isActive ?? !existingScopes.some((s) => s.isActive));
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name.trim()) {
+				error = 'Please provide a scope name';
+				return;
+			}
+
+			if (isEdit && scope) {
+				await updateScope({
+					id: scope.id,
+					name: name.trim(),
+					description: description.trim(),
+					isActive
+				});
+			} else {
+				await createScope({
+					accountId,
+					accountAddressId,
+					name: name.trim(),
+					description: description.trim(),
+					isActive
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save scope';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Scope Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Standard Cleaning"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+				Description
+			</label>
+			<textarea
+				id="description"
+				bind:value={description}
+				disabled={submitting}
+				rows="3"
+				placeholder="Optional description of this scope"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div>
+			<div class="flex items-center gap-2">
+				<input
+					id="isActive"
+					type="checkbox"
+					bind:checked={isActive}
+					disabled={submitting || (hasExistingActiveScope && !scope?.isActive)}
+					class="h-4 w-4 rounded border-input text-primary-500 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+				<label for="isActive" class="text-sm text-theme">Active scope</label>
+			</div>
+			{#if hasExistingActiveScope && !scope?.isActive}
+				<p class="mt-1.5 text-xs text-warning">
+					"{existingActiveScope?.name}" is currently the active scope. Deactivate it first to make
+					this scope active.
+				</p>
+			{/if}
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Scope'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/accounts/ScopeSection.svelte b/src/lib/components/admin/accounts/ScopeSection.svelte
new file mode 100644
index 0000000..14ebf36
--- /dev/null
+++ b/src/lib/components/admin/accounts/ScopeSection.svelte
@@ -0,0 +1,700 @@
+<script lang="ts">
+	import type { ScopeType, AreaType, TaskType } from '$lib/stores/scopeEditor.svelte';
+	import { getFrequencyShortLabel } from '$lib/stores/scopeEditor.svelte';
+	import type { GetScopeTemplates$result } from '$houdini';
+
+	type ScopeTemplateType = GetScopeTemplates$result['scopeTemplates'][number];
+
+	interface Props {
+		scopes: ScopeType[];
+		scopeTemplates?: ScopeTemplateType[];
+		expandedScopes: Set<string>;
+		expandedAreas: Set<string>;
+		scopeError?: string;
+		onToggleScope: (scopeId: string) => void;
+		onToggleArea: (areaId: string) => void;
+		onAddScope: () => void;
+		onAddScopeFromTemplate?: (templateId: string) => void;
+		onEditScope: (scope: ScopeType) => void;
+		onDeleteScope: (scopeId: string) => void;
+		onAddArea: (scopeId: string, nextOrder: number) => void;
+		onEditArea: (scopeId: string, area: AreaType) => void;
+		onDeleteArea: (areaId: string) => void;
+		onAddTask: (areaId: string, nextOrder: number) => void;
+		onEditTask: (areaId: string, task: TaskType) => void;
+		onDeleteTask: (taskId: string) => void;
+		onClearError?: () => void;
+	}
+
+	let {
+		scopes,
+		scopeTemplates = [],
+		expandedScopes,
+		expandedAreas,
+		scopeError = '',
+		onToggleScope,
+		onToggleArea,
+		onAddScope,
+		onAddScopeFromTemplate,
+		onEditScope,
+		onDeleteScope,
+		onAddArea,
+		onEditArea,
+		onDeleteArea,
+		onAddTask,
+		onEditTask,
+		onDeleteTask,
+		onClearError
+	}: Props = $props();
+
+	let showTemplateDropdown = $state(false);
+
+	// Separate active and inactive scopes
+	let activeScopes = $derived(scopes.filter((s) => s.isActive));
+	let inactiveScopes = $derived(scopes.filter((s) => !s.isActive));
+
+	// Toggle for showing scope history
+	let showScopeHistory = $state(false);
+
+	function getTotalTasks(scope: ScopeType): number {
+		return scope.areas?.reduce((acc, area) => acc + (area.tasks?.length ?? 0), 0) ?? 0;
+	}
+
+	function sortedAreas(areas: AreaType[]): AreaType[] {
+		return [...areas].sort((a, b) => a.order - b.order);
+	}
+
+	function sortedTasks(tasks: TaskType[]): TaskType[] {
+		return [...tasks].sort((a, b) => a.order - b.order);
+	}
+</script>
+
+<div class="mt-3 border-t border-theme pt-3">
+	<!-- Scope Error Alert -->
+	{#if scopeError}
+		<div class="mb-2 flex items-start gap-2 rounded-lg border border-amber-400 bg-amber-50 p-2 text-xs text-amber-800 dark:border-amber-600 dark:bg-amber-900/20 dark:text-amber-300">
+			<svg class="mt-0.5 h-4 w-4 shrink-0" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+			</svg>
+			<span class="flex-1">{scopeError}</span>
+			{#if onClearError}
+				<button
+					type="button"
+					onclick={onClearError}
+					class="shrink-0 font-medium underline hover:no-underline"
+				>
+					Dismiss
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="mb-2 flex items-center justify-between">
+		<p class="text-xs font-medium tracking-wide text-theme-muted uppercase">Scopes</p>
+		<div class="relative">
+			{#if scopeTemplates.length > 0 && onAddScopeFromTemplate}
+				<button
+					type="button"
+					onclick={() => (showTemplateDropdown = !showTemplateDropdown)}
+					class="flex items-center gap-1 text-xs font-medium text-secondary-500 hover:text-secondary-600"
+				>
+					+ Add Scope
+					<svg class="h-3 w-3" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</button>
+				{#if showTemplateDropdown}
+					<!-- Backdrop to close dropdown -->
+					<button
+						type="button"
+						class="fixed inset-0 z-10"
+						onclick={() => (showTemplateDropdown = false)}
+						aria-label="Close dropdown"
+					></button>
+					<!-- Dropdown menu -->
+					<div
+						class="absolute right-0 z-20 mt-1 w-48 rounded-lg border border-theme bg-theme-card py-1 shadow-theme-lg"
+					>
+						<button
+							type="button"
+							onclick={() => {
+								showTemplateDropdown = false;
+								onAddScope();
+							}}
+							class="block w-full interactive px-3 py-1.5 text-left text-xs text-theme"
+						>
+							Blank Scope
+						</button>
+						<div class="my-1 border-t border-theme"></div>
+						<p class="px-3 py-1 text-[10px] font-medium text-theme-muted uppercase">
+							From Template
+						</p>
+						{#each scopeTemplates as template (template.id)}
+							<button
+								type="button"
+								onclick={() => {
+									showTemplateDropdown = false;
+									onAddScopeFromTemplate(template.id);
+								}}
+								class="block w-full interactive px-3 py-1.5 text-left text-xs text-theme"
+							>
+								{template.name}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<button
+					type="button"
+					onclick={onAddScope}
+					class="text-xs font-medium text-secondary-500 hover:text-secondary-600"
+				>
+					+ Add Scope
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	{#if activeScopes.length > 0 || inactiveScopes.length > 0}
+		<div class="space-y-2">
+			<!-- Active Scopes (always visible) -->
+			{#each activeScopes as scope (scope.id)}
+				{@const isExpanded = expandedScopes.has(scope.id)}
+				{@const totalAreas = scope.areas?.length ?? 0}
+				{@const totalTasks = getTotalTasks(scope)}
+
+				<div
+					class="rounded-lg border border-theme bg-theme-card {scope.isActive
+						? 'border-l-2 border-l-secondary-500'
+						: ''}"
+				>
+					<!-- Scope Header -->
+					<div class="flex items-start justify-between gap-1 p-2">
+						<button
+							type="button"
+							onclick={() => onToggleScope(scope.id)}
+							class="min-w-0 flex-1 text-left"
+						>
+							<span class="flex items-center gap-2">
+								<svg
+									class="h-4 w-4 flex-shrink-0 text-theme-muted transition-transform {isExpanded
+										? 'rotate-90'
+										: ''}"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+								<span class="font-medium text-theme">{scope.name}</span>
+								{#if scope.isActive}
+									<span
+										class="rounded bg-secondary-100 px-1.5 py-0.5 text-xs font-medium text-secondary-700 dark:bg-secondary-900/40 dark:text-secondary-400"
+									>
+										Active
+									</span>
+								{/if}
+							</span>
+							<span class="mt-0.5 block pl-6 text-xs text-theme-muted">
+								{totalAreas}
+								{totalAreas === 1 ? 'area' : 'areas'}, {totalTasks}
+								{totalTasks === 1 ? 'task' : 'tasks'}
+							</span>
+						</button>
+						<div class="flex shrink-0 items-center gap-1">
+							<button
+								type="button"
+								onclick={() => onEditScope(scope)}
+								class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Edit scope"
+							>
+								<svg
+									class="h-3.5 w-3.5"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+									/>
+								</svg>
+							</button>
+							<button
+								type="button"
+								onclick={() => onDeleteScope(scope.id)}
+								class="rounded p-1 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+								aria-label="Delete scope"
+							>
+								<svg
+									class="h-3.5 w-3.5"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+
+					<!-- Expanded Content -->
+					{#if isExpanded}
+						<div class="border-t border-theme px-2 pb-2">
+							{#if scope.description}
+								<p class="mt-2 text-xs text-theme-muted italic">{scope.description}</p>
+							{/if}
+
+							<!-- Areas -->
+							<div class="mt-2">
+								<div class="mb-1 flex items-center justify-between">
+									<span class="text-xs font-medium text-theme-secondary">Areas</span>
+									<button
+										type="button"
+										onclick={() => onAddArea(scope.id, totalAreas)}
+										class="text-xs text-secondary-500 hover:text-secondary-600"
+									>
+										+ Add
+									</button>
+								</div>
+
+								{#if scope.areas && scope.areas.length > 0}
+									<div class="space-y-1">
+										{#each sortedAreas(scope.areas) as area (area.id)}
+											{@const taskCount = area.tasks?.length ?? 0}
+											{@const isAreaExpanded = expandedAreas.has(area.id)}
+											<div
+												class="rounded border border-l-2 border-theme border-l-secondary-400 bg-theme"
+											>
+												<!-- Area Header -->
+												<div class="flex items-start justify-between gap-1 p-2">
+													<button
+														type="button"
+														onclick={() => onToggleArea(area.id)}
+														class="min-w-0 flex-1 text-left"
+													>
+														<span class="flex items-center gap-2">
+															<svg
+																class="h-3 w-3 flex-shrink-0 text-theme-muted transition-transform {isAreaExpanded
+																	? 'rotate-90'
+																	: ''}"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M9 5l7 7-7 7"
+																/>
+															</svg>
+															<span class="text-sm font-medium text-theme">{area.name}</span>
+														</span>
+														<span class="mt-0.5 block pl-5 text-xs text-theme-muted">
+															{taskCount}
+															{taskCount === 1 ? 'task' : 'tasks'}
+														</span>
+													</button>
+													<div class="flex shrink-0 items-center gap-1">
+														<button
+															type="button"
+															onclick={() => onAddTask(area.id, taskCount)}
+															class="rounded p-1 text-secondary-500 hover:bg-secondary-500/10"
+															aria-label="Add task"
+															title="Add task"
+														>
+															<svg
+																class="h-3 w-3"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M12 4v16m8-8H4"
+																/>
+															</svg>
+														</button>
+														<button
+															type="button"
+															onclick={() => onEditArea(scope.id, area)}
+															class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+															aria-label="Edit area"
+														>
+															<svg
+																class="h-3 w-3"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+																/>
+															</svg>
+														</button>
+														<button
+															type="button"
+															onclick={() => onDeleteArea(area.id)}
+															class="rounded p-1 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+															aria-label="Delete area"
+														>
+															<svg
+																class="h-3 w-3"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+																/>
+															</svg>
+														</button>
+													</div>
+												</div>
+
+												<!-- Tasks (expanded content) -->
+												{#if isAreaExpanded}
+													<div class="border-t border-theme px-2 pb-2">
+														{#if area.tasks && area.tasks.length > 0}
+															<div class="mt-2 space-y-2">
+																{#each sortedTasks(area.tasks) as task (task.id)}
+																	<div class="rounded bg-gray-50 p-2 text-xs dark:bg-gray-800/50">
+																		<!-- Task actions -->
+																		<div class="mb-2 flex items-center justify-end gap-0.5">
+																			<button
+																				type="button"
+																				onclick={() => onEditTask(area.id, task)}
+																				class="rounded p-0.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+																				aria-label="Edit task"
+																			>
+																				<svg
+																					class="h-3 w-3"
+																					style="fill: none"
+																					stroke="currentColor"
+																					viewBox="0 0 24 24"
+																				>
+																					<path
+																						stroke-linecap="round"
+																						stroke-linejoin="round"
+																						stroke-width="2"
+																						d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+																					/>
+																				</svg>
+																			</button>
+																			<button
+																				type="button"
+																				onclick={() => onDeleteTask(task.id)}
+																				class="rounded p-0.5 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+																				aria-label="Delete task"
+																			>
+																				<svg
+																					class="h-3 w-3"
+																					style="fill: none"
+																					stroke="currentColor"
+																					viewBox="0 0 24 24"
+																				>
+																					<path
+																						stroke-linecap="round"
+																						stroke-linejoin="round"
+																						stroke-width="2"
+																						d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+																					/>
+																				</svg>
+																			</button>
+																		</div>
+																		<!-- Task fields stacked vertically -->
+																		<div class="space-y-2">
+																			<div>
+																				<span
+																					class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+																				>
+																					Scope Description
+																					<button
+																						type="button"
+																						class="group relative"
+																						aria-label="What is scope description?"
+																					>
+																						<svg
+																							class="h-3 w-3 text-theme-muted hover:text-theme"
+																							style="fill: none"
+																							stroke="currentColor"
+																							viewBox="0 0 24 24"
+																						>
+																							<path
+																								stroke-linecap="round"
+																								stroke-linejoin="round"
+																								stroke-width="2"
+																								d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+																							/>
+																						</svg>
+																						<span
+																							class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
+																						>
+																							The customer-facing description of the task
+																						</span>
+																					</button>
+																				</span>
+																				<p class="text-theme">{task.description}</p>
+																			</div>
+																			<div>
+																				<span
+																					class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+																				>
+																					Checklist Description
+																					<button
+																						type="button"
+																						class="group relative"
+																						aria-label="What is checklist description?"
+																					>
+																						<svg
+																							class="h-3 w-3 text-theme-muted hover:text-theme"
+																							style="fill: none"
+																							stroke="currentColor"
+																							viewBox="0 0 24 24"
+																						>
+																							<path
+																								stroke-linecap="round"
+																								stroke-linejoin="round"
+																								stroke-width="2"
+																								d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+																							/>
+																						</svg>
+																						<span
+																							class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
+																						>
+																							What team members see during a session
+																						</span>
+																					</button>
+																				</span>
+																				<p class="text-theme">{task.checklistDescription || '—'}</p>
+																			</div>
+																			<div>
+																				<span
+																					class="text-[10px] font-medium text-theme-muted uppercase"
+																					>Frequency</span
+																				>
+																				<p class="text-theme">
+																					{getFrequencyShortLabel(task.frequency)}
+																				</p>
+																			</div>
+																		</div>
+																	</div>
+																{/each}
+															</div>
+														{:else}
+															<p class="mt-2 text-center text-xs text-theme-muted">No tasks yet</p>
+														{/if}
+													</div>
+												{/if}
+											</div>
+										{/each}
+									</div>
+								{:else}
+									<p class="text-center text-xs text-theme-muted">No areas yet</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/each}
+
+			<!-- Inactive Scopes (collapsed by default) -->
+			{#if inactiveScopes.length > 0}
+				<div class="mt-2">
+					<button
+						type="button"
+						onclick={() => (showScopeHistory = !showScopeHistory)}
+						class="text-xs font-medium text-theme-muted hover:text-theme-secondary"
+					>
+						{showScopeHistory ? 'Hide' : 'Show'} scope history ({inactiveScopes.length})
+					</button>
+
+					{#if showScopeHistory}
+						<div class="mt-2 space-y-2">
+							{#each inactiveScopes as scope (scope.id)}
+								{@const isExpanded = expandedScopes.has(scope.id)}
+								{@const totalAreas = scope.areas?.length ?? 0}
+								{@const totalTasks = getTotalTasks(scope)}
+
+								<div class="rounded-lg border border-theme bg-theme-card opacity-60">
+									<!-- Scope Header -->
+									<div class="flex items-start justify-between gap-1 p-2">
+										<button
+											type="button"
+											onclick={() => onToggleScope(scope.id)}
+											class="min-w-0 flex-1 text-left"
+										>
+											<span class="flex items-center gap-2">
+												<svg
+													class="h-4 w-4 flex-shrink-0 text-theme-muted transition-transform {isExpanded
+														? 'rotate-90'
+														: ''}"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M9 5l7 7-7 7"
+													/>
+												</svg>
+												<span class="font-medium text-theme">{scope.name}</span>
+												<span class="badge-neutral">Inactive</span>
+											</span>
+											<span class="mt-0.5 block pl-6 text-xs text-theme-muted">
+												{totalAreas}
+												{totalAreas === 1 ? 'area' : 'areas'}, {totalTasks}
+												{totalTasks === 1 ? 'task' : 'tasks'}
+											</span>
+										</button>
+									</div>
+
+									<!-- Expanded Content (read-only for inactive scopes) -->
+									{#if isExpanded}
+										<div class="border-t border-theme px-2 pb-2">
+											{#if scope.description}
+												<p class="mt-2 text-xs text-theme-muted italic">{scope.description}</p>
+											{/if}
+
+											<!-- Areas (read-only) -->
+											<div class="mt-2">
+												<span class="mb-1 text-xs font-medium text-theme-secondary">Areas</span>
+
+												{#if scope.areas && scope.areas.length > 0}
+													<div class="space-y-1">
+														{#each sortedAreas(scope.areas) as area (area.id)}
+															{@const taskCount = area.tasks?.length ?? 0}
+															{@const isAreaExpanded = expandedAreas.has(area.id)}
+															<div
+																class="rounded border border-l-2 border-theme border-l-secondary-400 bg-theme"
+															>
+																<!-- Area Header -->
+																<div class="flex items-start justify-between gap-1 p-2">
+																	<button
+																		type="button"
+																		onclick={() => onToggleArea(area.id)}
+																		class="min-w-0 flex-1 text-left"
+																	>
+																		<span class="flex items-center gap-2">
+																			<svg
+																				class="h-3 w-3 flex-shrink-0 text-theme-muted transition-transform {isAreaExpanded
+																					? 'rotate-90'
+																					: ''}"
+																				style="fill: none"
+																				stroke="currentColor"
+																				viewBox="0 0 24 24"
+																			>
+																				<path
+																					stroke-linecap="round"
+																					stroke-linejoin="round"
+																					stroke-width="2"
+																					d="M9 5l7 7-7 7"
+																				/>
+																			</svg>
+																			<span class="text-sm font-medium text-theme">{area.name}</span
+																			>
+																		</span>
+																		<span class="mt-0.5 block pl-5 text-xs text-theme-muted">
+																			{taskCount}
+																			{taskCount === 1 ? 'task' : 'tasks'}
+																		</span>
+																	</button>
+																</div>
+
+																<!-- Tasks (expanded content, read-only) -->
+																{#if isAreaExpanded}
+																	<div class="border-t border-theme px-2 pb-2">
+																		{#if area.tasks && area.tasks.length > 0}
+																			<div class="mt-2 space-y-2">
+																				{#each sortedTasks(area.tasks) as task (task.id)}
+																					<div
+																						class="rounded bg-gray-50 p-2 text-xs dark:bg-gray-800/50"
+																					>
+																						<!-- Task fields stacked vertically (no actions) -->
+																						<div class="space-y-2">
+																							<div>
+																								<span
+																									class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+																								>
+																									Scope Description
+																								</span>
+																								<p class="text-theme">{task.description}</p>
+																							</div>
+																							<div>
+																								<span
+																									class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+																								>
+																									Checklist Description
+																								</span>
+																								<p class="text-theme">
+																									{task.checklistDescription || '—'}
+																								</p>
+																							</div>
+																							<div>
+																								<span
+																									class="text-[10px] font-medium text-theme-muted uppercase"
+																									>Frequency</span
+																								>
+																								<p class="text-theme">
+																									{getFrequencyShortLabel(task.frequency)}
+																								</p>
+																							</div>
+																						</div>
+																					</div>
+																				{/each}
+																			</div>
+																		{:else}
+																			<p class="mt-2 text-center text-xs text-theme-muted">
+																				No tasks
+																			</p>
+																		{/if}
+																	</div>
+																{/if}
+															</div>
+														{/each}
+													</div>
+												{:else}
+													<p class="text-center text-xs text-theme-muted">No areas</p>
+												{/if}
+											</div>
+										</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<p class="text-xs text-theme-muted">No scopes defined for this address.</p>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/accounts/TaskForm.svelte b/src/lib/components/admin/accounts/TaskForm.svelte
new file mode 100644
index 0000000..021be56
--- /dev/null
+++ b/src/lib/components/admin/accounts/TaskForm.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { createTask, updateTask } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetAccount$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Task = NonNullable<
+		GetAccount$result['account']
+	>['addresses'][number]['scopes'][number]['areas'][number]['tasks'][number];
+
+	const FREQUENCY_OPTIONS = [
+		{ value: 'daily', label: 'Daily' },
+		{ value: 'weekly', label: 'Weekly' },
+		{ value: 'monthly', label: 'Monthly' },
+		{ value: 'quarterly', label: 'Quarterly' },
+		{ value: 'triannual', label: 'Triannual (3x/year)' },
+		{ value: 'annual', label: 'Annual' },
+		{ value: 'as_needed', label: 'As Needed' }
+	];
+
+	const VALID_FREQUENCIES = new Set(FREQUENCY_OPTIONS.map((o) => o.value));
+
+	// Sanitize frequency to ensure it's a valid enum value (lowercase)
+	function sanitizeFrequency(freq: string | null | undefined): string {
+		if (!freq) return 'weekly';
+		const lower = freq.toLowerCase();
+		if (VALID_FREQUENCIES.has(lower)) {
+			return lower;
+		}
+		return 'weekly'; // Default to weekly for invalid/legacy values
+	}
+
+	interface Props {
+		areaId: string;
+		task?: Task;
+		nextOrder?: number;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { areaId, task, nextOrder = 0, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!task);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let description = $state(task?.description ?? '');
+	let checklistDescription = $state(task?.checklistDescription ?? '');
+	let frequency = $state(sanitizeFrequency(task?.frequency));
+	let order = $state(task?.order ?? nextOrder);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!description.trim()) {
+				error = 'Please provide a task description';
+				return;
+			}
+
+			if (isEdit && task) {
+				await updateTask({
+					id: task.id,
+					description: description.trim(),
+					checklistDescription: checklistDescription.trim() || null,
+					frequency,
+					isConditional: false,
+					order
+				});
+			} else {
+				await createTask({
+					areaId,
+					description: description.trim(),
+					checklistDescription: checklistDescription.trim() || null,
+					frequency,
+					isConditional: false,
+					order
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save task';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+				Task Description <span class="text-red-500">*</span>
+			</label>
+			<textarea
+				id="description"
+				bind:value={description}
+				disabled={submitting}
+				rows="2"
+				placeholder="e.g., Empty trash cans and replace liners"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div>
+			<label for="checklistDescription" class="mb-1.5 block text-sm font-medium text-theme">
+				Checklist Note
+			</label>
+			<input
+				id="checklistDescription"
+				type="text"
+				bind:value={checklistDescription}
+				disabled={submitting}
+				placeholder="Optional short note for checklist"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+			<p class="mt-1 text-xs text-theme-muted">Shortened version shown on service checklists</p>
+		</div>
+
+		<div>
+			<label for="frequency" class="mb-1.5 block text-sm font-medium text-theme">
+				Frequency <span class="text-red-500">*</span>
+			</label>
+			<div class="relative w-full">
+				<select
+					id="frequency"
+					bind:value={frequency}
+					disabled={submitting}
+					class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					{#each FREQUENCY_OPTIONS as option (option.value)}
+						<option value={option.value}>{option.label}</option>
+					{/each}
+				</select>
+				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+					<svg
+						class="h-4 w-4 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</div>
+			</div>
+		</div>
+
+		<div>
+			<label for="order" class="mb-1.5 block text-sm font-medium text-theme"> Display Order </label>
+			<input
+				id="order"
+				type="number"
+				min="0"
+				bind:value={order}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Task'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/calendar/EventForm.svelte b/src/lib/components/admin/calendar/EventForm.svelte
new file mode 100644
index 0000000..2b5aaad
--- /dev/null
+++ b/src/lib/components/admin/calendar/EventForm.svelte
@@ -0,0 +1,575 @@
+<script lang="ts">
+	import {
+		calendarService,
+		type CalendarEvent,
+		type Attendee,
+		type CreateEventInput,
+		type EventReminder,
+		type EventReminders,
+		EVENT_COLORS
+	} from '$lib/services/calendar';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { SvelteDate, SvelteSet } from 'svelte/reactivity';
+
+	interface TeamProfile {
+		id: string;
+		fullName: string;
+		email?: string | null;
+		role: string;
+		status: string;
+	}
+
+	interface InitialValues {
+		summary?: string;
+		location?: string;
+		date?: string;
+	}
+
+	interface Props {
+		teamProfiles: TeamProfile[];
+		event?: CalendarEvent | null;
+		initialValues?: InitialValues;
+		onSuccess?: (eventId: string) => void;
+		onCancel?: () => void;
+	}
+
+	let { teamProfiles, event = null, initialValues, onSuccess, onCancel }: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Form fields - prioritize event (edit mode), then initialValues (pre-population), then defaults
+	let summary = $state(event?.summary ?? initialValues?.summary ?? '');
+	let description = $state(event?.description ?? '');
+	let location = $state(event?.location ?? initialValues?.location ?? '');
+	let isAllDay = $state(event ? !event.start.dateTime && !!event.start.date : false);
+
+	// After midnight toggle - for when work starts after midnight but belongs to previous business day
+	let isAfterMidnight = $state(false);
+
+	// Helper to increment a date string by 1 day
+	function incrementDate(dateStr: string): string {
+		const date = new SvelteDate(dateStr + 'T12:00:00'); // noon to avoid DST issues
+		date.setDate(date.getDate() + 1);
+		return date.toISOString().split('T')[0];
+	}
+
+	// Parse existing event dates/times
+	function parseDateTime(eventDateTime: { dateTime?: string; date?: string } | undefined): {
+		date: string;
+		time: string;
+	} {
+		if (!eventDateTime) {
+			const now = new Date();
+			return {
+				date: now.toISOString().split('T')[0],
+				time: '09:00'
+			};
+		}
+
+		if (eventDateTime.dateTime) {
+			const dt = new Date(eventDateTime.dateTime);
+			return {
+				date: dt.toISOString().split('T')[0],
+				time: dt.toTimeString().slice(0, 5)
+			};
+		}
+
+		if (eventDateTime.date) {
+			return {
+				date: eventDateTime.date,
+				time: '09:00'
+			};
+		}
+
+		const now = new Date();
+		return {
+			date: now.toISOString().split('T')[0],
+			time: '09:00'
+		};
+	}
+
+	const startParsed = parseDateTime(event?.start);
+	const endParsed = parseDateTime(event?.end);
+
+	// Use initialValues for date if no event is provided
+	let startDate = $state(event ? startParsed.date : (initialValues?.date ?? startParsed.date));
+	let startTime = $state(startParsed.time);
+	let endDate = $state(event ? endParsed.date : (initialValues?.date ?? endParsed.date));
+	let endTime = $state(endParsed.time);
+
+	// Actual calendar dates (incremented by 1 day if after midnight is checked)
+	let actualStartDate = $derived(
+		isAfterMidnight && !isAllDay ? incrementDate(startDate) : startDate
+	);
+	let actualEndDate = $derived(isAfterMidnight && !isAllDay ? incrementDate(endDate) : endDate);
+
+	// Selected attendees (set of email addresses)
+	let selectedAttendeeEmails = new SvelteSet<string>(event?.attendees?.map((a) => a.email) ?? []);
+
+	// Reminder settings
+	let useDefaultReminders = $state(event?.reminders?.useDefault ?? true);
+	let customReminders = $state<EventReminder[]>(event?.reminders?.overrides ?? []);
+
+	// Event color
+	let selectedColorId = $state<string | undefined>(event?.colorId);
+
+	// Active team members with emails (ensure email is non-null)
+	let availableAttendees = $derived(
+		teamProfiles.filter(
+			(p): p is typeof p & { email: string } => p.status === 'ACTIVE' && !!p.email
+		)
+	);
+
+	function toggleAttendee(email: string) {
+		if (selectedAttendeeEmails.has(email)) {
+			selectedAttendeeEmails.delete(email);
+		} else {
+			selectedAttendeeEmails.add(email);
+		}
+	}
+
+	function isAttendeeSelected(email: string): boolean {
+		return selectedAttendeeEmails.has(email);
+	}
+
+	// Reminder helper functions
+	const reminderPresets = [
+		{ label: '10 minutes before', minutes: 10 },
+		{ label: '30 minutes before', minutes: 30 },
+		{ label: '1 hour before', minutes: 60 },
+		{ label: '1 day before', minutes: 1440 },
+		{ label: '1 week before', minutes: 10080 }
+	];
+
+	function addReminder() {
+		customReminders = [...customReminders, { method: 'popup', minutes: 30 }];
+	}
+
+	function removeReminder(index: number) {
+		customReminders = customReminders.filter((_, i) => i !== index);
+	}
+
+	function handleReminderMethodChange(index: number, e: Event) {
+		const method = (e.currentTarget as HTMLSelectElement).value as 'email' | 'popup';
+		customReminders = customReminders.map((r, i) => (i === index ? { ...r, method } : r));
+	}
+
+	function handleReminderMinutesChange(index: number, e: Event) {
+		const minutes = parseInt((e.currentTarget as HTMLSelectElement).value);
+		customReminders = customReminders.map((r, i) => (i === index ? { ...r, minutes } : r));
+	}
+
+	// Convert local date/time to UTC ISO string for the API
+	function toUtcIsoString(date: string, time: string): string {
+		// Parse as local time (browser's timezone - US/Eastern for our team)
+		const localDateTime = new Date(`${date}T${time}:00`);
+		// Convert to UTC ISO string (includes Z suffix)
+		return localDateTime.toISOString();
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!summary.trim()) {
+				error = 'Please enter an event title';
+				return;
+			}
+
+			// Build attendees from selected emails
+			const attendees: Attendee[] = Array.from(selectedAttendeeEmails).map((email) => {
+				const profile = teamProfiles.find((p) => p.email === email);
+				return {
+					email,
+					displayName: profile?.fullName
+				};
+			});
+
+			// Build reminders
+			const reminders: EventReminders | undefined = useDefaultReminders
+				? { useDefault: true }
+				: customReminders.length > 0
+					? { useDefault: false, overrides: customReminders }
+					: undefined;
+
+			// Build event input - use actualStartDate/actualEndDate for timed events (handles after-midnight shift)
+			// For timed events, convert to UTC ISO string so the scheduler API can parse it
+			const input: CreateEventInput = {
+				summary: summary.trim(),
+				description: description.trim() || undefined,
+				location: location.trim() || undefined,
+				start: isAllDay
+					? { date: startDate }
+					: { dateTime: toUtcIsoString(actualStartDate, startTime) },
+				end: isAllDay
+					? { date: endDate }
+					: { dateTime: toUtcIsoString(actualEndDate, endTime) },
+				attendees: attendees.length > 0 ? attendees : undefined,
+				reminders,
+				colorId: selectedColorId
+			};
+
+			let eventId: string;
+
+			if (event) {
+				// Update existing event
+				const result = await calendarService.updateEvent(event.id, input);
+
+				if (result.error) {
+					error = result.error.message;
+					return;
+				}
+				eventId = event.id;
+			} else {
+				// Create new event
+				const result = await calendarService.createEvent(input);
+
+				if (result.error) {
+					error = result.error.message;
+					return;
+				}
+				eventId = result.data!.id;
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.(eventId);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save event';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="flex h-full flex-col">
+	<div class="flex-1 space-y-6 overflow-y-auto p-6">
+		<!-- Event Title -->
+		<div>
+			<label for="summary" class="mb-1.5 block text-sm font-medium text-theme">Event Title</label>
+			<input
+				type="text"
+				id="summary"
+				bind:value={summary}
+				placeholder="e.g., Team Meeting"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+				required
+			/>
+		</div>
+
+		<!-- All Day Toggle -->
+		<div class="flex items-center gap-3">
+			<input
+				type="checkbox"
+				id="allDay"
+				bind:checked={isAllDay}
+				class="h-4 w-4 rounded border-theme text-accent7-500 focus:ring-accent7-500"
+			/>
+			<label for="allDay" class="text-sm font-medium text-theme">All-day event</label>
+		</div>
+
+		<!-- After Midnight Toggle (only for timed events) -->
+		{#if !isAllDay}
+			<div
+				class="flex items-center gap-3 rounded-lg border border-amber-400/50 bg-amber-50 p-3 dark:border-amber-500/30 dark:bg-amber-900/20"
+			>
+				<input
+					type="checkbox"
+					id="afterMidnight"
+					bind:checked={isAfterMidnight}
+					class="h-4 w-4 rounded border-amber-400 text-amber-500 focus:ring-amber-500"
+				/>
+				<label for="afterMidnight" class="flex-1">
+					<span class="block text-sm font-medium text-amber-800 dark:text-amber-200">
+						Work begins after midnight
+					</span>
+					{#if isAfterMidnight}
+						<span class="block text-xs text-amber-600 dark:text-amber-400">
+							Calendar event will be scheduled for {actualStartDate} (next calendar day)
+						</span>
+					{:else}
+						<span class="block text-xs text-amber-600 dark:text-amber-400">
+							Check if work starts after midnight but belongs to the previous business day
+						</span>
+					{/if}
+				</label>
+			</div>
+		{/if}
+
+		<!-- Date/Time Fields -->
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<!-- Start -->
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">Start</label>
+				<input
+					type="date"
+					id="startDate"
+					bind:value={startDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+					required
+				/>
+				{#if !isAllDay}
+					<input
+						type="time"
+						id="startTime"
+						bind:value={startTime}
+						class="mt-2 w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+						required
+					/>
+				{/if}
+			</div>
+
+			<!-- End -->
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme">End</label>
+				<input
+					type="date"
+					id="endDate"
+					bind:value={endDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+					required
+				/>
+				{#if !isAllDay}
+					<input
+						type="time"
+						id="endTime"
+						bind:value={endTime}
+						class="mt-2 w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+						required
+					/>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Location -->
+		<div>
+			<label for="location" class="mb-1.5 block text-sm font-medium text-theme"
+				>Location (optional)</label
+			>
+			<input
+				type="text"
+				id="location"
+				bind:value={location}
+				placeholder="e.g., Conference Room A"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+			/>
+		</div>
+
+		<!-- Description -->
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme"
+				>Description (optional)</label
+			>
+			<textarea
+				id="description"
+				bind:value={description}
+				rows="3"
+				placeholder="Add event details..."
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+			></textarea>
+		</div>
+
+		<!-- Event Color -->
+		<div>
+			<span class="mb-2 block text-sm font-medium text-theme">Color (optional)</span>
+			<div class="flex flex-wrap gap-2">
+				<!-- No color option -->
+				<button
+					type="button"
+					onclick={() => (selectedColorId = undefined)}
+					class="flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all
+						{selectedColorId === undefined
+						? 'border-accent7-500 ring-2 ring-accent7-500/30'
+						: 'border-theme hover:border-theme-secondary'}"
+					aria-label="No color"
+					title="No color"
+				>
+					<svg class="h-4 w-4 text-theme-muted" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+				{#each EVENT_COLORS as color (color.id)}
+					<button
+						type="button"
+						onclick={() => (selectedColorId = color.id)}
+						class="h-8 w-8 rounded-full border-2 transition-all {color.bg}
+							{selectedColorId === color.id
+							? 'border-accent7-500 ring-2 ring-accent7-500/30'
+							: 'border-transparent hover:scale-110'}"
+						aria-label={color.name}
+						title={color.name}
+					></button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Attendees -->
+		<div>
+			<span class="mb-2 block text-sm font-medium text-theme">Attendees</span>
+			{#if availableAttendees.length > 0}
+				<div
+					class="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-theme bg-theme-secondary p-3"
+				>
+					{#each availableAttendees as profile (profile.id)}
+						{@const selected = isAttendeeSelected(profile.email)}
+						<button
+							type="button"
+							onclick={() => toggleAttendee(profile.email)}
+							class="flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors {selected
+								? 'bg-accent7-500/20 text-accent7-700 dark:text-accent7-300'
+								: 'hover:bg-black/5 dark:hover:bg-white/10'}"
+						>
+							<span
+								class="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full {selected
+									? 'bg-accent7-500 text-white'
+									: 'border border-theme bg-theme'}"
+							>
+								{#if selected}
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5 13l4 4L19 7"
+										/>
+									</svg>
+								{/if}
+							</span>
+							<span class="min-w-0 flex-1">
+								<span class="block truncate text-sm font-medium text-theme">{profile.fullName}</span
+								>
+								<span class="block truncate text-xs text-theme-muted">{profile.email}</span>
+							</span>
+						</button>
+					{/each}
+				</div>
+				{#if selectedAttendeeEmails.size > 0}
+					<p class="mt-2 text-xs text-theme-muted">
+						{selectedAttendeeEmails.size} attendee{selectedAttendeeEmails.size !== 1 ? 's' : ''} selected
+					</p>
+				{/if}
+			{:else}
+				<p class="text-sm text-theme-muted italic">
+					No team members with email addresses available.
+				</p>
+			{/if}
+		</div>
+
+		<!-- Reminders -->
+		<div>
+			<span class="mb-2 block text-sm font-medium text-theme">Reminders</span>
+
+			<!-- Use Default Toggle -->
+			<div class="mb-3 flex items-center gap-3">
+				<input
+					type="checkbox"
+					id="useDefaultReminders"
+					bind:checked={useDefaultReminders}
+					class="h-4 w-4 rounded border-theme text-accent7-500 focus:ring-accent7-500"
+				/>
+				<label for="useDefaultReminders" class="text-sm text-theme">
+					Use default reminders (30 minutes before via popup)
+				</label>
+			</div>
+
+			<!-- Custom Reminders -->
+			{#if !useDefaultReminders}
+				<div class="space-y-3 rounded-lg border border-theme bg-theme-secondary p-3">
+					{#if customReminders.length === 0}
+						<p class="text-sm text-theme-muted italic">No reminders set. Add one below.</p>
+					{:else}
+						{#each customReminders as reminder, index (index)}
+							<div class="flex items-center gap-2">
+								<!-- Reminder Method -->
+								<select
+									onchange={(e) => handleReminderMethodChange(index, e)}
+									class="rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+								>
+									<option value="popup" selected={reminder.method === 'popup'}>Popup</option>
+									<option value="email" selected={reminder.method === 'email'}>Email</option>
+								</select>
+
+								<!-- Reminder Time -->
+								<select
+									onchange={(e) => handleReminderMinutesChange(index, e)}
+									class="flex-1 rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+								>
+									{#each reminderPresets as preset (preset.minutes)}
+										<option value={preset.minutes} selected={reminder.minutes === preset.minutes}
+											>{preset.label}</option
+										>
+									{/each}
+								</select>
+
+								<!-- Remove Button -->
+								<button
+									type="button"
+									onclick={() => removeReminder(index)}
+									aria-label="Remove reminder"
+									class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-500"
+								>
+									<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/each}
+					{/if}
+
+					<!-- Add Reminder Button -->
+					<button
+						type="button"
+						onclick={addReminder}
+						class="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-theme py-2 text-sm text-theme-muted transition-colors hover:border-accent7-500 hover:text-accent7-500"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Add Reminder
+					</button>
+				</div>
+			{/if}
+		</div>
+
+		{#if error}
+			<div class="rounded-lg bg-error-500/10 p-4">
+				<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	<div class="flex items-center justify-end gap-3 border-t border-theme bg-theme p-6">
+		<button type="button" onclick={handleCancel} class="btn-ghost" disabled={submitting}>
+			Cancel
+		</button>
+		<button
+			type="submit"
+			class="inline-flex items-center gap-2 rounded-lg bg-accent7-500 px-4 py-2 font-medium text-white transition-colors hover:bg-accent7-600 disabled:opacity-50"
+			disabled={submitting || !summary.trim()}
+		>
+			{#if submitting}
+				{event ? 'Updating...' : 'Creating...'}
+			{:else}
+				{event ? 'Update Event' : 'Create Event'}
+			{/if}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/calendar/WeekView.svelte b/src/lib/components/admin/calendar/WeekView.svelte
new file mode 100644
index 0000000..024a462
--- /dev/null
+++ b/src/lib/components/admin/calendar/WeekView.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { type CalendarEvent, getEventColor } from '$lib/services/calendar';
+	import {SvelteDate} from "svelte/reactivity";
+
+	interface Props {
+		events: CalendarEvent[];
+		weekStart: Date;
+		onEventClick?: (event: CalendarEvent) => void;
+	}
+
+	let { events, weekStart, onEventClick }: Props = $props();
+
+	// Generate 7 days starting from weekStart (store as timestamps to avoid mutable Date in derived)
+	let dayTimestamps = $derived.by(() => {
+		return Array.from({ length: 7 }, (_, i) => {
+			const date = new SvelteDate(weekStart);
+			date.setDate(date.getDate() + i);
+			return date.getTime();
+		});
+	});
+
+	// Convert timestamps to Date objects for display
+	function getDateFromTimestamp(ts: number): Date {
+		return new Date(ts);
+	}
+
+	// Format date for grouping (YYYY-MM-DD)
+	function formatDateKey(date: Date): string {
+		return date.toISOString().split('T')[0];
+	}
+
+	// Get event date key
+	function getEventDateKey(event: CalendarEvent): string {
+		if (event.start.date) {
+			return event.start.date;
+		}
+		if (event.start.dateTime) {
+			return event.start.dateTime.split('T')[0];
+		}
+		return '';
+	}
+
+	// Format time for display
+	function formatEventTime(event: CalendarEvent): string {
+		if (event.start.date) {
+			return 'All day';
+		}
+		if (event.start.dateTime) {
+			const start = new Date(event.start.dateTime);
+			return start.toLocaleTimeString('en-US', {
+				hour: 'numeric',
+				minute: '2-digit',
+				hour12: true
+			});
+		}
+		return '';
+	}
+
+	// Group events by day (use plain object instead of Map for reactivity)
+	let eventsByDay = $derived.by(() => {
+		const grouped: Record<string, CalendarEvent[]> = {};
+
+		// Initialize each day with empty array
+		for (const ts of dayTimestamps) {
+			grouped[formatDateKey(getDateFromTimestamp(ts))] = [];
+		}
+
+		// Add events to their respective days
+		for (const event of events) {
+			const dateKey = getEventDateKey(event);
+			if (grouped[dateKey]) {
+				grouped[dateKey].push(event);
+			}
+		}
+
+		// Sort events within each day by time
+		for (const dayEvents of Object.values(grouped)) {
+			dayEvents.sort((a, b) => {
+				const aTime = a.start.dateTime || a.start.date || '';
+				const bTime = b.start.dateTime || b.start.date || '';
+				return aTime.localeCompare(bTime);
+			});
+		}
+
+		return grouped;
+	});
+
+	// Check if a date is today
+	function isToday(date: Date): boolean {
+		const today = new Date();
+		return (
+			date.getDate() === today.getDate() &&
+			date.getMonth() === today.getMonth() &&
+			date.getFullYear() === today.getFullYear()
+		);
+	}
+</script>
+
+<div class="grid grid-cols-7 gap-2">
+	{#each dayTimestamps as ts (ts)}
+		{@const day = getDateFromTimestamp(ts)}
+		{@const dateKey = formatDateKey(day)}
+		{@const dayEvents = eventsByDay[dateKey] ?? []}
+		{@const today = isToday(day)}
+		<div
+			class="min-h-[200px] rounded-lg border p-2
+				{today ? 'border-accent7-500 bg-accent7-500/5' : 'border-theme bg-theme-card'}"
+		>
+			<!-- Day Header -->
+			<div class="mb-2 text-center">
+				<span class="block text-xs font-medium uppercase text-theme-muted">
+					{day.toLocaleDateString('en-US', { weekday: 'short' })}
+				</span>
+				<span
+					class="block text-lg font-semibold
+						{today ? 'text-accent7-600 dark:text-accent7-400' : 'text-theme'}"
+				>
+					{day.getDate()}
+				</span>
+			</div>
+
+			<!-- Events -->
+			<div class="space-y-1">
+				{#each dayEvents as event (event.id)}
+					{@const eventColor = getEventColor(event.colorId)}
+					<button
+						type="button"
+						onclick={() => onEventClick?.(event)}
+						class="w-full rounded px-2 py-1 text-left text-xs transition-colors
+							{eventColor
+							? `${eventColor.bg} ${eventColor.text}`
+							: 'bg-accent7-500/20 text-accent7-700 dark:text-accent7-300'}
+							hover:opacity-80"
+					>
+						<span class="block truncate font-medium">{event.summary}</span>
+						<span class="block truncate opacity-75">{formatEventTime(event)}</span>
+					</button>
+				{/each}
+				{#if dayEvents.length === 0}
+					<div class="py-4 text-center text-xs text-theme-muted">No events</div>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
diff --git a/src/lib/components/admin/customers/CustomerForm.svelte b/src/lib/components/admin/customers/CustomerForm.svelte
new file mode 100644
index 0000000..f2d953d
--- /dev/null
+++ b/src/lib/components/admin/customers/CustomerForm.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { CreateCustomerStore, UpdateCustomerStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { GetCustomer$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Customer = NonNullable<GetCustomer$result['customer']>;
+
+	interface Props {
+		customer?: Customer;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { customer, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!customer);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let name = $state(customer?.name ?? '');
+	let billingEmail = $state(customer?.billingEmail ?? '');
+	let billingTerms = $state(customer?.billingTerms ?? '');
+	let startDate = $state(customer?.startDate ?? '');
+	let endDate = $state(customer?.endDate ?? '');
+	let status = $state(customer?.status ?? 'ACTIVE');
+
+	const createStore = new CreateCustomerStore();
+	const updateStore = new UpdateCustomerStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name || !billingEmail || !startDate) {
+				error = 'Please provide name, billing email, and start date';
+				return;
+			}
+
+			if (isEdit && customer) {
+				const res = await updateStore.mutate({
+					input: {
+						id: customer.id,
+						name,
+						billingEmail,
+						billingTerms,
+						startDate,
+						endDate: endDate || null,
+						status
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						name,
+						billingEmail,
+						billingTerms,
+						startDate,
+						status
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save customer';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Customer Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="Enter customer name"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="billingEmail" class="mb-1.5 block text-sm font-medium text-theme">
+				Billing Email <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="billingEmail"
+				type="email"
+				bind:value={billingEmail}
+				disabled={submitting}
+				placeholder="Enter billing email"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="billingTerms" class="mb-1.5 block text-sm font-medium text-theme">
+				Billing Terms
+			</label>
+			<input
+				id="billingTerms"
+				type="text"
+				bind:value={billingTerms}
+				disabled={submitting}
+				placeholder="Enter billing terms (optional)"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="startDate" class="mb-1.5 block text-sm font-medium text-theme">
+					Start Date <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="startDate"
+					type="date"
+					bind:value={startDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="endDate" class="mb-1.5 block text-sm font-medium text-theme"> End Date </label>
+				<input
+					id="endDate"
+					type="date"
+					bind:value={endDate}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		{#if isEdit}
+			<div>
+				<label for="status" class="mb-1.5 block text-sm font-medium text-theme"> Status </label>
+				<select
+					id="status"
+					bind:value={status}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="ACTIVE">Active</option>
+					<option value="PENDING">Pending</option>
+					<option value="INACTIVE">Inactive</option>
+				</select>
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Customer'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/customers/WaveCustomerLinkForm.svelte b/src/lib/components/admin/customers/WaveCustomerLinkForm.svelte
new file mode 100644
index 0000000..939ac46
--- /dev/null
+++ b/src/lib/components/admin/customers/WaveCustomerLinkForm.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+	import { UpdateCustomerStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface WaveCustomer {
+		id: string;
+		name: string;
+		email: string | null;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		customerId: string;
+		currentWaveCustomerId?: string | null;
+		waveCustomers: WaveCustomer[];
+		onSuccess?: () => void;
+	}
+
+	let { customerId, currentWaveCustomerId, waveCustomers, onSuccess }: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+	let searchQuery = $state('');
+	// Store the decoded Wave customer ID (matches what backend stores)
+	let selectedCustomerId = $derived<string | null>(null);
+
+	// Sync selectedCustomerId when currentWaveCustomerId prop changes (e.g., when form reopens)
+	// currentWaveCustomerId from backend is already decoded
+	$effect(() => {
+		selectedCustomerId = currentWaveCustomerId ?? null;
+	});
+
+	// Decode Wave ID to match backend storage format
+	function decodeWaveId(id: string): string {
+		return fromGlobalId(id);
+	}
+
+	// Filter customers by search query
+	let filteredCustomers = $derived.by(() => {
+		const active = waveCustomers.filter((c) => !c.isArchived);
+		if (!searchQuery.trim()) return active;
+		const query = searchQuery.toLowerCase();
+		return active.filter((c) => {
+			const name = c.name.toLowerCase();
+			const email = c.email?.toLowerCase() ?? '';
+			return name.includes(query) || email.includes(query);
+		});
+	});
+
+	const updateStore = new UpdateCustomerStore();
+
+	async function handleSave() {
+		submitting = true;
+		error = '';
+
+		try {
+			const res = await updateStore.mutate({
+				input: {
+					id: customerId,
+					waveCustomerId: selectedCustomerId ?? ''
+				}
+			});
+
+			if (res.errors?.length) {
+				error = res.errors.map((e) => e.message).join(', ');
+				return;
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+	}
+</script>
+
+<div class="flex h-full flex-col">
+	{#if error}
+		<div class="mb-4 alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<!-- Search -->
+	<div class="mb-4">
+		<div class="relative">
+			<svg
+				class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/>
+			</svg>
+			<input
+				type="text"
+				bind:value={searchQuery}
+				placeholder="Search Wave customers..."
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+			/>
+		</div>
+	</div>
+
+	<!-- Customer List -->
+	<div class="mb-4 min-h-0 flex-1 overflow-y-auto">
+		{#if filteredCustomers.length === 0 && !searchQuery}
+			<div class="py-8 text-center text-theme-muted">No Wave customers found.</div>
+		{:else if filteredCustomers.length === 0}
+			<div class="py-8 text-center text-theme-muted">No customers match your search.</div>
+		{:else}
+			<div class="space-y-2">
+				<!-- Option to unlink -->
+				<button
+					type="button"
+					onclick={() => (selectedCustomerId = null)}
+					class="w-full rounded-lg border p-3 text-left transition-colors {selectedCustomerId ===
+					null
+						? 'border-primary-500 bg-primary-500/10'
+						: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+				>
+					<span class="flex items-center gap-3">
+						<span
+							class="flex h-5 w-5 items-center justify-center rounded-full border-2 {selectedCustomerId ===
+							null
+								? 'border-primary-500'
+								: 'border-theme-muted'}"
+						>
+							{#if selectedCustomerId === null}
+								<div class="h-2.5 w-2.5 rounded-full bg-primary-500"></div>
+							{/if}
+						</span>
+						<span class="text-theme-muted italic">No Wave customer (unlink)</span>
+					</span>
+				</button>
+
+				{#each filteredCustomers as customer (customer.id)}
+					{@const decodedId = decodeWaveId(customer.id)}
+					<button
+						type="button"
+						onclick={() => (selectedCustomerId = decodedId)}
+						class="w-full rounded-lg border p-3 text-left transition-colors {selectedCustomerId ===
+						decodedId
+							? 'border-primary-500 bg-primary-500/10'
+							: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+					>
+						<span class="flex items-start gap-3">
+							<span
+								class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2 {selectedCustomerId ===
+								decodedId
+									? 'border-primary-500'
+									: 'border-theme-muted'}"
+							>
+								{#if selectedCustomerId === decodedId}
+									<div class="h-2.5 w-2.5 rounded-full bg-primary-500"></div>
+								{/if}
+							</span>
+							<span class="min-w-0 flex-1">
+								<span class="font-medium text-theme">{customer.name}</span>
+								{#if customer.email}
+									<p class="truncate text-sm text-theme-secondary">{customer.email}</p>
+								{/if}
+								<span class="truncate font-mono text-xs text-theme-muted">{decodedId}</span>
+							</span>
+						</span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Actions -->
+	<div class="flex items-center gap-3 border-t border-theme pt-4">
+		<button
+			type="button"
+			onclick={handleSave}
+			disabled={submitting}
+			class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{#if submitting}
+				<span class="flex items-center justify-center gap-2">
+					<IconSpinner class="h-4 w-4" />
+					<span>Saving...</span>
+				</span>
+			{:else}
+				Save
+			{/if}
+		</button>
+		<button
+			type="button"
+			onclick={handleCancel}
+			disabled={submitting}
+			class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+		>
+			Cancel
+		</button>
+	</div>
+</div>
diff --git a/src/lib/components/admin/customers/WaveIntegrationSection.svelte b/src/lib/components/admin/customers/WaveIntegrationSection.svelte
new file mode 100644
index 0000000..fd13525
--- /dev/null
+++ b/src/lib/components/admin/customers/WaveIntegrationSection.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import SectionHeader from '$lib/components/admin/SectionHeader.svelte';
+	import { IconEdit } from '$lib/components/icons';
+
+	interface WaveCustomer {
+		id: string;
+		name: string;
+		email: string | null;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		waveCustomerId: string | null | undefined;
+		linkedWaveCustomer: WaveCustomer | null;
+		onLink: () => void;
+	}
+
+	let { waveCustomerId, linkedWaveCustomer, onLink }: Props = $props();
+</script>
+
+<div class="card-padded">
+	<SectionHeader
+		title="Wave Integration"
+		buttonText={waveCustomerId ? 'Change' : 'Link'}
+		buttonIcon="none"
+		onButtonClick={onLink}
+	/>
+
+	{#if linkedWaveCustomer}
+		<!-- Linked Wave customer shown prominently -->
+		<div
+			class="rounded-lg border-2 border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20"
+		>
+			<div class="flex items-start justify-between">
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-2">
+						<span class="text-lg font-bold text-blue-700 dark:text-blue-400">
+							{linkedWaveCustomer.name}
+						</span>
+						<span class="badge-primary">Linked</span>
+					</div>
+					{#if linkedWaveCustomer.email}
+						<p class="mt-1 text-sm text-blue-600 dark:text-blue-500">
+							{linkedWaveCustomer.email}
+						</p>
+					{/if}
+					<p class="mt-1 font-mono text-xs text-blue-500 dark:text-blue-600">
+						{waveCustomerId}
+					</p>
+				</div>
+				<button
+					type="button"
+					onclick={onLink}
+					class="shrink-0 rounded p-1.5 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900/40"
+					aria-label="Change linked Wave customer"
+				>
+					<IconEdit />
+				</button>
+			</div>
+		</div>
+	{:else if waveCustomerId}
+		<!-- Has ID but couldn't find matching Wave customer -->
+		<div
+			class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20"
+		>
+			<div class="flex items-start justify-between">
+				<div>
+					<div class="flex items-center gap-2">
+						<span class="text-sm font-medium text-yellow-700 dark:text-yellow-400">
+							Linked to unknown Wave customer
+						</span>
+						<span class="badge-warning">Unknown</span>
+					</div>
+					<p class="mt-1 font-mono text-xs text-yellow-600 dark:text-yellow-500">
+						{waveCustomerId}
+					</p>
+				</div>
+				<button
+					type="button"
+					onclick={onLink}
+					class="shrink-0 rounded p-1.5 text-yellow-600 hover:bg-yellow-100 dark:text-yellow-400 dark:hover:bg-yellow-900/40"
+					aria-label="Change linked Wave customer"
+				>
+					<IconEdit />
+				</button>
+			</div>
+		</div>
+	{:else}
+		<p class="text-center text-theme-muted">
+			No Wave customer linked. Click "Link" to connect this customer to Wave.
+		</p>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/invoices/AddProjectsModal.svelte b/src/lib/components/admin/invoices/AddProjectsModal.svelte
new file mode 100644
index 0000000..ffc07a0
--- /dev/null
+++ b/src/lib/components/admin/invoices/AddProjectsModal.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+	import SelectionModal from '$lib/components/shared/SelectionModal.svelte';
+	import { AdminProjectsStore, UpdateInvoiceStore } from '$houdini';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { GetInvoice$result } from '$houdini';
+	import type { AccountAddressInfo } from '$lib/utils/lookup';
+
+	type Invoice = NonNullable<GetInvoice$result['invoice']>;
+
+	interface Props {
+		open: boolean;
+		invoice: Invoice;
+		accountLookup: Map<string, AccountAddressInfo>;
+		onSuccess: () => void;
+	}
+
+	let { open = $bindable(false), invoice, accountLookup, onSuccess }: Props = $props();
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let error = $state('');
+	let availableProjects = $state<
+		{
+			id: string;
+			name: string;
+			date: string;
+			amount: string | number | null;
+			accountAddressId: string | null;
+			customerId: string;
+		}[]
+	>([]);
+	let selectedProjectIds = new SvelteSet<string>();
+
+	const projectsStore = new AdminProjectsStore();
+	const updateStore = new UpdateInvoiceStore();
+
+	// Get customer UUID from the invoice
+	let customerUuid = $derived(invoice.customerId);
+
+	// Get already included project IDs
+	let includedProjectIds = $derived(new Set(invoice.projects.map((p) => p.id)));
+
+	// Load available projects when modal opens
+	$effect(() => {
+		if (open) {
+			loadAvailableProjects();
+			selectedProjectIds.clear();
+		}
+	});
+
+	async function loadAvailableProjects() {
+		loading = true;
+		error = '';
+
+		try {
+			const result = await projectsStore.fetch({
+				variables: {
+					filters: {
+						customerId: { exact: customerUuid },
+						status: { exact: 'COMPLETED' }
+					}
+				}
+			});
+
+			availableProjects = (result.data?.projects ?? []).filter(
+				(project) => !includedProjectIds.has(project.id)
+			);
+		} catch (err) {
+			console.error('Failed to load projects:', err);
+			error = 'Failed to load projects';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function getProjectDisplayName(project: {
+		name: string;
+		date: string;
+		accountAddressId: string | null;
+		customerId: string;
+	}): string {
+		const dateStr = formatDate(project.date);
+
+		let locationName = '';
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			if (accountInfo) {
+				locationName = accountInfo.accountName;
+			}
+		}
+
+		if (locationName) {
+			return `${dateStr} - ${locationName} - ${project.name}`;
+		}
+		return `${dateStr} - ${project.name}`;
+	}
+
+	function toggleProject(projectId: string) {
+		if (selectedProjectIds.has(projectId)) {
+			selectedProjectIds.delete(projectId);
+		} else {
+			selectedProjectIds.add(projectId);
+		}
+	}
+
+	function selectAll() {
+		for (const project of availableProjects) {
+			selectedProjectIds.add(project.id);
+		}
+	}
+
+	function selectNone() {
+		selectedProjectIds.clear();
+	}
+
+	// Calculate total of selected projects
+	let selectedTotal = $derived(
+		availableProjects
+			.filter((p) => selectedProjectIds.has(p.id))
+			.reduce((sum, p) => sum + parseFloat(String(p.amount ?? 0)), 0)
+	);
+
+	async function handleSave() {
+		if (selectedProjectIds.size === 0) return;
+
+		saving = true;
+		error = '';
+
+		try {
+			const existingIds = invoice.projects.map((p) => p.id);
+			const newIds = [...selectedProjectIds];
+			const allIds = [...existingIds, ...newIds];
+
+			await updateStore.mutate({
+				input: {
+					id: invoice.id,
+					projectIds: allIds
+				}
+			});
+
+			open = false;
+			onSuccess();
+		} catch (err) {
+			console.error('Failed to add projects:', err);
+			error = 'Failed to add projects';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleClose() {
+		open = false;
+	}
+</script>
+
+<SelectionModal
+	bind:open
+	title="Add Projects"
+	subtitle="Select completed projects to add to this invoice."
+	itemName="Project"
+	{loading}
+	{saving}
+	{error}
+	selectedCount={selectedProjectIds.size}
+	hasItems={availableProjects.length > 0}
+	emptyMessage="No additional completed projects available for this customer."
+	showTotal={true}
+	{selectedTotal}
+	colorScheme="accent"
+	onSave={handleSave}
+	onClose={handleClose}
+	{selectAll}
+	{selectNone}
+>
+	{#each availableProjects as project (project.id)}
+		<label
+			class="flex cursor-pointer items-center gap-3 rounded-lg border border-theme interactive p-3"
+		>
+			<input
+				type="checkbox"
+				checked={selectedProjectIds.has(project.id)}
+				onchange={() => toggleProject(project.id)}
+				class="checkbox-base"
+			/>
+			<span class="min-w-0 flex-1">
+				<span class="text-sm font-medium text-theme">{getProjectDisplayName(project)}</span>
+			</span>
+			<span class="text-sm font-semibold text-accent-600 dark:text-accent-400">
+				{formatCurrency(project.amount)}
+			</span>
+		</label>
+	{/each}
+</SelectionModal>
diff --git a/src/lib/components/admin/invoices/AddRevenuesModal.svelte b/src/lib/components/admin/invoices/AddRevenuesModal.svelte
new file mode 100644
index 0000000..25492c1
--- /dev/null
+++ b/src/lib/components/admin/invoices/AddRevenuesModal.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import SelectionModal from '$lib/components/shared/SelectionModal.svelte';
+	import { UpdateInvoiceStore } from '$houdini';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { GetInvoice$result, Accounts$result } from '$houdini';
+
+	type Invoice = NonNullable<GetInvoice$result['invoice']>;
+	type Account = Accounts$result['accounts'][number];
+
+	interface Props {
+		open: boolean;
+		invoice: Invoice;
+		accounts: Account[];
+		onSuccess: () => void;
+	}
+
+	let { open = $bindable(false), invoice, accounts, onSuccess }: Props = $props();
+
+	let saving = $state(false);
+	let error = $state('');
+	let selectedRevenueIds = new SvelteSet<string>();
+
+	const updateStore = new UpdateInvoiceStore();
+
+	// Get customer UUID from the invoice
+	let customerUuid = $derived(invoice.customerId);
+
+	// Get already included revenue IDs
+	let includedRevenueIds = $derived(new Set(invoice.revenues.map((r) => r.id)));
+
+	// Get accounts belonging to this customer with their revenues
+	let customerAccounts = $derived(accounts.filter((a) => a.customerId === customerUuid));
+
+	// Flatten all revenues from customer accounts that aren't already included
+	let availableRevenues = $derived(
+		customerAccounts.flatMap((account) =>
+			(account.revenues ?? [])
+				.filter((r) => !includedRevenueIds.has(r.id))
+				.map((r) => ({
+					...r,
+					accountId: account.id,
+					accountName: account.name
+				}))
+		)
+	);
+
+	// Reset selection when modal opens
+	$effect(() => {
+		if (open) {
+			selectedRevenueIds.clear();
+		}
+	});
+
+	function formatCurrency(value: string | number): string {
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return '';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function toggleRevenue(revenueId: string) {
+		if (selectedRevenueIds.has(revenueId)) {
+			selectedRevenueIds.delete(revenueId);
+		} else {
+			selectedRevenueIds.add(revenueId);
+		}
+	}
+
+	function selectAll() {
+		for (const revenue of availableRevenues) {
+			selectedRevenueIds.add(revenue.id);
+		}
+	}
+
+	function selectNone() {
+		selectedRevenueIds.clear();
+	}
+
+	// Calculate total of selected revenues
+	let selectedTotal = $derived(
+		availableRevenues
+			.filter((r) => selectedRevenueIds.has(r.id))
+			.reduce((sum, r) => sum + parseFloat(String(r.amount)), 0)
+	);
+
+	async function handleSave() {
+		if (selectedRevenueIds.size === 0) return;
+
+		saving = true;
+		error = '';
+
+		try {
+			const existingIds = invoice.revenues.map((r) => r.id);
+			const newIds = [...selectedRevenueIds];
+			const allIds = [...existingIds, ...newIds];
+
+			await updateStore.mutate({
+				input: {
+					id: invoice.id,
+					revenueIds: allIds
+				}
+			});
+
+			open = false;
+			onSuccess();
+		} catch (err) {
+			console.error('Failed to add revenues:', err);
+			error = 'Failed to add revenues';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleClose() {
+		open = false;
+	}
+</script>
+
+<SelectionModal
+	bind:open
+	title="Add Revenues"
+	subtitle="Select account revenues to add to this invoice."
+	itemName="Revenue"
+	{saving}
+	{error}
+	selectedCount={selectedRevenueIds.size}
+	hasItems={availableRevenues.length > 0}
+	emptyMessage="No additional revenues available for this customer's accounts."
+	showTotal={true}
+	{selectedTotal}
+	colorScheme="secondary"
+	onSave={handleSave}
+	onClose={handleClose}
+	{selectAll}
+	{selectNone}
+>
+	{#each availableRevenues as revenue (revenue.id)}
+		<label
+			class="flex cursor-pointer items-center gap-3 rounded-lg border border-theme interactive p-3"
+		>
+			<input
+				type="checkbox"
+				checked={selectedRevenueIds.has(revenue.id)}
+				onchange={() => toggleRevenue(revenue.id)}
+				class="checkbox-base"
+			/>
+			<span class="min-w-0 flex-1">
+				<span class="block text-sm font-medium text-theme">{revenue.accountName}</span>
+				<span class="block text-xs text-theme-muted">
+					{formatDate(revenue.startDate)}
+					{#if revenue.endDate}
+						- {formatDate(revenue.endDate)}
+					{:else}
+						- Ongoing
+					{/if}
+				</span>
+			</span>
+			<span class="text-sm font-semibold text-secondary-600 dark:text-secondary-400">
+				{formatCurrency(revenue.amount)}
+			</span>
+		</label>
+	{/each}
+</SelectionModal>
diff --git a/src/lib/components/admin/invoices/InvoiceForm.svelte b/src/lib/components/admin/invoices/InvoiceForm.svelte
new file mode 100644
index 0000000..0728ec0
--- /dev/null
+++ b/src/lib/components/admin/invoices/InvoiceForm.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { CreateInvoiceStore, UpdateInvoiceStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { toGlobalId } from '$lib/utils/relay';
+	import type { Customers$result } from '$houdini';
+
+	type Customer = Customers$result['customers'][number];
+
+	// Invoice can come from either AdminInvoices or GetInvoice query
+	interface InvoiceData {
+		id: string;
+		date: string;
+		customerId: string;
+		status: string;
+		datePaid?: string | null;
+		paymentType?: string | null;
+	}
+
+	interface Props {
+		customers: Customer[];
+		invoice?: InvoiceData | null;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { customers, invoice = null, onSuccess, onCancel }: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Convert customerId (UUID) to GlobalID for the select dropdown
+	function getCustomerGlobalId(customerId: string | undefined): string {
+		if (!customerId) return '';
+		// customerId is a UUID, need to convert to GlobalID to match customer.id
+		return toGlobalId('CustomerType', customerId);
+	}
+
+	// Form fields
+	let customerId = $state(getCustomerGlobalId(invoice?.customerId));
+	let date = $state(invoice?.date ?? '');
+	let status = $state(invoice?.status ?? 'DRAFT');
+	let datePaid = $state(invoice?.datePaid ?? '');
+	let paymentType = $state(invoice?.paymentType ?? '');
+
+	// Active customers only
+	let activeCustomers = $derived(customers.filter((c) => c.status === 'ACTIVE'));
+
+	// Show payment fields when status is PAID
+	let showPaymentFields = $derived(status === 'PAID');
+
+	const createStore = new CreateInvoiceStore();
+	const updateStore = new UpdateInvoiceStore();
+
+	const statusOptions = [
+		{ value: 'DRAFT', label: 'Draft' },
+		{ value: 'SENT', label: 'Sent' },
+		{ value: 'PAID', label: 'Paid' },
+		{ value: 'OVERDUE', label: 'Overdue' },
+		{ value: 'CANCELLED', label: 'Cancelled' }
+	];
+
+	const paymentTypeOptions = [
+		{ value: '', label: 'Select payment type...' },
+		{ value: 'CHECK', label: 'Check' },
+		{ value: 'CREDIT_CARD', label: 'Credit Card' },
+		{ value: 'BANK_TRANSFER', label: 'Bank Transfer' },
+		{ value: 'CASH', label: 'Cash' }
+	];
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!customerId || !date) {
+				error = 'Please select a customer and date';
+				return;
+			}
+
+			if (invoice) {
+				// Update existing invoice
+				const res = await updateStore.mutate({
+					input: {
+						id: invoice.id,
+						customerId,
+						date,
+						status,
+						datePaid: showPaymentFields && datePaid ? datePaid : null,
+						paymentType: showPaymentFields && paymentType ? paymentType : null
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			} else {
+				// Create new invoice
+				const res = await createStore.mutate({
+					input: {
+						customerId,
+						date,
+						status,
+						datePaid: showPaymentFields && datePaid ? datePaid : null,
+						paymentType: showPaymentFields && paymentType ? paymentType : null
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save invoice';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="flex h-full flex-col">
+	<div class="flex-1 space-y-6 overflow-y-auto p-6">
+		<!-- Customer -->
+		<div>
+			<label for="customer" class="mb-1.5 block text-sm font-medium text-theme">Customer</label>
+			<select
+				id="customer"
+				bind:value={customerId}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				required
+			>
+				<option value="">Select customer...</option>
+				{#each activeCustomers as customer (customer.id)}
+					<option value={customer.id}>{customer.name}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Date -->
+		<div>
+			<label for="date" class="mb-1.5 block text-sm font-medium text-theme">Invoice Date</label>
+			<input
+				type="date"
+				id="date"
+				bind:value={date}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				required
+			/>
+		</div>
+
+		<!-- Status -->
+		<div>
+			<label for="status" class="mb-1.5 block text-sm font-medium text-theme">Status</label>
+			<select
+				id="status"
+				bind:value={status}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#each statusOptions as option (option.value)}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Payment fields (shown when status is PAID) -->
+		{#if showPaymentFields}
+			<div class="space-y-4 rounded-lg border border-theme bg-theme-secondary p-4">
+				<h4 class="text-sm font-medium text-theme">Payment Details</h4>
+
+				<!-- Date Paid -->
+				<div>
+					<label for="datePaid" class="mb-1.5 block text-sm font-medium text-theme">Date Paid</label
+					>
+					<input
+						type="date"
+						id="datePaid"
+						bind:value={datePaid}
+						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					/>
+				</div>
+
+				<!-- Payment Type -->
+				<div>
+					<label for="paymentType" class="mb-1.5 block text-sm font-medium text-theme"
+						>Payment Type</label
+					>
+					<select
+						id="paymentType"
+						bind:value={paymentType}
+						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#each paymentTypeOptions as option (option.value)}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+		{/if}
+
+		{#if error}
+			<div class="rounded-lg bg-error-500/10 p-4">
+				<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	<div class="flex items-center justify-end gap-3 border-t border-theme bg-theme p-6">
+		<button type="button" onclick={handleCancel} class="btn-ghost" disabled={submitting}>
+			Cancel
+		</button>
+		<button type="submit" class="btn-primary" disabled={submitting || !customerId || !date}>
+			{#if submitting}
+				{invoice ? 'Updating...' : 'Creating...'}
+			{:else}
+				{invoice ? 'Update Invoice' : 'Create Invoice'}
+			{/if}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/invoices/InvoiceTabs.svelte b/src/lib/components/admin/invoices/InvoiceTabs.svelte
new file mode 100644
index 0000000..cd08262
--- /dev/null
+++ b/src/lib/components/admin/invoices/InvoiceTabs.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	type InvoiceTab = 'details' | 'wave';
+
+	interface Props {
+		activeTab: InvoiceTab;
+		waveLinked: boolean;
+		validationErrors: number;
+		onTabChange: (tab: InvoiceTab) => void;
+	}
+
+	let { activeTab, waveLinked, validationErrors, onTabChange }: Props = $props();
+
+	const tabs: { id: InvoiceTab; label: string }[] = [
+		{ id: 'details', label: 'Details' },
+		{ id: 'wave', label: 'Wave' }
+	];
+
+	// Mobile tab navigation
+	let currentTabIndex = $derived(tabs.findIndex((t) => t.id === activeTab));
+
+	function goToPrevTab() {
+		const newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
+		onTabChange(tabs[newIndex].id);
+	}
+
+	function goToNextTab() {
+		const newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
+		onTabChange(tabs[newIndex].id);
+	}
+
+	function getBadgeForTab(tabId: InvoiceTab): { text: string; class: string } | null {
+		if (tabId === 'wave') {
+			if (waveLinked) {
+				return {
+					text: 'Linked',
+					class: 'bg-success-500/20 text-success-600 dark:text-success-400'
+				};
+			}
+			if (validationErrors > 0) {
+				return {
+					text: String(validationErrors),
+					class: 'bg-warning-500/20 text-warning-600 dark:text-warning-400'
+				};
+			}
+		}
+		return null;
+	}
+</script>
+
+<!-- Mobile: Carousel style -->
+<div class="mb-6 md:hidden">
+	<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-2">
+		<button
+			type="button"
+			onclick={goToPrevTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Previous tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+
+		<div class="flex items-center gap-2">
+			<span class="font-medium text-theme">{tabs[currentTabIndex].label}</span>
+			{#if getBadgeForTab(tabs[currentTabIndex].id)}
+				{@const badge = getBadgeForTab(tabs[currentTabIndex].id)}
+				{#if badge}
+					<span class="rounded-full px-2 py-0.5 text-xs font-medium {badge.class}">
+						{badge.text}
+					</span>
+				{/if}
+			{/if}
+		</div>
+
+		<button
+			type="button"
+			onclick={goToNextTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Next tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Tab indicators -->
+	<div class="mt-2 flex justify-center gap-1.5">
+		{#each tabs as tab, i (tab.id)}
+			<button
+				type="button"
+				onclick={() => onTabChange(tab.id)}
+				class="h-1.5 rounded-full transition-all {i === currentTabIndex
+					? 'w-4 bg-accent6-500'
+					: 'w-1.5 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'}"
+				aria-label={tab.label}
+			></button>
+		{/each}
+	</div>
+</div>
+
+<!-- Desktop: Horizontal tabs -->
+<div class="mb-6 hidden md:block">
+	<div class="border-b border-theme">
+		<nav class="flex gap-1" aria-label="Invoice tabs">
+			{#each tabs as tab (tab.id)}
+				{@const badge = getBadgeForTab(tab.id)}
+				<button
+					type="button"
+					onclick={() => onTabChange(tab.id)}
+					class="relative px-4 py-3 text-sm font-medium transition-colors
+						{activeTab === tab.id
+						? 'text-accent6-600 dark:text-accent6-400'
+						: 'text-theme-muted hover:text-theme'}"
+				>
+					<span class="flex items-center gap-2">
+						{tab.label}
+						{#if badge}
+							<span
+								class="rounded-full px-2 py-0.5 text-xs font-medium
+									{activeTab === tab.id ? badge.class : 'bg-theme-secondary text-theme-muted'}"
+							>
+								{badge.text}
+							</span>
+						{/if}
+					</span>
+
+					{#if activeTab === tab.id}
+						<span class="absolute right-0 bottom-0 left-0 h-0.5 bg-accent6-500"></span>
+					{/if}
+				</button>
+			{/each}
+		</nav>
+	</div>
+</div>
diff --git a/src/lib/components/admin/invoices/wave/WaveCustomerForm.svelte b/src/lib/components/admin/invoices/wave/WaveCustomerForm.svelte
new file mode 100644
index 0000000..57d6622
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveCustomerForm.svelte
@@ -0,0 +1,278 @@
+<script lang="ts">
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { WaveCustomer } from './types';
+
+	interface Props {
+		customer?: WaveCustomer | null;
+		onSuccess?: () => void;
+	}
+
+	let { customer = null, onSuccess }: Props = $props();
+
+	let isSubmitting = $state(false);
+	let error = $state('');
+
+	// Basic info
+	let name = $state(customer?.name ?? '');
+	let firstName = $state(customer?.firstName ?? '');
+	let lastName = $state(customer?.lastName ?? '');
+	let email = $state(customer?.email ?? '');
+	let phone = $state(customer?.phone ?? '');
+
+	// Address
+	let addressLine1 = $state(customer?.address?.addressLine1 ?? '');
+	let addressLine2 = $state(customer?.address?.addressLine2 ?? '');
+	let city = $state(customer?.address?.city ?? '');
+	let provinceCode = $state(customer?.address?.province?.code ?? '');
+	let countryCode = $state(customer?.address?.country?.code ?? 'US');
+	let postalCode = $state(customer?.address?.postalCode ?? '');
+
+	// Notes
+	let internalNotes = $state(customer?.internalNotes ?? '');
+
+	let isEditing = $derived(!!customer);
+</script>
+
+<form
+	method="POST"
+	action={isEditing ? '?/updateCustomer' : '?/createCustomer'}
+	use:enhance={() => {
+		isSubmitting = true;
+		error = '';
+		return async ({ result }) => {
+			isSubmitting = false;
+			if (result.type === 'failure') {
+				const errorMsg = result.data?.error;
+				error = typeof errorMsg === 'string' ? errorMsg : 'An error occurred';
+			} else if (result.type === 'success') {
+				await invalidateAll();
+				offCanvas.closeRight();
+				onSuccess?.();
+			}
+		};
+	}}
+	class="flex h-full flex-col"
+>
+	{#if isEditing}
+		<input type="hidden" name="id" value={customer?.id} />
+	{/if}
+
+	<div class="flex-1 space-y-4 overflow-y-auto">
+		{#if error}
+			<div class="rounded-lg border border-danger bg-danger p-3 text-sm text-danger">
+				{error}
+			</div>
+		{/if}
+
+		<!-- Basic Info Section -->
+		<div class="space-y-4">
+			<h4 class="text-sm font-medium text-theme-muted">Basic Information</h4>
+
+			<div>
+				<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+					Business/Display Name <span class="text-error-500">*</span>
+				</label>
+				<input
+					type="text"
+					id="name"
+					name="name"
+					bind:value={name}
+					required
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="Customer or business name"
+				/>
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<div>
+					<label for="firstName" class="mb-1.5 block text-sm font-medium text-theme">
+						First Name
+					</label>
+					<input
+						type="text"
+						id="firstName"
+						name="firstName"
+						bind:value={firstName}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						placeholder="First name"
+					/>
+				</div>
+
+				<div>
+					<label for="lastName" class="mb-1.5 block text-sm font-medium text-theme">
+						Last Name
+					</label>
+					<input
+						type="text"
+						id="lastName"
+						name="lastName"
+						bind:value={lastName}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						placeholder="Last name"
+					/>
+				</div>
+			</div>
+
+			<div>
+				<label for="email" class="mb-1.5 block text-sm font-medium text-theme">Email</label>
+				<input
+					type="email"
+					id="email"
+					name="email"
+					bind:value={email}
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="customer@example.com"
+				/>
+			</div>
+
+			<div>
+				<label for="phone" class="mb-1.5 block text-sm font-medium text-theme">Phone</label>
+				<input
+					type="tel"
+					id="phone"
+					name="phone"
+					bind:value={phone}
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="(555) 123-4567"
+				/>
+			</div>
+		</div>
+
+		<!-- Address Section -->
+		<div class="space-y-4 border-t border-theme pt-4">
+			<h4 class="text-sm font-medium text-theme-muted">Address</h4>
+
+			<div>
+				<label for="addressLine1" class="mb-1.5 block text-sm font-medium text-theme">
+					Street Address
+				</label>
+				<input
+					type="text"
+					id="addressLine1"
+					name="addressLine1"
+					bind:value={addressLine1}
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="123 Main St"
+				/>
+			</div>
+
+			<div>
+				<label for="addressLine2" class="mb-1.5 block text-sm font-medium text-theme">
+					Apt, Suite, etc.
+				</label>
+				<input
+					type="text"
+					id="addressLine2"
+					name="addressLine2"
+					bind:value={addressLine2}
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="Suite 100"
+				/>
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<div>
+					<label for="city" class="mb-1.5 block text-sm font-medium text-theme">City</label>
+					<input
+						type="text"
+						id="city"
+						name="city"
+						bind:value={city}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						placeholder="City"
+					/>
+				</div>
+
+				<div>
+					<label for="provinceCode" class="mb-1.5 block text-sm font-medium text-theme">
+						State/Province
+					</label>
+					<input
+						type="text"
+						id="provinceCode"
+						name="provinceCode"
+						bind:value={provinceCode}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						placeholder="CA"
+					/>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<div>
+					<label for="postalCode" class="mb-1.5 block text-sm font-medium text-theme">
+						Postal Code
+					</label>
+					<input
+						type="text"
+						id="postalCode"
+						name="postalCode"
+						bind:value={postalCode}
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						placeholder="12345"
+					/>
+				</div>
+
+				<div>
+					<label for="countryCode" class="mb-1.5 block text-sm font-medium text-theme">
+						Country
+					</label>
+					<select
+						id="countryCode"
+						name="countryCode"
+						bind:value={countryCode}
+						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					>
+						<option value="US">United States</option>
+						<option value="CA">Canada</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<!-- Notes Section -->
+		<div class="space-y-4 border-t border-theme pt-4">
+			<h4 class="text-sm font-medium text-theme-muted">Internal Notes</h4>
+
+			<div>
+				<label for="internalNotes" class="mb-1.5 block text-sm font-medium text-theme">
+					Notes
+				</label>
+				<textarea
+					id="internalNotes"
+					name="internalNotes"
+					bind:value={internalNotes}
+					rows="3"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="Private notes about this customer (not visible to customer)"
+				></textarea>
+			</div>
+		</div>
+	</div>
+
+	<div class="mt-6 flex gap-3 border-t border-theme pt-4">
+		<button
+			type="button"
+			onclick={() => offCanvas.closeRight()}
+			disabled={isSubmitting}
+			class="flex-1 rounded-lg border border-theme bg-theme px-4 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+		>
+			Cancel
+		</button>
+		<button
+			type="submit"
+			disabled={isSubmitting || !name}
+			class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{#if isSubmitting}
+				<IconSpinner class="h-4 w-4" />
+				<span>{isEditing ? 'Saving...' : 'Creating...'}</span>
+			{:else}
+				{isEditing ? 'Save Changes' : 'Create Customer'}
+			{/if}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/invoices/wave/WaveCustomersTab.svelte b/src/lib/components/admin/invoices/wave/WaveCustomersTab.svelte
new file mode 100644
index 0000000..7a44c76
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveCustomersTab.svelte
@@ -0,0 +1,248 @@
+<script lang="ts">
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import WaveCustomerForm from './WaveCustomerForm.svelte';
+	import type { WaveCustomer } from './types';
+
+	interface Props {
+		customers: WaveCustomer[];
+		onDelete: (customer: WaveCustomer) => void;
+	}
+
+	let { customers, onDelete }: Props = $props();
+
+	let searchQuery = $state('');
+
+	let filteredCustomers = $derived.by(() => {
+		if (!searchQuery.trim()) return customers;
+		const query = searchQuery.toLowerCase();
+		return customers.filter(
+			(c) =>
+				c.name.toLowerCase().includes(query) ||
+				(c.email && c.email.toLowerCase().includes(query)) ||
+				(c.firstName && c.firstName.toLowerCase().includes(query)) ||
+				(c.lastName && c.lastName.toLowerCase().includes(query))
+		);
+	});
+
+	function formatCurrency(value: string): string {
+		const num = parseFloat(value.replace(/,/g, ''));
+		return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
+
+	function openCreateForm() {
+		offCanvas.showRight({
+			title: 'New Customer',
+			content: createFormContent
+		});
+	}
+
+	function openEditForm(customer: WaveCustomer) {
+		selectedCustomer = customer;
+		offCanvas.showRight({
+			title: 'Edit Customer',
+			content: editFormContent
+		});
+	}
+
+	let selectedCustomer = $state<WaveCustomer | null>(null);
+</script>
+
+{#snippet createFormContent()}
+	<WaveCustomerForm />
+{/snippet}
+
+{#snippet editFormContent()}
+	<WaveCustomerForm customer={selectedCustomer} />
+{/snippet}
+
+<div class="space-y-4">
+	<!-- Header with search and add button -->
+	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<div class="relative flex-1 sm:max-w-xs">
+			<svg
+				class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/>
+			</svg>
+			<input
+				type="text"
+				bind:value={searchQuery}
+				placeholder="Search customers..."
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+			/>
+		</div>
+
+		<button
+			type="button"
+			onclick={openCreateForm}
+			class="flex items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
+		>
+			<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			Add Customer
+		</button>
+	</div>
+
+	<!-- Customers List -->
+	{#if filteredCustomers.length > 0}
+		<div class="grid grid-cols-1 gap-4">
+			{#each filteredCustomers as customer (customer.id)}
+				<div
+					class="flex min-w-0 items-start justify-between gap-4 rounded-lg border border-theme bg-theme-card p-4"
+				>
+					<div class="min-w-0 flex-1">
+						<div class="flex flex-wrap items-center gap-2">
+							<h3 class="font-medium text-theme">{customer.name}</h3>
+							{#if parseFloat(customer.overdueAmount.value) > 0}
+								<span
+									class="rounded-full bg-error-500/10 px-2 py-0.5 text-xs font-medium text-error-600 dark:text-error-400"
+								>
+									Overdue
+								</span>
+							{/if}
+						</div>
+
+						<div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-theme-muted">
+							{#if customer.email}
+								<span class="flex items-center gap-1.5">
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+										/>
+									</svg>
+									{customer.email}
+								</span>
+							{/if}
+							{#if customer.phone}
+								<span class="flex items-center gap-1.5">
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+										/>
+									</svg>
+									{customer.phone}
+								</span>
+							{/if}
+						</div>
+
+						{#if parseFloat(customer.outstandingAmount.value) > 0}
+							<div class="mt-2 flex flex-wrap items-center gap-3 text-sm">
+								<span class="text-theme-secondary">
+									Outstanding: <span class="font-medium text-theme"
+										>{formatCurrency(customer.outstandingAmount.value)}</span
+									>
+								</span>
+								{#if parseFloat(customer.overdueAmount.value) > 0}
+									<span class="text-error-600 dark:text-error-400">
+										Overdue: <span class="font-medium"
+											>{formatCurrency(customer.overdueAmount.value)}</span
+										>
+									</span>
+								{/if}
+							</div>
+						{/if}
+					</div>
+
+					<div class="flex flex-shrink-0 items-center gap-2">
+						<button
+							type="button"
+							onclick={() => openEditForm(customer)}
+							class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+							aria-label="Edit customer"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+								/>
+							</svg>
+						</button>
+						<button
+							type="button"
+							onclick={() => onDelete(customer)}
+							class="rounded-lg p-2 text-theme-muted hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+							aria-label="Delete customer"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+								/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else if searchQuery}
+		<div class="empty-state py-12">
+			<svg
+				class="empty-state-icon text-accent6-400"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Customers Found</h2>
+			<p class="empty-state-text">No customers match your search criteria.</p>
+		</div>
+	{:else}
+		<div class="empty-state py-12">
+			<svg
+				class="empty-state-icon text-accent6-400"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Customers</h2>
+			<p class="empty-state-text">Get started by adding your first customer.</p>
+			<button
+				type="button"
+				onclick={openCreateForm}
+				class="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add Customer
+			</button>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/invoices/wave/WaveInvoiceEditForm.svelte b/src/lib/components/admin/invoices/wave/WaveInvoiceEditForm.svelte
new file mode 100644
index 0000000..75d71b4
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveInvoiceEditForm.svelte
@@ -0,0 +1,571 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type { WaveInvoice, WaveInvoiceItem, WaveProduct } from './types';
+
+	interface EditableLineItem {
+		productId: string;
+		productName: string;
+		description: string;
+		quantity: number;
+		unitPrice: number;
+	}
+
+	interface Props {
+		waveInvoice: WaveInvoice;
+		waveProducts: WaveProduct[];
+		onSuccess: () => void;
+		onCancel: () => void;
+	}
+
+	let { waveInvoice, waveProducts, onSuccess, onCancel }: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Form state - pre-populated from Wave invoice
+	let invoiceDate = $state(waveInvoice.invoiceDate);
+	let dueDate = $state(waveInvoice.dueDate);
+	let memo = $state(waveInvoice.memo || '');
+	let footer = $state(waveInvoice.footer || '');
+
+	// Line items state - built from Wave invoice items
+	let lineItems = $state<EditableLineItem[]>(buildLineItemsFromInvoice());
+
+	// Add line item state
+	let showAddLineItem = $state(false);
+	let newProductId = $state('');
+	let newDescription = $state('');
+	let newQuantity = $state(1);
+	let newUnitPrice = $state(0);
+
+	// Discount state - initialize from existing Wave invoice discount
+	let hasDiscount = $state(parseFloat(waveInvoice.discountTotal.value) > 0);
+	let discountType = $state<'PERCENTAGE' | 'FIXED'>('PERCENTAGE');
+	let discountName = $state('Discount');
+	let discountValue = $state(0);
+
+	// Active (non-archived) products for the dropdown
+	let activeProducts = $derived(waveProducts.filter((p) => !p.isArchived));
+
+	function buildLineItemsFromInvoice(): EditableLineItem[] {
+		return waveInvoice.items.map((item: WaveInvoiceItem) => ({
+			productId: item.product.id,
+			productName: item.product.name,
+			description: item.description || '',
+			quantity: item.quantity,
+			unitPrice: item.unitPrice
+		}));
+	}
+
+	// Calculate totals
+	let subtotal = $derived(lineItems.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0));
+
+	let discountAmount = $derived(() => {
+		if (!hasDiscount || discountValue <= 0) return 0;
+		if (discountType === 'PERCENTAGE') {
+			return subtotal * (discountValue / 100);
+		}
+		return discountValue;
+	});
+
+	let total = $derived(subtotal - discountAmount());
+
+	function formatCurrency(value: number): string {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(value);
+	}
+
+	function updateLineItem(index: number, field: keyof EditableLineItem, value: string | number) {
+		lineItems[index] = { ...lineItems[index], [field]: value };
+	}
+
+	function removeLineItem(index: number) {
+		lineItems = lineItems.filter((_, i) => i !== index);
+	}
+
+	function handleProductSelect(productId: string) {
+		const product = waveProducts.find((p) => p.id === productId);
+		if (product) {
+			newUnitPrice = product.unitPrice;
+			newDescription = product.description || '';
+		}
+	}
+
+	function addLineItem() {
+		if (!newProductId) return;
+
+		const product = waveProducts.find((p) => p.id === newProductId);
+		if (!product) return;
+
+		lineItems = [
+			...lineItems,
+			{
+				productId: product.id,
+				productName: product.name,
+				description: newDescription,
+				quantity: newQuantity,
+				unitPrice: newUnitPrice
+			}
+		];
+
+		// Reset add line item form
+		showAddLineItem = false;
+		newProductId = '';
+		newDescription = '';
+		newQuantity = 1;
+		newUnitPrice = 0;
+	}
+
+	function cancelAddLineItem() {
+		showAddLineItem = false;
+		newProductId = '';
+		newDescription = '';
+		newQuantity = 1;
+		newUnitPrice = 0;
+	}
+
+	// Build items JSON for form submission
+	// Wave API expects the product's Global ID
+	let itemsJson = $derived(
+		JSON.stringify(
+			lineItems.map((item) => ({
+				productId: item.productId,
+				description: item.description,
+				quantity: item.quantity.toString(),
+				unitPrice: item.unitPrice.toString()
+			}))
+		)
+	);
+
+	// Build discount JSON for form submission
+	let discountJson = $derived(() => {
+		if (!hasDiscount || discountValue <= 0) return null;
+		return JSON.stringify({
+			type: discountType,
+			name: discountName,
+			value: discountValue
+		});
+	});
+</script>
+
+<form
+	method="POST"
+	action="?/updateWaveInvoice"
+	use:enhance={() => {
+		submitting = true;
+		error = '';
+		return async ({ result }) => {
+			submitting = false;
+			if (result.type === 'failure') {
+				const errorMsg = result.data?.error;
+				error = typeof errorMsg === 'string' ? errorMsg : 'Failed to update invoice';
+			} else if (result.type === 'success') {
+				onSuccess();
+			}
+		};
+	}}
+	class="space-y-6"
+>
+	<!-- Hidden fields for form action -->
+	<input type="hidden" name="invoiceId" value={waveInvoice.id} />
+	<input type="hidden" name="items" value={itemsJson} />
+	<input type="hidden" name="discount" value={discountJson() || ''} />
+
+	<!-- Header -->
+	<div class="card-padded">
+		<div class="flex items-center justify-between">
+			<div>
+				<h3 class="text-lg font-semibold text-theme">
+					Edit Invoice #{waveInvoice.invoiceNumber}
+				</h3>
+				<p class="mt-1 text-sm text-theme-muted">Modify invoice details and line items.</p>
+			</div>
+			<button
+				type="button"
+				onclick={onCancel}
+				class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Cancel"
+			>
+				<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	{#if error}
+		<div class="mx-4 alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<!-- Invoice Details -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Invoice Details</h4>
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<div>
+				<label for="invoiceDate" class="mb-1 block text-sm font-medium text-theme">
+					Invoice Date
+				</label>
+				<input
+					type="date"
+					id="invoiceDate"
+					name="invoiceDate"
+					bind:value={invoiceDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+			<div>
+				<label for="dueDate" class="mb-1 block text-sm font-medium text-theme">Due Date</label>
+				<input
+					type="date"
+					id="dueDate"
+					name="dueDate"
+					bind:value={dueDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<!-- Line Items -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h4 class="text-sm font-medium text-theme-muted">
+				Line Items ({lineItems.length})
+			</h4>
+			{#if !showAddLineItem}
+				<button
+					type="button"
+					onclick={() => (showAddLineItem = true)}
+					class="flex items-center gap-1.5 rounded-lg bg-accent6-500/10 px-3 py-1.5 text-sm font-medium text-accent6-600 transition-colors hover:bg-accent6-500/20 dark:text-accent6-400"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					Add Item
+				</button>
+			{/if}
+		</div>
+
+		<div class="space-y-4">
+			{#each lineItems as item, index (item.productId + '-' + index)}
+				<div class="rounded-lg border border-theme bg-theme-secondary p-4">
+					<div class="mb-3 flex items-start justify-between gap-2">
+						<div>
+							<span class="text-sm font-medium text-theme">{item.productName}</span>
+						</div>
+						<div class="flex items-center gap-2">
+							<span class="text-sm font-semibold text-theme">
+								{formatCurrency(item.quantity * item.unitPrice)}
+							</span>
+							<button
+								type="button"
+								onclick={() => removeLineItem(index)}
+								class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+								title="Remove line item"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+
+					<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+						<div class="sm:col-span-2">
+							<label for="line-item-desc-{index}" class="mb-1 block text-xs text-theme-muted"
+								>Description</label
+							>
+							<input
+								type="text"
+								id="line-item-desc-{index}"
+								value={item.description}
+								onchange={(e) => updateLineItem(index, 'description', e.currentTarget.value)}
+								class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+							/>
+						</div>
+						<div class="grid grid-cols-2 gap-2">
+							<div>
+								<label for="line-item-qty-{index}" class="mb-1 block text-xs text-theme-muted"
+									>Qty</label
+								>
+								<input
+									type="number"
+									id="line-item-qty-{index}"
+									min="0"
+									step="1"
+									value={item.quantity}
+									onchange={(e) =>
+										updateLineItem(index, 'quantity', parseFloat(e.currentTarget.value) || 0)}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+							<div>
+								<label for="line-item-price-{index}" class="mb-1 block text-xs text-theme-muted"
+									>Price</label
+								>
+								<input
+									type="number"
+									id="line-item-price-{index}"
+									min="0"
+									step="0.01"
+									value={item.unitPrice}
+									onchange={(e) =>
+										updateLineItem(index, 'unitPrice', parseFloat(e.currentTarget.value) || 0)}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+
+			<!-- Add Line Item Form -->
+			{#if showAddLineItem}
+				<div class="rounded-lg border-2 border-dashed border-accent6-500/30 bg-accent6-500/5 p-4">
+					<h5 class="mb-3 text-sm font-medium text-theme">Add New Line Item</h5>
+					<div class="space-y-3">
+						<div>
+							<label for="new-product" class="mb-1 block text-xs text-theme-muted">Product</label>
+							<select
+								id="new-product"
+								bind:value={newProductId}
+								onchange={(e) => handleProductSelect(e.currentTarget.value)}
+								class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+							>
+								<option value="">Select a product...</option>
+								{#each activeProducts as product (product.id)}
+									<option value={product.id}>{product.name}</option>
+								{/each}
+							</select>
+						</div>
+						<div>
+							<label for="new-description" class="mb-1 block text-xs text-theme-muted"
+								>Description</label
+							>
+							<input
+								type="text"
+								id="new-description"
+								bind:value={newDescription}
+								placeholder="Optional description..."
+								class="placeholder-theme-muted w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+							/>
+						</div>
+						<div class="grid grid-cols-2 gap-3">
+							<div>
+								<label for="new-quantity" class="mb-1 block text-xs text-theme-muted"
+									>Quantity</label
+								>
+								<input
+									type="number"
+									id="new-quantity"
+									min="1"
+									step="1"
+									bind:value={newQuantity}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+							<div>
+								<label for="new-price" class="mb-1 block text-xs text-theme-muted">Unit Price</label
+								>
+								<input
+									type="number"
+									id="new-price"
+									min="0"
+									step="0.01"
+									bind:value={newUnitPrice}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+						</div>
+						<div class="flex items-center gap-2 pt-2">
+							<button
+								type="button"
+								onclick={addLineItem}
+								disabled={!newProductId}
+								class="rounded-lg bg-accent6-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
+							>
+								Add Item
+							</button>
+							<button
+								type="button"
+								onclick={cancelAddLineItem}
+								class="rounded-lg border border-theme interactive bg-theme px-3 py-1.5 text-sm font-medium text-theme"
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Subtotal -->
+		<div class="mt-4 flex items-center justify-between border-t border-theme pt-4">
+			<span class="font-medium text-theme">Subtotal</span>
+			<span class="text-lg font-bold text-theme">
+				{formatCurrency(subtotal)}
+			</span>
+		</div>
+
+		<!-- Discount -->
+		{#if hasDiscount && discountAmount() > 0}
+			<div class="flex items-center justify-between py-2">
+				<span class="text-theme-secondary">Discount ({discountName})</span>
+				<span class="font-medium text-success-600 dark:text-success-400">
+					-{formatCurrency(discountAmount())}
+				</span>
+			</div>
+		{/if}
+
+		<!-- Total -->
+		<div class="flex items-center justify-between border-t border-theme pt-4">
+			<span class="font-medium text-theme">Total</span>
+			<span class="text-lg font-bold text-accent6-600 dark:text-accent6-400">
+				{formatCurrency(total)}
+			</span>
+		</div>
+	</div>
+
+	<!-- Discount Section -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h4 class="text-sm font-medium text-theme-muted">Discount</h4>
+			<label class="inline-flex cursor-pointer items-center gap-2">
+				<input type="checkbox" bind:checked={hasDiscount} class="peer sr-only" />
+				<span
+					class="relative h-5 w-9 rounded-full bg-gray-300 peer-checked:bg-accent6-500 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full dark:bg-gray-600"
+				></span>
+				<span class="text-sm text-theme">{hasDiscount ? 'Enabled' : 'Disabled'}</span>
+			</label>
+		</div>
+
+		{#if hasDiscount}
+			<div class="space-y-4">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+					<div>
+						<label for="discountType" class="mb-1 block text-sm font-medium text-theme">Type</label>
+						<select
+							id="discountType"
+							bind:value={discountType}
+							class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						>
+							<option value="PERCENTAGE">Percentage</option>
+							<option value="FIXED">Fixed Amount</option>
+						</select>
+					</div>
+					<div>
+						<label for="discountName" class="mb-1 block text-sm font-medium text-theme">Name</label>
+						<input
+							type="text"
+							id="discountName"
+							bind:value={discountName}
+							placeholder="Discount"
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						/>
+					</div>
+					<div>
+						<label for="discountValue" class="mb-1 block text-sm font-medium text-theme">
+							{discountType === 'PERCENTAGE' ? 'Percentage (%)' : 'Amount ($)'}
+						</label>
+						<input
+							type="number"
+							id="discountValue"
+							min="0"
+							step={discountType === 'PERCENTAGE' ? '1' : '0.01'}
+							max={discountType === 'PERCENTAGE' ? '100' : undefined}
+							bind:value={discountValue}
+							placeholder={discountType === 'PERCENTAGE' ? '10' : '50.00'}
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						/>
+					</div>
+				</div>
+				{#if discountValue > 0}
+					<p class="text-sm text-theme-muted">
+						{#if discountType === 'PERCENTAGE'}
+							{discountValue}% off = -{formatCurrency(discountAmount())}
+						{:else}
+							Fixed discount of {formatCurrency(discountValue)}
+						{/if}
+					</p>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Notes -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Additional Notes</h4>
+		<div class="space-y-4">
+			<div>
+				<label for="memo" class="mb-1 block text-sm font-medium text-theme">Memo (Notes)</label>
+				<textarea
+					id="memo"
+					name="memo"
+					bind:value={memo}
+					rows="2"
+					placeholder="Internal notes for the invoice..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				></textarea>
+			</div>
+			<div>
+				<label for="footer" class="mb-1 block text-sm font-medium text-theme">Footer</label>
+				<textarea
+					id="footer"
+					name="footer"
+					bind:value={footer}
+					rows="2"
+					placeholder="Footer text shown on the invoice..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				></textarea>
+			</div>
+		</div>
+	</div>
+
+	<!-- Actions -->
+	<div class="card-padded">
+		<div class="flex items-center gap-3">
+			<button
+				type="submit"
+				disabled={submitting || lineItems.length === 0}
+				class="flex-1 rounded-lg bg-accent6-500 px-4 py-2.5 font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>Saving Changes...</span>
+					</span>
+				{:else}
+					Save Changes
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={onCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2.5 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</div>
+</form>
diff --git a/src/lib/components/admin/invoices/wave/WaveInvoiceForm.svelte b/src/lib/components/admin/invoices/wave/WaveInvoiceForm.svelte
new file mode 100644
index 0000000..fcb8f6e
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveInvoiceForm.svelte
@@ -0,0 +1,714 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type {
+		NexusInvoice,
+		NexusRevenue,
+		NexusProject,
+		WaveProduct,
+		WaveLineItem,
+		WaveDiscount
+	} from './types';
+	import { SvelteDate } from 'svelte/reactivity';
+
+	interface Props {
+		invoice: NexusInvoice;
+		waveCustomerId: string;
+		revenues: NexusRevenue[];
+		projects: NexusProject[];
+		waveProducts: WaveProduct[];
+		onSuccess: () => void;
+		onCancel: () => void;
+	}
+
+	let { invoice, waveCustomerId, revenues, projects, waveProducts, onSuccess, onCancel }: Props =
+		$props();
+
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Form state
+	let invoiceDate = $state(invoice.date);
+	let dueDate = $state(calculateDueDate(invoice.date, 15));
+	let memo = $state(
+		'Thank you for choosing Nexus Cleaning Solutions! We appreciate your business. If you have any feedback or requests, please reach out to us.'
+	);
+	let footer = $state('');
+
+	// Line items state
+	let lineItems = $state<WaveLineItem[]>(buildInitialLineItems());
+
+	// Additional line item state
+	let showAddLineItem = $state(false);
+	let newProductId = $state('');
+	let newDescription = $state('');
+	let newQuantity = $state(1);
+	let newUnitPrice = $state(0);
+
+	// Discount state
+	let hasDiscount = $state(false);
+	let discountType = $state<'PERCENTAGE' | 'FIXED'>('PERCENTAGE');
+	let discountName = $state('Discount');
+	let discountValue = $state(0);
+
+	// Available products for adding (non-archived only)
+	let availableProducts = $derived(waveProducts.filter((p) => !p.isArchived));
+
+	function calculateDueDate(fromDate: string, daysToAdd: number): string {
+		const date = new SvelteDate(fromDate + 'T00:00:00');
+		date.setDate(date.getDate() + daysToAdd);
+		return date.toISOString().split('T')[0];
+	}
+
+	function getProduct(waveServiceId: string | null): WaveProduct | null {
+		if (!waveServiceId) return null;
+		return waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId) ?? null;
+	}
+
+	function getProductById(productId: string): WaveProduct | null {
+		return waveProducts.find((p) => p.id === productId) ?? null;
+	}
+
+	function getProductName(waveServiceId: string | null): string {
+		const product = getProduct(waveServiceId);
+		return product?.name ?? 'Unknown Product';
+	}
+
+	function getProductDescription(waveServiceId: string | null): string {
+		const product = getProduct(waveServiceId);
+		return product?.description ?? '';
+	}
+
+	function buildInitialLineItems(): WaveLineItem[] {
+		const items: WaveLineItem[] = [];
+
+		// Add revenues as line items
+		for (const revenue of revenues) {
+			if (!revenue.waveServiceId) continue;
+
+			items.push({
+				sourceType: 'revenue',
+				sourceId: revenue.id,
+				productId: revenue.waveServiceId,
+				productName: getProductName(revenue.waveServiceId),
+				description: getProductDescription(revenue.waveServiceId),
+				quantity: 1,
+				unitPrice: parseFloat(String(revenue.amount))
+			});
+		}
+
+		// Add projects as line items
+		for (const project of projects) {
+			if (!project.waveServiceId) continue;
+
+			items.push({
+				sourceType: 'project',
+				sourceId: project.id,
+				productId: project.waveServiceId,
+				productName: getProductName(project.waveServiceId),
+				description: getProductDescription(project.waveServiceId),
+				quantity: 1,
+				unitPrice: parseFloat(String(project.amount))
+			});
+		}
+
+		return items;
+	}
+
+	// Calculate totals
+	let subtotal = $derived(lineItems.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0));
+
+	let discountAmount = $derived(() => {
+		if (!hasDiscount || discountValue <= 0) return 0;
+		if (discountType === 'PERCENTAGE') {
+			return subtotal * (discountValue / 100);
+		}
+		return discountValue;
+	});
+
+	let total = $derived(subtotal - discountAmount());
+
+	function formatCurrency(value: number): string {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(value);
+	}
+
+	function updateLineItem(index: number, field: keyof WaveLineItem, value: string | number) {
+		lineItems[index] = { ...lineItems[index], [field]: value };
+	}
+
+	function removeLineItem(index: number) {
+		lineItems = lineItems.filter((_, i) => i !== index);
+	}
+
+	function addLineItem() {
+		if (!newProductId) return;
+
+		const product = getProductById(newProductId);
+		if (!product) return;
+
+		const decodedProductId = fromGlobalId(product.id);
+
+		lineItems = [
+			...lineItems,
+			{
+				sourceType: 'additional',
+				sourceId: `additional-${Date.now()}`,
+				productId: decodedProductId,
+				productName: product.name,
+				description: newDescription || product.description || '',
+				quantity: newQuantity,
+				unitPrice: newUnitPrice || product.unitPrice
+			}
+		];
+
+		// Reset form
+		showAddLineItem = false;
+		newProductId = '';
+		newDescription = '';
+		newQuantity = 1;
+		newUnitPrice = 0;
+	}
+
+	function onProductSelect(productId: string) {
+		newProductId = productId;
+		const product = getProductById(productId);
+		if (product) {
+			newDescription = product.description || '';
+			newUnitPrice = product.unitPrice;
+		}
+	}
+
+	// Find the Wave product Global ID for a given decoded ID
+	function getWaveProductGlobalId(decodedId: string): string | null {
+		const product = waveProducts.find((p) => fromGlobalId(p.id) === decodedId);
+		return product?.id ?? null;
+	}
+
+	// Find the Wave customer Global ID
+	function getWaveCustomerGlobalId(): string {
+		// waveCustomerId from backend is stored as "businessId;Customer:customerId"
+		// Wave API expects base64 encoded "Business:<businessId>;Customer:<customerId>" format
+		// which is the same format, just needs to be re-encoded
+		return btoa(`Business:${waveCustomerId}`);
+	}
+
+	// Build items JSON for form submission
+	let itemsJson = $derived(
+		JSON.stringify(
+			lineItems.map((item) => {
+				const productGlobalId = getWaveProductGlobalId(item.productId);
+				return {
+					productId: productGlobalId,
+					description: item.description,
+					quantity: item.quantity.toString(),
+					unitPrice: item.unitPrice.toString()
+				};
+			})
+		)
+	);
+
+	// Build discount JSON for form submission
+	let discountJson = $derived(() => {
+		if (!hasDiscount || discountValue <= 0) return '';
+		const discount: WaveDiscount = {
+			type: discountType,
+			name: discountName,
+			value: discountValue
+		};
+		return JSON.stringify(discount);
+	});
+
+	function getSourceTypeBadgeClass(sourceType: string): string {
+		switch (sourceType) {
+			case 'revenue':
+				return 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400';
+			case 'project':
+				return 'bg-accent-500/20 text-accent-600 dark:text-accent-400';
+			case 'additional':
+				return 'bg-primary-500/20 text-primary-600 dark:text-primary-400';
+			default:
+				return 'bg-gray-500/20 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	function getSourceTypeLabel(sourceType: string): string {
+		switch (sourceType) {
+			case 'revenue':
+				return 'Revenue';
+			case 'project':
+				return 'Project';
+			case 'additional':
+				return 'Additional';
+			default:
+				return sourceType;
+		}
+	}
+</script>
+
+<form
+	method="POST"
+	action="?/createWaveInvoice"
+	use:enhance={() => {
+		submitting = true;
+		error = '';
+		return async ({ result }) => {
+			submitting = false;
+			if (result.type === 'failure') {
+				const errorMsg = result.data?.error;
+				error = typeof errorMsg === 'string' ? errorMsg : 'Failed to create invoice';
+			} else if (result.type === 'success') {
+				onSuccess();
+			}
+		};
+	}}
+	class="space-y-6"
+>
+	<!-- Hidden fields for form action -->
+	<input type="hidden" name="customerId" value={getWaveCustomerGlobalId()} />
+	<input type="hidden" name="items" value={itemsJson} />
+	<input type="hidden" name="discount" value={discountJson()} />
+
+	<!-- Header -->
+	<div class="card-padded">
+		<div class="flex items-center justify-between">
+			<h3 class="text-lg font-semibold text-theme">Create Wave Invoice</h3>
+			<button
+				type="button"
+				onclick={onCancel}
+				class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Cancel"
+			>
+				<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<!-- Warning Box -->
+	<div class="warning-box">
+		<div class="flex gap-3">
+			<svg class="warning-box-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			<div>
+				<p class="warning-box-title">Review before submitting</p>
+				<p class="warning-box-text">
+					Please review and adjust the descriptions and amounts below. This will create a draft
+					invoice in Wave — you'll be able to preview and make final edits before sending.
+				</p>
+			</div>
+		</div>
+	</div>
+
+	{#if error}
+		<div class="mx-4 alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<!-- Invoice Details -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Invoice Details</h4>
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<div>
+				<label for="invoiceDate" class="mb-1 block text-sm font-medium text-theme">
+					Invoice Date
+				</label>
+				<input
+					type="date"
+					id="invoiceDate"
+					name="invoiceDate"
+					bind:value={invoiceDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+			<div>
+				<label for="dueDate" class="mb-1 block text-sm font-medium text-theme">Due Date</label>
+				<input
+					type="date"
+					id="dueDate"
+					name="dueDate"
+					bind:value={dueDate}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<!-- Line Items -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h4 class="text-sm font-medium text-theme-muted">Line Items</h4>
+			<button
+				type="button"
+				onclick={() => (showAddLineItem = !showAddLineItem)}
+				class="flex items-center gap-1.5 rounded-lg bg-primary-500/10 px-3 py-1.5 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-500/20 dark:text-primary-400"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add Item
+			</button>
+		</div>
+
+		<!-- Add Line Item Form -->
+		{#if showAddLineItem}
+			<div class="mb-4 rounded-lg border border-primary-500/30 bg-primary-500/5 p-4">
+				<h5 class="mb-3 text-sm font-medium text-theme">Add Line Item</h5>
+				<div class="space-y-3">
+					<div>
+						<label for="new-product" class="mb-1 block text-xs text-theme-muted">Product</label>
+						<select
+							id="new-product"
+							onchange={(e) => onProductSelect(e.currentTarget.value)}
+							class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						>
+							<option value="">Select a product...</option>
+							{#each availableProducts as product (product.id)}
+								<option value={product.id}>
+									{product.name}
+									{#if product.unitPrice > 0}
+										({formatCurrency(product.unitPrice)})
+									{/if}
+								</option>
+							{/each}
+						</select>
+					</div>
+
+					{#if newProductId}
+						<div>
+							<label for="new-description" class="mb-1 block text-xs text-theme-muted"
+								>Description</label
+							>
+							<input
+								type="text"
+								id="new-description"
+								bind:value={newDescription}
+								placeholder="Optional description..."
+								class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+							/>
+						</div>
+
+						<div class="grid grid-cols-2 gap-3">
+							<div>
+								<label for="new-quantity" class="mb-1 block text-xs text-theme-muted"
+									>Quantity</label
+								>
+								<input
+									type="number"
+									id="new-quantity"
+									min="0.01"
+									step="0.01"
+									bind:value={newQuantity}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+							<div>
+								<label for="new-price" class="mb-1 block text-xs text-theme-muted">Unit Price</label
+								>
+								<input
+									type="number"
+									id="new-price"
+									min="0"
+									step="0.01"
+									bind:value={newUnitPrice}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+						</div>
+
+						<div class="flex gap-2">
+							<button
+								type="button"
+								onclick={addLineItem}
+								class="rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-600"
+							>
+								Add
+							</button>
+							<button
+								type="button"
+								onclick={() => {
+									showAddLineItem = false;
+									newProductId = '';
+								}}
+								class="rounded-lg border border-theme interactive px-3 py-1.5 text-sm font-medium text-theme"
+							>
+								Cancel
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<div class="space-y-4">
+			{#each lineItems as item, index (item.sourceId)}
+				<div class="rounded-lg border border-theme bg-theme-secondary p-4">
+					<div class="mb-3 flex items-start justify-between gap-2">
+						<div class="flex items-center gap-2">
+							<span
+								class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {getSourceTypeBadgeClass(
+									item.sourceType
+								)}"
+							>
+								{getSourceTypeLabel(item.sourceType)}
+							</span>
+							<span class="text-sm font-medium text-theme">{item.productName}</span>
+						</div>
+						<div class="flex items-center gap-2">
+							<span class="text-sm font-semibold text-theme">
+								{formatCurrency(item.quantity * item.unitPrice)}
+							</span>
+							{#if item.sourceType === 'additional'}
+								<button
+									type="button"
+									onclick={() => removeLineItem(index)}
+									class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+									title="Remove item"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							{/if}
+						</div>
+					</div>
+
+					<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+						<div class="sm:col-span-2">
+							<label for="line-item-desc-{index}" class="mb-1 block text-xs text-theme-muted"
+								>Description</label
+							>
+							<input
+								type="text"
+								id="line-item-desc-{index}"
+								value={item.description}
+								onchange={(e) => updateLineItem(index, 'description', e.currentTarget.value)}
+								class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+							/>
+						</div>
+						<div class="grid grid-cols-2 gap-2">
+							<div>
+								<label for="line-item-qty-{index}" class="mb-1 block text-xs text-theme-muted"
+									>Qty</label
+								>
+								<input
+									type="number"
+									id="line-item-qty-{index}"
+									min="0"
+									step="1"
+									value={item.quantity}
+									onchange={(e) =>
+										updateLineItem(index, 'quantity', parseFloat(e.currentTarget.value) || 0)}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+							<div>
+								<label for="line-item-price-{index}" class="mb-1 block text-xs text-theme-muted"
+									>Price</label
+								>
+								<input
+									type="number"
+									id="line-item-price-{index}"
+									min="0"
+									step="0.01"
+									value={item.unitPrice}
+									onchange={(e) =>
+										updateLineItem(index, 'unitPrice', parseFloat(e.currentTarget.value) || 0)}
+									class="w-full rounded border border-theme bg-theme px-2 py-1.5 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Totals -->
+		<div class="mt-4 space-y-2 border-t border-theme pt-4">
+			<div class="flex items-center justify-between">
+				<span class="text-sm text-theme-muted">Subtotal</span>
+				<span class="text-sm font-medium text-theme">
+					{formatCurrency(subtotal)}
+				</span>
+			</div>
+
+			{#if hasDiscount && discountValue > 0}
+				<div class="flex items-center justify-between text-error-600 dark:text-error-400">
+					<span class="text-sm">
+						{discountName}
+						{#if discountType === 'PERCENTAGE'}
+							({discountValue}%)
+						{/if}
+					</span>
+					<span class="text-sm font-medium">
+						-{formatCurrency(discountAmount())}
+					</span>
+				</div>
+			{/if}
+
+			<div class="flex items-center justify-between border-t border-theme pt-2">
+				<span class="font-medium text-theme">Total</span>
+				<span class="text-lg font-bold text-accent6-600 dark:text-accent6-400">
+					{formatCurrency(total)}
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<!-- Discount Section -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h4 class="text-sm font-medium text-theme-muted">Discount</h4>
+			<label class="flex cursor-pointer items-center gap-2">
+				<input
+					type="checkbox"
+					bind:checked={hasDiscount}
+					class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+				/>
+				<span class="text-sm text-theme">Apply discount</span>
+			</label>
+		</div>
+
+		{#if hasDiscount}
+			<div class="space-y-4">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+					<div>
+						<label for="discountType" class="mb-1 block text-sm font-medium text-theme">Type</label>
+						<select
+							id="discountType"
+							bind:value={discountType}
+							class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						>
+							<option value="PERCENTAGE">Percentage (%)</option>
+							<option value="FIXED">Fixed Amount ($)</option>
+						</select>
+					</div>
+					<div>
+						<label for="discountName" class="mb-1 block text-sm font-medium text-theme">Name</label>
+						<input
+							type="text"
+							id="discountName"
+							bind:value={discountName}
+							placeholder="e.g., Loyalty Discount"
+							class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						/>
+					</div>
+					<div>
+						<label for="discountValue" class="mb-1 block text-sm font-medium text-theme">
+							{discountType === 'PERCENTAGE' ? 'Percentage' : 'Amount'}
+						</label>
+						<div class="relative">
+							{#if discountType === 'FIXED'}
+								<span
+									class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-theme-muted"
+									>$</span
+								>
+							{/if}
+							<input
+								type="number"
+								id="discountValue"
+								min="0"
+								step={discountType === 'PERCENTAGE' ? '1' : '0.01'}
+								max={discountType === 'PERCENTAGE' ? '100' : undefined}
+								bind:value={discountValue}
+								class="w-full rounded-lg border border-theme bg-theme py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 {discountType ===
+								'FIXED'
+									? 'pr-3 pl-7'
+									: 'px-3'}"
+							/>
+							{#if discountType === 'PERCENTAGE'}
+								<span
+									class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-theme-muted"
+									>%</span
+								>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Notes -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Additional Notes</h4>
+		<div class="space-y-4">
+			<div>
+				<label for="memo" class="mb-1 block text-sm font-medium text-theme">Memo (Notes)</label>
+				<textarea
+					id="memo"
+					name="memo"
+					bind:value={memo}
+					rows="2"
+					placeholder="Internal notes for the invoice..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				></textarea>
+			</div>
+			<div>
+				<label for="footer" class="mb-1 block text-sm font-medium text-theme">Footer</label>
+				<textarea
+					id="footer"
+					name="footer"
+					bind:value={footer}
+					rows="2"
+					placeholder="Footer text shown on the invoice..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				></textarea>
+			</div>
+		</div>
+	</div>
+
+	<!-- Actions -->
+	<div class="card-padded">
+		<div class="flex items-center gap-3">
+			<button
+				type="submit"
+				disabled={submitting || lineItems.length === 0}
+				class="flex-1 rounded-lg bg-accent6-500 px-4 py-2.5 font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>Creating Invoice...</span>
+					</span>
+				{:else}
+					Create Draft Invoice
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={onCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2.5 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</div>
+</form>
diff --git a/src/lib/components/admin/invoices/wave/WaveInvoicePreview.svelte b/src/lib/components/admin/invoices/wave/WaveInvoicePreview.svelte
new file mode 100644
index 0000000..daf1524
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveInvoicePreview.svelte
@@ -0,0 +1,416 @@
+<script lang="ts">
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type { WaveInvoice } from './types';
+
+	interface Props {
+		waveInvoice: WaveInvoice;
+		onSend: () => void;
+		onApprove?: () => void;
+		onRefresh: () => void;
+		onEdit?: () => void;
+		onDelete?: () => void;
+		isSending?: boolean;
+		isApproving?: boolean;
+		isRefreshing?: boolean;
+		isDeleting?: boolean;
+	}
+
+	let {
+		waveInvoice,
+		onSend,
+		onApprove,
+		onRefresh,
+		onEdit,
+		onDelete,
+		isSending = false,
+		isApproving = false,
+		isRefreshing = false,
+		isDeleting = false
+	}: Props = $props();
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatDateTime(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr).toLocaleString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
+	function formatCurrency(value: string, symbol: string = '$'): string {
+		const num = parseFloat(value.replace(/,/g, ''));
+		return `${symbol}${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
+
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SAVED':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SENT':
+				return 'bg-primary-500/10 text-primary-600 dark:text-primary-400';
+			case 'VIEWED':
+				return 'bg-accent2-500/10 text-accent2-600 dark:text-accent2-400';
+			case 'PAID':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'PARTIAL':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			case 'OVERDUE':
+				return 'bg-error-500/10 text-error-600 dark:text-error-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'SAVED':
+				return 'Saved';
+			case 'SENT':
+				return 'Sent';
+			case 'VIEWED':
+				return 'Viewed';
+			case 'PAID':
+				return 'Paid';
+			case 'PARTIAL':
+				return 'Partial';
+			case 'OVERDUE':
+				return 'Overdue';
+			default:
+				return status;
+		}
+	}
+
+	let canApprove = $derived(waveInvoice.status === 'DRAFT');
+	let canSend = $derived(waveInvoice.status === 'SAVED');
+	let canEdit = $derived(waveInvoice.status === 'DRAFT' || waveInvoice.status === 'SAVED');
+	let canDelete = $derived(waveInvoice.status === 'DRAFT' || waveInvoice.status === 'SAVED');
+</script>
+
+<div class="space-y-6">
+	<!-- Header with Status and Actions -->
+	<div class="card-padded">
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<div class="flex items-center gap-3">
+				<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-accent6-500/20">
+					<svg
+						class="h-6 w-6 text-accent6-600 dark:text-accent6-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<div class="flex items-center gap-2">
+						<h3 class="text-lg font-semibold text-theme">
+							Invoice #{waveInvoice.invoiceNumber}
+						</h3>
+						<span
+							class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {getStatusClasses(
+								waveInvoice.status
+							)}"
+						>
+							{getStatusLabel(waveInvoice.status)}
+						</span>
+					</div>
+					<p class="text-sm text-theme-muted">{waveInvoice.customer.name}</p>
+				</div>
+			</div>
+
+			<div class="flex flex-wrap items-center gap-2">
+				<a
+					href={waveInvoice.pdfUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="inline-flex items-center gap-1.5 rounded-lg interactive bg-theme px-3 py-2 text-sm font-medium text-theme"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					Download PDF
+				</a>
+				{#if canEdit && onEdit}
+					<button
+						type="button"
+						onclick={onEdit}
+						class="inline-flex items-center gap-1.5 rounded-lg interactive bg-theme px-3 py-2 text-sm font-medium text-theme"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+							/>
+						</svg>
+						Edit
+					</button>
+				{/if}
+				{#if canApprove && onApprove}
+					<button
+						type="button"
+						onclick={onApprove}
+						disabled={isApproving}
+						class="inline-flex items-center gap-1.5 rounded-lg bg-success-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-success-600 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#if isApproving}
+							<IconSpinner class="h-4 w-4" />
+							<span>Approving...</span>
+						{:else}
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Approve
+						{/if}
+					</button>
+				{/if}
+				{#if canSend}
+					<button
+						type="button"
+						onclick={onSend}
+						disabled={isSending}
+						class="inline-flex items-center gap-1.5 rounded-lg bg-primary-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#if isSending}
+							<IconSpinner class="h-4 w-4" />
+							<span>Sending...</span>
+						{:else}
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+								/>
+							</svg>
+							Send Invoice
+						{/if}
+					</button>
+				{/if}
+				<button
+					type="button"
+					onclick={onRefresh}
+					disabled={isRefreshing}
+					class="inline-flex items-center gap-1.5 rounded-lg bg-theme px-3 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+					aria-label="Refresh"
+				>
+					{#if isRefreshing}
+						<IconSpinner class="h-4 w-4" />
+					{:else}
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+							/>
+						</svg>
+					{/if}
+				</button>
+				{#if canDelete && onDelete}
+					<button
+						type="button"
+						onclick={onDelete}
+						disabled={isDeleting}
+						class="inline-flex items-center gap-1.5 rounded-lg bg-error-500/10 px-3 py-2 text-sm font-medium text-error-600 transition-colors hover:bg-error-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-error-400"
+					>
+						{#if isDeleting}
+							<IconSpinner class="h-4 w-4" />
+							<span>Deleting...</span>
+						{:else}
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+								/>
+							</svg>
+							Delete
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Invoice Summary -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Invoice Summary</h4>
+
+		<div class="space-y-3">
+			<div class="flex items-center justify-between py-2">
+				<span class="text-theme-secondary">Subtotal</span>
+				<span class="font-medium text-theme">
+					{formatCurrency(waveInvoice.subtotal.value, waveInvoice.subtotal.currency.symbol)}
+				</span>
+			</div>
+
+			{#if parseFloat(waveInvoice.discountTotal.value) > 0}
+				<div class="flex items-center justify-between py-2">
+					<span class="text-theme-secondary">Discounts</span>
+					<span class="font-medium text-success-600 dark:text-success-400">
+						-{formatCurrency(
+							waveInvoice.discountTotal.value,
+							waveInvoice.discountTotal.currency.symbol
+						)}
+					</span>
+				</div>
+			{/if}
+
+			{#if parseFloat(waveInvoice.taxTotal.value) > 0}
+				<div class="flex items-center justify-between py-2">
+					<span class="text-theme-secondary">Tax</span>
+					<span class="font-medium text-theme">
+						{formatCurrency(waveInvoice.taxTotal.value, waveInvoice.taxTotal.currency.symbol)}
+					</span>
+				</div>
+			{/if}
+
+			<div class="flex items-center justify-between border-t border-theme py-3">
+				<span class="font-medium text-theme">Total</span>
+				<span class="text-lg font-bold text-accent6-600 dark:text-accent6-400">
+					{formatCurrency(waveInvoice.total.value, waveInvoice.total.currency.symbol)}
+				</span>
+			</div>
+
+			{#if parseFloat(waveInvoice.amountPaid.value) > 0}
+				<div class="flex items-center justify-between py-2">
+					<span class="text-theme-secondary">Amount Paid</span>
+					<span class="font-medium text-success-600 dark:text-success-400">
+						{formatCurrency(waveInvoice.amountPaid.value, waveInvoice.amountPaid.currency.symbol)}
+					</span>
+				</div>
+			{/if}
+
+			{#if parseFloat(waveInvoice.amountDue.value) > 0}
+				<div class="flex items-center justify-between py-2">
+					<span class="font-medium text-theme">Amount Due</span>
+					<span class="text-lg font-bold text-theme">
+						{formatCurrency(waveInvoice.amountDue.value, waveInvoice.amountDue.currency.symbol)}
+					</span>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Line Items -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">
+			Line Items ({waveInvoice.items.length})
+		</h4>
+
+		<div class="space-y-2">
+			{#each waveInvoice.items as item, index (index)}
+				<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+					<div class="flex items-start justify-between gap-3">
+						<div class="min-w-0 flex-1">
+							<p class="font-medium text-theme">{item.product.name}</p>
+							{#if item.description}
+								<p class="mt-0.5 text-sm text-theme-muted">{item.description}</p>
+							{/if}
+							<p class="mt-1 text-xs text-theme-muted">
+								{item.quantity} x {formatCurrency(String(item.unitPrice))}
+							</p>
+						</div>
+						<span class="font-semibold text-theme">
+							{formatCurrency(item.total.value)}
+						</span>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Invoice Details -->
+	<div class="card-padded">
+		<h4 class="mb-4 text-sm font-medium text-theme-muted">Invoice Details</h4>
+
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<div>
+				<p class="text-sm text-theme-muted">Invoice Date</p>
+				<p class="font-medium text-theme">{formatDate(waveInvoice.invoiceDate)}</p>
+			</div>
+			<div>
+				<p class="text-sm text-theme-muted">Due Date</p>
+				<p class="font-medium text-theme">{formatDate(waveInvoice.dueDate)}</p>
+			</div>
+			{#if waveInvoice.poNumber}
+				<div>
+					<p class="text-sm text-theme-muted">PO Number</p>
+					<p class="font-medium text-theme">{waveInvoice.poNumber}</p>
+				</div>
+			{/if}
+			{#if waveInvoice.lastSentAt}
+				<div>
+					<p class="text-sm text-theme-muted">Last Sent</p>
+					<p class="font-medium text-theme">
+						{formatDateTime(waveInvoice.lastSentAt)}
+						{#if waveInvoice.lastSentVia}
+							<span class="text-theme-muted">via {waveInvoice.lastSentVia}</span>
+						{/if}
+					</p>
+				</div>
+			{/if}
+			{#if waveInvoice.lastViewedAt}
+				<div>
+					<p class="text-sm text-theme-muted">Last Viewed</p>
+					<p class="font-medium text-theme">{formatDateTime(waveInvoice.lastViewedAt)}</p>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Notes -->
+	{#if waveInvoice.memo || waveInvoice.footer}
+		<div class="card-padded">
+			<h4 class="mb-4 text-sm font-medium text-theme-muted">Notes</h4>
+
+			<div class="space-y-4">
+				{#if waveInvoice.memo}
+					<div>
+						<p class="text-sm font-medium text-theme">Memo</p>
+						<p class="mt-1 text-sm text-theme-secondary">{waveInvoice.memo}</p>
+					</div>
+				{/if}
+				{#if waveInvoice.footer}
+					<div>
+						<p class="text-sm font-medium text-theme">Footer</p>
+						<p class="mt-1 text-sm text-theme-secondary">{waveInvoice.footer}</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/invoices/wave/WaveLinkProductModal.svelte b/src/lib/components/admin/invoices/wave/WaveLinkProductModal.svelte
new file mode 100644
index 0000000..1a19c33
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveLinkProductModal.svelte
@@ -0,0 +1,293 @@
+<script lang="ts">
+	import { UpdateRevenueStore, UpdateProjectStore } from '$houdini';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type { WaveProduct } from './types';
+
+	interface Props {
+		open: boolean;
+		entityType: 'revenue' | 'project';
+		entityId: string;
+		entityDescription: string;
+		currentWaveServiceId: string | null;
+		waveProducts: WaveProduct[];
+		onSuccess: () => void;
+		onCancel: () => void;
+	}
+
+	let {
+		open,
+		entityType,
+		entityId,
+		entityDescription,
+		currentWaveServiceId,
+		waveProducts,
+		onSuccess,
+		onCancel
+	}: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+	let searchQuery = $state('');
+	let selectedProductId = $state<string | null>(null);
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (open) {
+			selectedProductId = currentWaveServiceId;
+			searchQuery = '';
+			error = '';
+		}
+	});
+
+	// Decode Wave ID to match backend storage format
+	function decodeWaveId(id: string): string {
+		return fromGlobalId(id);
+	}
+
+	// Filter products by search query
+	let filteredProducts = $derived.by(() => {
+		const active = waveProducts.filter((p) => !p.isArchived);
+		if (!searchQuery.trim()) return active;
+		const query = searchQuery.toLowerCase();
+		return active.filter((p) => {
+			const name = p.name.toLowerCase();
+			const description = p.description?.toLowerCase() ?? '';
+			return name.includes(query) || description.includes(query);
+		});
+	});
+
+	// Format currency
+	function formatCurrency(value: number): string {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(value);
+	}
+
+	const updateRevenueStore = new UpdateRevenueStore();
+	const updateProjectStore = new UpdateProjectStore();
+
+	async function handleSave() {
+		submitting = true;
+		error = '';
+
+		try {
+			if (entityType === 'revenue') {
+				const res = await updateRevenueStore.mutate({
+					input: {
+						id: entityId,
+						waveServiceId: selectedProductId ?? ''
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await updateProjectStore.mutate({
+					input: {
+						id: entityId,
+						waveServiceId: selectedProductId ?? ''
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			onSuccess();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			onCancel();
+		}
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+		onclick={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && onCancel()}
+	>
+		<div
+			class="flex max-h-[80vh] w-full max-w-lg flex-col rounded-xl bg-theme shadow-xl"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={() => {}}
+			role="document"
+		>
+			<!-- Header -->
+			<div class="flex items-center justify-between border-b border-theme px-6 py-4">
+				<div>
+					<h2 class="text-lg font-semibold text-theme">Link Wave Product</h2>
+					<p class="mt-0.5 text-sm text-theme-muted">{entityDescription}</p>
+				</div>
+				<button
+					type="button"
+					onclick={onCancel}
+					class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="flex min-h-0 flex-1 flex-col p-6">
+				{#if error}
+					<div class="mb-4 alert-error">
+						{error}
+					</div>
+				{/if}
+
+				<!-- Search -->
+				<div class="mb-4">
+					<div class="relative">
+						<svg
+							class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+						<input
+							type="text"
+							bind:value={searchQuery}
+							placeholder="Search Wave products..."
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+						/>
+					</div>
+				</div>
+
+				<!-- Product List -->
+				<div class="min-h-0 flex-1 overflow-y-auto">
+					{#if filteredProducts.length === 0 && !searchQuery}
+						<div class="py-8 text-center text-theme-muted">No Wave products found.</div>
+					{:else if filteredProducts.length === 0}
+						<div class="py-8 text-center text-theme-muted">No products match your search.</div>
+					{:else}
+						<div class="space-y-2">
+							<!-- Option to unlink -->
+							<button
+								type="button"
+								onclick={() => (selectedProductId = null)}
+								class="w-full rounded-lg border p-3 text-left transition-colors {selectedProductId ===
+								null
+									? 'border-primary-500 bg-primary-500/10'
+									: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+							>
+								<span class="flex items-center gap-3">
+									<span
+										class="flex h-5 w-5 items-center justify-center rounded-full border-2 {selectedProductId ===
+										null
+											? 'border-primary-500'
+											: 'border-theme-muted'}"
+									>
+										{#if selectedProductId === null}
+											<div class="h-2.5 w-2.5 rounded-full bg-primary-500"></div>
+										{/if}
+									</span>
+									<span class="text-theme-muted italic">No product (unlink)</span>
+								</span>
+							</button>
+
+							{#each filteredProducts as product (product.id)}
+								{@const decodedId = decodeWaveId(product.id)}
+								<button
+									type="button"
+									onclick={() => (selectedProductId = decodedId)}
+									class="w-full rounded-lg border p-3 text-left transition-colors {selectedProductId ===
+									decodedId
+										? 'border-primary-500 bg-primary-500/10'
+										: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+								>
+									<span class="flex items-start gap-3">
+										<span
+											class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border-2 {selectedProductId ===
+											decodedId
+												? 'border-primary-500'
+												: 'border-theme-muted'}"
+										>
+											{#if selectedProductId === decodedId}
+												<div class="h-2.5 w-2.5 rounded-full bg-primary-500"></div>
+											{/if}
+										</span>
+										<span class="min-w-0 flex-1">
+											<span class="flex items-center justify-between gap-2">
+												<span class="font-medium text-theme">{product.name}</span>
+												<span
+													class="text-sm font-semibold text-secondary-600 dark:text-secondary-400"
+												>
+													{formatCurrency(product.unitPrice)}
+												</span>
+											</span>
+											{#if product.description}
+												<p class="mt-0.5 truncate text-sm text-theme-muted">
+													{product.description}
+												</p>
+											{/if}
+										</span>
+									</span>
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Footer -->
+			<div class="flex items-center gap-3 border-t border-theme px-6 py-4">
+				<button
+					type="button"
+					onclick={handleSave}
+					disabled={submitting}
+					class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					{#if submitting}
+						<span class="flex items-center justify-center gap-2">
+							<IconSpinner class="h-4 w-4" />
+							<span>Saving...</span>
+						</span>
+					{:else}
+						Save
+					{/if}
+				</button>
+				<button
+					type="button"
+					onclick={onCancel}
+					disabled={submitting}
+					class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/admin/invoices/wave/WaveProductForm.svelte b/src/lib/components/admin/invoices/wave/WaveProductForm.svelte
new file mode 100644
index 0000000..cf4b42f
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveProductForm.svelte
@@ -0,0 +1,163 @@
+<script lang="ts">
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { WaveProduct } from './types';
+
+	interface IncomeAccount {
+		id: string;
+		name: string;
+		subtype: { value: string };
+	}
+
+	interface Props {
+		product?: WaveProduct | null;
+		incomeAccounts?: IncomeAccount[];
+		onSuccess?: () => void;
+	}
+
+	let { product = null, incomeAccounts = [], onSuccess }: Props = $props();
+
+	let isSubmitting = $state(false);
+	let error = $state('');
+
+	let name = $state(product?.name ?? '');
+	let unitPrice = $state(product?.unitPrice?.toString() ?? '0');
+	let description = $state(product?.description ?? '');
+
+	// Default to existing product's income account, or find "Sales" account, or first available
+	function getDefaultAccountId() {
+		if (product?.incomeAccount?.id) return product.incomeAccount.id;
+		const salesAccount = incomeAccounts.find((a) => a.name === 'Sales');
+		if (salesAccount) return salesAccount.id;
+		return incomeAccounts[0]?.id ?? '';
+	}
+
+	let incomeAccountId = $state(getDefaultAccountId());
+
+	let isEditing = $derived(!!product);
+</script>
+
+<form
+	method="POST"
+	action={isEditing ? '?/updateProduct' : '?/createProduct'}
+	use:enhance={() => {
+		isSubmitting = true;
+		error = '';
+		return async ({ result }) => {
+			isSubmitting = false;
+			if (result.type === 'failure') {
+				const errorMsg = result.data?.error;
+				error = typeof errorMsg === 'string' ? errorMsg : 'An error occurred';
+			} else if (result.type === 'success') {
+				await invalidateAll();
+				offCanvas.closeRight();
+				onSuccess?.();
+			}
+		};
+	}}
+	class="flex h-full flex-col"
+>
+	{#if isEditing}
+		<input type="hidden" name="id" value={product?.id} />
+	{/if}
+
+	<div class="flex-1 space-y-4">
+		{#if error}
+			<div class="rounded-lg border border-danger bg-danger p-3 text-sm text-danger">
+				{error}
+			</div>
+		{/if}
+
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Name <span class="text-error-500">*</span>
+			</label>
+			<input
+				type="text"
+				id="name"
+				name="name"
+				bind:value={name}
+				required
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+				placeholder="Product or service name"
+			/>
+		</div>
+
+		<div>
+			<label for="unitPrice" class="mb-1.5 block text-sm font-medium text-theme">
+				Unit Price
+			</label>
+			<div class="relative">
+				<span class="absolute top-1/2 left-3 -translate-y-1/2 text-theme-muted">$</span>
+				<input
+					type="number"
+					id="unitPrice"
+					name="unitPrice"
+					bind:value={unitPrice}
+					min="0"
+					step="0.01"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-7 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+					placeholder="0.00"
+				/>
+			</div>
+		</div>
+
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+				Description
+			</label>
+			<textarea
+				id="description"
+				name="description"
+				bind:value={description}
+				rows="3"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+				placeholder="Optional description"
+			></textarea>
+		</div>
+
+		{#if incomeAccounts.length > 0}
+			<div>
+				<label for="incomeAccountId" class="mb-1.5 block text-sm font-medium text-theme">
+					Income Account <span class="text-error-500">*</span>
+				</label>
+				<select
+					id="incomeAccountId"
+					name="incomeAccountId"
+					bind:value={incomeAccountId}
+					required
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+				>
+					{#each incomeAccounts as account (account.id)}
+						<option value={account.id}>{account.name}</option>
+					{/each}
+				</select>
+			</div>
+		{/if}
+	</div>
+
+	<div class="mt-6 flex gap-3 border-t border-theme pt-4">
+		<button
+			type="button"
+			onclick={() => offCanvas.closeRight()}
+			disabled={isSubmitting}
+			class="flex-1 rounded-lg border border-theme bg-theme px-4 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+		>
+			Cancel
+		</button>
+		<button
+			type="submit"
+			disabled={isSubmitting || !name}
+			class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{#if isSubmitting}
+				<IconSpinner class="h-4 w-4" />
+				<span>{isEditing ? 'Saving...' : 'Creating...'}</span>
+			{:else}
+				{isEditing ? 'Save Changes' : 'Create Product'}
+			{/if}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/invoices/wave/WaveProductsTab.svelte b/src/lib/components/admin/invoices/wave/WaveProductsTab.svelte
new file mode 100644
index 0000000..d228ed5
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveProductsTab.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import WaveProductForm from './WaveProductForm.svelte';
+	import type { WaveProduct } from './types';
+
+	interface IncomeAccount {
+		id: string;
+		name: string;
+		subtype: { value: string };
+	}
+
+	interface Props {
+		products: WaveProduct[];
+		archivedProducts: WaveProduct[];
+		incomeAccounts: IncomeAccount[];
+		onArchive: (product: WaveProduct) => void;
+	}
+
+	let { products, archivedProducts, incomeAccounts, onArchive }: Props = $props();
+
+	let searchQuery = $state('');
+	let showArchived = $state(false);
+
+	let activeProducts = $derived.by(() => {
+		const list = showArchived ? archivedProducts : products;
+		if (!searchQuery.trim()) return list;
+		const query = searchQuery.toLowerCase();
+		return list.filter(
+			(p) =>
+				p.name.toLowerCase().includes(query) ||
+				(p.description && p.description.toLowerCase().includes(query))
+		);
+	});
+
+	function formatCurrency(value: number): string {
+		return `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
+
+	function openCreateForm() {
+		offCanvas.showRight({
+			title: 'New Product/Service',
+			content: createFormContent
+		});
+	}
+
+	function openEditForm(product: WaveProduct) {
+		selectedProduct = product;
+		offCanvas.showRight({
+			title: 'Edit Product/Service',
+			content: editFormContent
+		});
+	}
+
+	let selectedProduct = $state<WaveProduct | null>(null);
+</script>
+
+{#snippet createFormContent()}
+	<WaveProductForm {incomeAccounts} />
+{/snippet}
+
+{#snippet editFormContent()}
+	<WaveProductForm product={selectedProduct} {incomeAccounts} />
+{/snippet}
+
+<div class="space-y-4">
+	<!-- Header with search, toggle, and add button -->
+	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<div class="flex flex-1 flex-col gap-3 sm:flex-row sm:items-center">
+			<div class="relative flex-1 sm:max-w-xs">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search products..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+				/>
+			</div>
+
+			{#if archivedProducts.length > 0}
+				<label class="flex items-center gap-2 text-sm text-theme-secondary">
+					<input
+						type="checkbox"
+						bind:checked={showArchived}
+						class="h-4 w-4 rounded border-theme text-accent6-500 focus:ring-accent6-500"
+					/>
+					Show archived ({archivedProducts.length})
+				</label>
+			{/if}
+		</div>
+
+		{#if !showArchived}
+			<button
+				type="button"
+				onclick={openCreateForm}
+				class="flex items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add Product
+			</button>
+		{/if}
+	</div>
+
+	<!-- Products List -->
+	{#if activeProducts.length > 0}
+		<div class="grid grid-cols-1 gap-4">
+			{#each activeProducts as product (product.id)}
+				<div
+					class="flex min-w-0 items-start justify-between gap-4 rounded-lg border border-theme bg-theme-card p-4"
+					class:opacity-60={showArchived}
+				>
+					<div class="min-w-0 flex-1">
+						<div class="flex flex-wrap items-center gap-2">
+							<h3 class="font-medium text-theme">{product.name}</h3>
+							{#if showArchived}
+								<span
+									class="rounded-full bg-gray-500/10 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400"
+								>
+									Archived
+								</span>
+							{/if}
+							{#if product.isSold}
+								<span
+									class="rounded-full bg-success-500/10 px-2 py-0.5 text-xs font-medium text-success-600 dark:text-success-400"
+								>
+									Sold
+								</span>
+							{/if}
+							{#if product.isBought}
+								<span
+									class="rounded-full bg-primary-500/10 px-2 py-0.5 text-xs font-medium text-primary-600 dark:text-primary-400"
+								>
+									Bought
+								</span>
+							{/if}
+						</div>
+						{#if product.description}
+							<p class="mt-1 line-clamp-2 text-sm text-theme-muted">{product.description}</p>
+						{/if}
+						<div class="mt-2 flex flex-wrap items-baseline gap-x-4 gap-y-1">
+							<p class="text-lg font-semibold text-accent6-600 dark:text-accent6-400">
+								{formatCurrency(product.unitPrice)}
+							</p>
+							{#if product.incomeAccount}
+								<span class="text-sm text-theme-muted">
+									{product.incomeAccount.name}
+								</span>
+							{/if}
+						</div>
+					</div>
+
+					{#if !showArchived}
+						<div class="flex flex-shrink-0 items-center gap-2">
+							<button
+								type="button"
+								onclick={() => openEditForm(product)}
+								class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Edit product"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+									/>
+								</svg>
+							</button>
+							<button
+								type="button"
+								onclick={() => onArchive(product)}
+								class="rounded-lg p-2 text-theme-muted hover:bg-warning-500/10 hover:text-warning-600 dark:hover:text-warning-400"
+								aria-label="Archive product"
+								title="Archive product"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+									/>
+								</svg>
+							</button>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{:else if searchQuery}
+		<div class="empty-state py-12">
+			<svg
+				class="empty-state-icon text-accent6-400"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Products Found</h2>
+			<p class="empty-state-text">No products match your search criteria.</p>
+		</div>
+	{:else}
+		<div class="empty-state py-12">
+			<svg
+				class="empty-state-icon text-accent6-400"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Products</h2>
+			<p class="empty-state-text">Get started by creating your first product or service.</p>
+			<button
+				type="button"
+				onclick={openCreateForm}
+				class="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add Product
+			</button>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/invoices/wave/WaveTabs.svelte b/src/lib/components/admin/invoices/wave/WaveTabs.svelte
new file mode 100644
index 0000000..46d9039
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveTabs.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	export type WaveTab = 'invoices' | 'products' | 'customers';
+
+	interface Props {
+		activeTab: WaveTab;
+		invoiceCount: number;
+		productCount: number;
+		customerCount: number;
+		onTabChange: (tab: WaveTab) => void;
+	}
+
+	let { activeTab, invoiceCount, productCount, customerCount, onTabChange }: Props = $props();
+
+	const tabs: { id: WaveTab; label: string; icon: string }[] = [
+		{ id: 'invoices', label: 'Invoices', icon: 'invoice' },
+		{ id: 'products', label: 'Products/Services', icon: 'product' },
+		{ id: 'customers', label: 'Customers', icon: 'customer' }
+	];
+
+	// Mobile tab navigation
+	let currentTabIndex = $derived(tabs.findIndex((t) => t.id === activeTab));
+
+	function goToPrevTab() {
+		const newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
+		onTabChange(tabs[newIndex].id);
+	}
+
+	function goToNextTab() {
+		const newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
+		onTabChange(tabs[newIndex].id);
+	}
+
+	function getCountForTab(tabId: WaveTab): number {
+		switch (tabId) {
+			case 'invoices':
+				return invoiceCount;
+			case 'products':
+				return productCount;
+			case 'customers':
+				return customerCount;
+			default:
+				return 0;
+		}
+	}
+</script>
+
+<!-- Mobile: Carousel style -->
+<div class="mb-6 md:hidden">
+	<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-2">
+		<button
+			type="button"
+			onclick={goToPrevTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Previous tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+
+		<div class="flex items-center gap-2">
+			<span class="font-medium text-theme">{tabs[currentTabIndex].label}</span>
+			<span
+				class="rounded-full bg-accent6-500/20 px-2 py-0.5 text-xs font-medium text-accent6-600 dark:text-accent6-400"
+			>
+				{getCountForTab(tabs[currentTabIndex].id)}
+			</span>
+		</div>
+
+		<button
+			type="button"
+			onclick={goToNextTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Next tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Tab indicators -->
+	<div class="mt-2 flex justify-center gap-1.5">
+		{#each tabs as tab, i (tab.id)}
+			<button
+				type="button"
+				onclick={() => onTabChange(tab.id)}
+				class="h-1.5 rounded-full transition-all {i === currentTabIndex
+					? 'w-4 bg-accent6-500'
+					: 'w-1.5 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'}"
+				aria-label={tab.label}
+			></button>
+		{/each}
+	</div>
+</div>
+
+<!-- Desktop: Horizontal tabs -->
+<div class="mb-6 hidden md:block">
+	<div class="border-b border-theme">
+		<nav class="flex gap-1" aria-label="Wave tabs">
+			{#each tabs as tab (tab.id)}
+				<button
+					type="button"
+					onclick={() => onTabChange(tab.id)}
+					class="relative px-4 py-3 text-sm font-medium transition-colors
+						{activeTab === tab.id
+						? 'text-accent6-600 dark:text-accent6-400'
+						: 'text-theme-muted hover:text-theme'}"
+				>
+					<span class="flex items-center gap-2">
+						{tab.label}
+						<span
+							class="rounded-full px-2 py-0.5 text-xs font-medium
+								{activeTab === tab.id
+								? 'bg-accent6-500/20 text-accent6-600 dark:text-accent6-400'
+								: 'bg-theme-secondary text-theme-muted'}"
+						>
+							{getCountForTab(tab.id)}
+						</span>
+					</span>
+
+					{#if activeTab === tab.id}
+						<span class="absolute right-0 bottom-0 left-0 h-0.5 bg-accent6-500"></span>
+					{/if}
+				</button>
+			{/each}
+		</nav>
+	</div>
+</div>
diff --git a/src/lib/components/admin/invoices/wave/WaveValidationSection.svelte b/src/lib/components/admin/invoices/wave/WaveValidationSection.svelte
new file mode 100644
index 0000000..d51ca2f
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/WaveValidationSection.svelte
@@ -0,0 +1,356 @@
+<script lang="ts">
+	import type { NexusRevenue, NexusProject, WaveProduct } from './types';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	interface CustomerInfo {
+		customerName: string;
+		waveCustomerId: string | null;
+	}
+
+	interface Account {
+		id: string;
+		name: string;
+	}
+
+	interface Props {
+		customer: CustomerInfo;
+		revenues: NexusRevenue[];
+		projects: NexusProject[];
+		waveProducts: WaveProduct[];
+		accounts: Account[];
+		onLinkCustomer: () => void;
+		onLinkRevenue: (revenueId: string, accountName: string) => void;
+		onLinkProject: (projectId: string, projectName: string) => void;
+		onCreateInvoice: () => void;
+	}
+
+	let {
+		customer,
+		revenues,
+		projects,
+		waveProducts,
+		accounts,
+		onLinkCustomer,
+		onLinkRevenue,
+		onLinkProject,
+		onCreateInvoice
+	}: Props = $props();
+
+	// Validation checks
+	let customerLinked = $derived(!!customer.waveCustomerId);
+	let unlinkedRevenues = $derived(revenues.filter((r) => !r.waveServiceId));
+	let unlinkedProjects = $derived(projects.filter((p) => !p.waveServiceId));
+	let linkedRevenues = $derived(revenues.filter((r) => r.waveServiceId));
+	let linkedProjects = $derived(projects.filter((p) => p.waveServiceId));
+	let hasLinkedItems = $derived(linkedRevenues.length > 0 || linkedProjects.length > 0);
+	let totalErrors = $derived(
+		(customerLinked ? 0 : 1) + unlinkedRevenues.length + unlinkedProjects.length
+	);
+	let isValid = $derived(totalErrors === 0 && hasLinkedItems);
+
+	// Get product name for a linked item (waveServiceId is stored as decoded UUID)
+	function getProductName(waveServiceId: string | null): string {
+		if (!waveServiceId) return 'Not linked';
+		const product = waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId);
+		return product?.name ?? 'Unknown product';
+	}
+
+	// Get account name for revenue (accountId is UUID, account.id is GlobalID)
+	function getAccountName(accountId: string): string {
+		const account = accounts.find((a) => fromGlobalId(a.id) === accountId);
+		return account?.name ?? 'Unknown Account';
+	}
+
+	// Format date
+	function formatShortDate(dateStr: string | null): string {
+		if (!dateStr) return '';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number): string {
+		const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Status Summary -->
+	<div class="card-padded">
+		{#if isValid}
+			<div class="flex items-center gap-3">
+				<div class="flex h-10 w-10 items-center justify-center rounded-full bg-success-500/20">
+					<svg
+						class="h-5 w-5 text-success-600 dark:text-success-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h3 class="font-medium text-theme">Ready to create Wave invoice</h3>
+					<p class="text-sm text-theme-muted">
+						All items are linked to Wave. Click below to create the invoice.
+					</p>
+				</div>
+			</div>
+			<button
+				type="button"
+				onclick={onCreateInvoice}
+				class="mt-4 w-full rounded-lg bg-accent6-500 px-4 py-2.5 font-medium text-white transition-colors hover:bg-accent6-600"
+			>
+				Create Wave Invoice
+			</button>
+		{:else if !hasLinkedItems && customerLinked && totalErrors === 0}
+			<div class="flex items-center gap-3">
+				<div class="flex h-10 w-10 items-center justify-center rounded-full bg-warning-500/20">
+					<svg
+						class="h-5 w-5 text-warning-600 dark:text-warning-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h3 class="font-medium text-theme">No line items</h3>
+					<p class="text-sm text-theme-muted">
+						Add at least one linked revenue or project to create the invoice.
+					</p>
+				</div>
+			</div>
+		{:else}
+			<div class="flex items-center gap-3">
+				<div class="flex h-10 w-10 items-center justify-center rounded-full bg-warning-500/20">
+					<svg
+						class="h-5 w-5 text-warning-600 dark:text-warning-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h3 class="font-medium text-theme">
+						{totalErrors} item{totalErrors !== 1 ? 's' : ''} need{totalErrors === 1 ? 's' : ''} linking
+					</h3>
+					<p class="text-sm text-theme-muted">
+						Link all items to Wave products before creating the invoice.
+					</p>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Customer Section -->
+	<div class="card-padded">
+		<h3 class="mb-4 text-sm font-medium text-theme-muted">Customer</h3>
+
+		<div
+			class="rounded-lg border p-4 {customerLinked
+				? 'border-success-200 bg-success-50 dark:border-success-800 dark:bg-success-900/20'
+				: 'border-warning-200 bg-warning-50 dark:border-warning-800 dark:bg-warning-900/20'}"
+		>
+			<div class="flex items-center justify-between gap-4">
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-2">
+						<span class="font-medium text-theme">{customer.customerName}</span>
+						{#if customerLinked}
+							<span class="badge-success">Linked</span>
+						{:else}
+							<span class="badge-warning">Not Linked</span>
+						{/if}
+					</div>
+					{#if customerLinked}
+						<p class="mt-1 truncate text-sm text-theme-muted">
+							Wave Customer ID: {customer.waveCustomerId}
+						</p>
+					{:else}
+						<p class="mt-1 text-sm text-warning-600 dark:text-warning-400">
+							Link this customer to a Wave customer to continue.
+						</p>
+					{/if}
+				</div>
+				<button
+					type="button"
+					onclick={onLinkCustomer}
+					class="shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {customerLinked
+						? 'bg-theme text-theme-secondary hover:bg-black/5 dark:hover:bg-white/10'
+						: 'bg-warning-500 text-white hover:bg-warning-600'}"
+				>
+					{customerLinked ? 'Change' : 'Link'}
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Revenues Section -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h3 class="text-sm font-medium text-theme-muted">Revenues</h3>
+			{#if unlinkedRevenues.length > 0}
+				<span
+					class="rounded-full bg-warning-500/20 px-2 py-0.5 text-xs font-medium text-warning-600 dark:text-warning-400"
+				>
+					{unlinkedRevenues.length} unlinked
+				</span>
+			{:else if revenues.length > 0}
+				<span
+					class="rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-600 dark:text-success-400"
+				>
+					All linked
+				</span>
+			{/if}
+		</div>
+
+		{#if revenues.length === 0}
+			<p class="text-sm text-theme-muted italic">No revenues on this invoice.</p>
+		{:else}
+			<div class="space-y-2">
+				{#each revenues as revenue (revenue.id)}
+					{@const accountName = getAccountName(revenue.accountId)}
+					{@const isLinked = !!revenue.waveServiceId}
+					<div
+						class="rounded-lg border p-3 {isLinked
+							? 'border-theme bg-theme-secondary'
+							: 'border-warning-200 bg-warning-50 dark:border-warning-800 dark:bg-warning-900/20'}"
+					>
+						<div class="flex items-start justify-between gap-3">
+							<div class="min-w-0 flex-1">
+								<div class="flex items-center gap-2">
+									<span class="text-sm font-medium text-theme">{accountName}</span>
+									{#if isLinked}
+										<span class="badge-success">Linked</span>
+									{:else}
+										<span class="badge-warning">Not Linked</span>
+									{/if}
+								</div>
+								<p class="text-xs text-theme-muted">
+									{formatShortDate(revenue.startDate)}
+									{#if revenue.endDate}
+										- {formatShortDate(revenue.endDate)}
+									{:else}
+										- Ongoing
+									{/if}
+								</p>
+								{#if isLinked}
+									<p class="mt-1 text-xs text-theme-muted">
+										Product: {getProductName(revenue.waveServiceId)}
+									</p>
+								{/if}
+							</div>
+							<div class="flex items-center gap-2">
+								<span class="text-sm font-semibold text-secondary-600 dark:text-secondary-400">
+									{formatCurrency(revenue.amount)}
+								</span>
+								<button
+									type="button"
+									onclick={() => onLinkRevenue(revenue.id, accountName)}
+									class="rounded px-2 py-1 text-xs font-medium transition-colors {isLinked
+										? 'text-theme-muted hover:bg-black/5 dark:hover:bg-white/10'
+										: 'bg-warning-500 text-white hover:bg-warning-600'}"
+								>
+									{isLinked ? 'Change' : 'Link'}
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Projects Section -->
+	<div class="card-padded">
+		<div class="mb-4 flex items-center justify-between">
+			<h3 class="text-sm font-medium text-theme-muted">Projects</h3>
+			{#if unlinkedProjects.length > 0}
+				<span
+					class="rounded-full bg-warning-500/20 px-2 py-0.5 text-xs font-medium text-warning-600 dark:text-warning-400"
+				>
+					{unlinkedProjects.length} unlinked
+				</span>
+			{:else if projects.length > 0}
+				<span
+					class="rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-600 dark:text-success-400"
+				>
+					All linked
+				</span>
+			{/if}
+		</div>
+
+		{#if projects.length === 0}
+			<p class="text-sm text-theme-muted italic">No projects on this invoice.</p>
+		{:else}
+			<div class="space-y-2">
+				{#each projects as project (project.id)}
+					{@const isLinked = !!project.waveServiceId}
+					<div
+						class="rounded-lg border p-3 {isLinked
+							? 'border-theme bg-theme-secondary'
+							: 'border-warning-200 bg-warning-50 dark:border-warning-800 dark:bg-warning-900/20'}"
+					>
+						<div class="flex items-start justify-between gap-3">
+							<div class="min-w-0 flex-1">
+								<div class="flex items-center gap-2">
+									<span class="text-sm font-medium text-theme">{project.name}</span>
+									{#if isLinked}
+										<span class="badge-success">Linked</span>
+									{:else}
+										<span class="badge-warning">Not Linked</span>
+									{/if}
+								</div>
+								<p class="text-xs text-theme-muted">{formatShortDate(project.date)}</p>
+								{#if isLinked}
+									<p class="mt-1 text-xs text-theme-muted">
+										Product: {getProductName(project.waveServiceId)}
+									</p>
+								{/if}
+							</div>
+							<div class="flex items-center gap-2">
+								<span class="text-sm font-semibold text-accent-600 dark:text-accent-400">
+									{formatCurrency(project.amount)}
+								</span>
+								<button
+									type="button"
+									onclick={() => onLinkProject(project.id, project.name)}
+									class="rounded px-2 py-1 text-xs font-medium transition-colors {isLinked
+										? 'text-theme-muted hover:bg-black/5 dark:hover:bg-white/10'
+										: 'bg-warning-500 text-white hover:bg-warning-600'}"
+								>
+									{isLinked ? 'Change' : 'Link'}
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/admin/invoices/wave/types.ts b/src/lib/components/admin/invoices/wave/types.ts
new file mode 100644
index 0000000..52ccb6d
--- /dev/null
+++ b/src/lib/components/admin/invoices/wave/types.ts
@@ -0,0 +1,146 @@
+// Wave types (duplicated from page.server.ts since we can't import from there)
+export interface WaveAddress {
+	addressLine1: string | null;
+	addressLine2: string | null;
+	city: string | null;
+	province: { code: string; name: string } | null;
+	country: { code: string; name: string } | null;
+	postalCode: string | null;
+}
+
+export interface WaveCustomer {
+	id: string;
+	name: string;
+	firstName: string | null;
+	lastName: string | null;
+	email: string | null;
+	phone: string | null;
+	mobile: string | null;
+	address: WaveAddress | null;
+	currency: { code: string; symbol: string } | null;
+	internalNotes: string | null;
+	outstandingAmount: { value: string; currency: { code: string } };
+	overdueAmount: { value: string; currency: { code: string } };
+	isArchived: boolean | null;
+	createdAt: string;
+	modifiedAt: string;
+}
+
+// Base WaveProduct with required fields - used across all pages
+export interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: number;
+	isArchived: boolean;
+	// Optional extended fields - available on Wave admin page
+	isSold?: boolean;
+	isBought?: boolean;
+	incomeAccount?: { id: string; name: string } | null;
+	expenseAccount?: { id: string; name: string } | null;
+	defaultSalesTaxes?: Array<{ id: string; name: string; abbreviation: string }>;
+	createdAt?: string;
+	modifiedAt?: string;
+}
+
+export interface WaveInvoiceItem {
+	product: { id: string; name: string };
+	description: string | null;
+	quantity: number;
+	unitPrice: number;
+	subtotal: { value: string };
+	total: { value: string };
+}
+
+export interface WaveInvoice {
+	id: string;
+	invoiceNumber: string;
+	invoiceDate: string;
+	dueDate: string;
+	status: string;
+	title: string;
+	subhead: string | null;
+	poNumber: string | null;
+	memo: string | null;
+	footer: string | null;
+	pdfUrl: string;
+	viewUrl: string;
+	customer: { id: string; name: string; email: string | null };
+	items: WaveInvoiceItem[];
+	subtotal: { value: string; currency: { code: string; symbol: string } };
+	taxTotal: { value: string; currency: { code: string; symbol: string } };
+	discountTotal: { value: string; currency: { code: string; symbol: string } };
+	total: { value: string; currency: { code: string; symbol: string } };
+	amountDue: { value: string; currency: { code: string; symbol: string } };
+	amountPaid: { value: string; currency: { code: string; symbol: string } };
+	lastSentAt: string | null;
+	lastSentVia: string | null;
+	lastViewedAt: string | null;
+}
+
+// Types for revenue and project data from Nexus invoice
+export interface NexusRevenue {
+	id: string;
+	accountId: string;
+	amount: string | number;
+	startDate: string;
+	endDate: string | null;
+	waveServiceId: string | null;
+}
+
+export interface NexusProject {
+	id: string;
+	name: string;
+	date: string;
+	amount: string | number;
+	customerId: string;
+	accountAddressId: string | null;
+	waveServiceId: string | null;
+}
+
+export interface NexusInvoice {
+	id: string;
+	date: string;
+	customerId: string;
+	status: string;
+	datePaid: string | null;
+	paymentType: string | null;
+	waveInvoiceId: string | null;
+	revenues: NexusRevenue[];
+	projects: NexusProject[];
+}
+
+// Types for the invoice form
+export interface WaveLineItem {
+	sourceType: 'revenue' | 'project' | 'additional';
+	sourceId: string;
+	productId: string;
+	productName: string;
+	description: string;
+	quantity: number;
+	unitPrice: number;
+}
+
+export interface WaveDiscount {
+	type: 'PERCENTAGE' | 'FIXED';
+	name: string;
+	value: number; // percentage (0-100) or fixed amount
+}
+
+export interface WaveInvoiceFormData {
+	invoiceDate: string;
+	dueDate: string;
+	memo: string;
+	footer: string;
+	items: WaveLineItem[];
+	discount?: WaveDiscount;
+}
+
+// Validation types
+export interface ValidationIssue {
+	type: 'customer' | 'revenue' | 'project';
+	id: string;
+	description: string;
+}
+
+export type InvoiceTab = 'details' | 'wave';
diff --git a/src/lib/components/admin/notifications/ChannelSelector.svelte b/src/lib/components/admin/notifications/ChannelSelector.svelte
new file mode 100644
index 0000000..8b81c73
--- /dev/null
+++ b/src/lib/components/admin/notifications/ChannelSelector.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	interface Props {
+		selected: string[];
+	}
+
+	let { selected = $bindable([]) }: Props = $props();
+
+	const channels = [
+		{ value: 'IN_APP', label: 'In-App', description: 'Notifications appear in the app' },
+		{ value: 'EMAIL', label: 'Email', description: 'Send email notifications' },
+		{ value: 'SMS', label: 'SMS', description: 'Send text message notifications' }
+	];
+
+	function toggle(value: string) {
+		if (selected.includes(value)) {
+			selected = selected.filter((v) => v !== value);
+		} else {
+			selected = [...selected, value];
+		}
+	}
+</script>
+
+<div>
+	<span class="mb-2 block text-sm font-medium text-theme">
+		Notification Channels <span class="text-error-500">*</span>
+	</span>
+
+	<div class="flex flex-wrap gap-3">
+		{#each channels as channel (channel.value)}
+			<button
+				type="button"
+				onclick={() => toggle(channel.value)}
+				class="flex items-center gap-2 rounded-lg border px-4 py-2.5 text-left transition-colors {selected.includes(
+					channel.value
+				)
+					? 'border-primary-500 bg-primary-500/10 text-primary-600 dark:text-primary-400'
+					: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+			>
+				<span class="flex h-5 w-5 items-center justify-center">
+					{#if channel.value === 'IN_APP'}
+						<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+							/>
+						</svg>
+					{:else if channel.value === 'EMAIL'}
+						<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+							/>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+							/>
+						</svg>
+					{/if}
+				</span>
+				<span class="flex flex-col">
+					<span class="text-sm font-medium">{channel.label}</span>
+					<span class="text-xs text-theme-muted">{channel.description}</span>
+				</span>
+				{#if selected.includes(channel.value)}
+					<svg
+						class="ml-2 h-5 w-5 text-primary-500"
+						style="fill: none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+				{/if}
+			</button>
+		{/each}
+	</div>
+
+	{#if selected.length === 0}
+		<p class="mt-2 text-xs text-error-500">Please select at least one channel</p>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/notifications/EventTypeSelector.svelte b/src/lib/components/admin/notifications/EventTypeSelector.svelte
new file mode 100644
index 0000000..1cd4fed
--- /dev/null
+++ b/src/lib/components/admin/notifications/EventTypeSelector.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+	import { EVENT_TYPE_CATEGORIES } from '$lib/data/eventTypes';
+
+	interface Props {
+		selected: string[];
+	}
+
+	let { selected = $bindable([]) }: Props = $props();
+
+	let searchFilter = $state('');
+	let selectedSet = new SvelteSet<string>(selected);
+	let expandedCategories = new SvelteSet<string>();
+
+	// Sync external changes to internal set
+	$effect(() => {
+		// Only sync if the arrays are actually different
+		const currentValues = [...selectedSet];
+		const isSame =
+			currentValues.length === selected.length && currentValues.every((v) => selected.includes(v));
+		if (!isSame) {
+			selectedSet.clear();
+			for (const v of selected) {
+				selectedSet.add(v);
+			}
+		}
+	});
+
+	// Sync internal set back to parent
+	$effect(() => {
+		const newSelected = [...selectedSet];
+		// Only update if actually changed to avoid infinite loops
+		if (newSelected.length !== selected.length || !newSelected.every((v) => selected.includes(v))) {
+			selected = newSelected;
+		}
+	});
+
+	// Filter categories by search
+	let filteredCategories = $derived(
+		EVENT_TYPE_CATEGORIES.map((cat) => ({
+			...cat,
+			types: cat.types.filter(
+				(t) =>
+					t.label.toLowerCase().includes(searchFilter.toLowerCase()) ||
+					t.value.toLowerCase().includes(searchFilter.toLowerCase())
+			)
+		})).filter((cat) => cat.types.length > 0)
+	);
+
+	function toggle(value: string) {
+		if (selectedSet.has(value)) {
+			selectedSet.delete(value);
+		} else {
+			selectedSet.add(value);
+		}
+	}
+
+	function selectAllInCategory(categoryName: string) {
+		const category = filteredCategories.find((c) => c.name === categoryName);
+		if (category) {
+			for (const type of category.types) {
+				selectedSet.add(type.value);
+			}
+		}
+	}
+
+	function selectNoneInCategory(categoryName: string) {
+		const category = filteredCategories.find((c) => c.name === categoryName);
+		if (category) {
+			for (const type of category.types) {
+				selectedSet.delete(type.value);
+			}
+		}
+	}
+
+	function selectAll() {
+		for (const cat of filteredCategories) {
+			for (const type of cat.types) {
+				selectedSet.add(type.value);
+			}
+		}
+	}
+
+	function selectNone() {
+		selectedSet.clear();
+	}
+
+	function toggleCategory(categoryName: string) {
+		if (expandedCategories.has(categoryName)) {
+			expandedCategories.delete(categoryName);
+		} else {
+			expandedCategories.add(categoryName);
+		}
+	}
+
+	function getSelectedCountInCategory(categoryName: string): number {
+		const category = EVENT_TYPE_CATEGORIES.find((c) => c.name === categoryName);
+		if (!category) return 0;
+		return category.types.filter((t) => selectedSet.has(t.value)).length;
+	}
+</script>
+
+<div class="space-y-3">
+	<div class="flex items-center justify-between">
+		<span class="text-sm font-medium text-theme">
+			Event Types <span class="text-error-500">*</span>
+			<span class="ml-1 text-primary-500">({selectedSet.size} selected)</span>
+		</span>
+		<div class="flex gap-3">
+			<button
+				type="button"
+				onclick={selectAll}
+				class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400"
+			>
+				Select All
+			</button>
+			<button
+				type="button"
+				onclick={selectNone}
+				class="text-xs font-medium text-theme-muted hover:underline"
+			>
+				Clear
+			</button>
+		</div>
+	</div>
+
+	<!-- Search -->
+	<div class="relative">
+		<svg
+			class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-theme-muted"
+			style="fill: none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/>
+		</svg>
+		<input
+			type="text"
+			bind:value={searchFilter}
+			placeholder="Search event types..."
+			class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-9 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+		/>
+	</div>
+
+	<!-- Category Groups -->
+	<div class="max-h-72 space-y-1 overflow-y-auto rounded-lg border border-theme bg-theme-card">
+		{#each filteredCategories as category (category.name)}
+			{@const selectedCount = getSelectedCountInCategory(category.name)}
+			{@const totalCount = category.types.length}
+			{@const isExpanded = expandedCategories.has(category.name)}
+
+			<div class="border-b border-theme last:border-b-0">
+				<!-- Category Header -->
+				<button
+					type="button"
+					onclick={() => toggleCategory(category.name)}
+					class="flex w-full items-center justify-between interactive px-3 py-2.5 text-left"
+				>
+					<span class="flex items-center gap-2">
+						<svg
+							class="h-4 w-4 text-theme-muted transition-transform {isExpanded ? 'rotate-90' : ''}"
+							style="fill: none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+						<span class="text-sm font-medium text-theme">{category.label}</span>
+					</span>
+					<span
+						class="rounded-full px-2 py-0.5 text-xs font-semibold {selectedCount > 0
+							? 'bg-primary-500 text-white'
+							: 'bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
+					>
+						{selectedCount}/{totalCount}
+					</span>
+				</button>
+
+				<!-- Category Content -->
+				{#if isExpanded}
+					<div class="border-t border-theme bg-black/5 dark:bg-white/5">
+						<!-- Category Actions -->
+						<div class="flex items-center gap-4 px-3 py-1.5">
+							<button
+								type="button"
+								onclick={() => selectAllInCategory(category.name)}
+								class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400"
+							>
+								Select All
+							</button>
+							<button
+								type="button"
+								onclick={() => selectNoneInCategory(category.name)}
+								class="text-xs font-medium text-theme-muted hover:underline"
+							>
+								Select None
+							</button>
+						</div>
+
+						<!-- Event Types -->
+						<div class="space-y-0.5 px-3 pb-2">
+							{#each category.types as eventType (eventType.value)}
+								<label
+									class="flex cursor-pointer items-center gap-2 rounded interactive px-2 py-1.5"
+								>
+									<input
+										type="checkbox"
+										checked={selectedSet.has(eventType.value)}
+										onchange={() => toggle(eventType.value)}
+										class="border-theme-muted h-4 w-4 rounded text-primary-500 focus:ring-primary-500"
+									/>
+									<span class="text-sm text-theme">{eventType.label}</span>
+								</label>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/each}
+
+		{#if filteredCategories.length === 0}
+			<p class="px-3 py-4 text-center text-sm text-theme-muted italic">
+				No event types match "{searchFilter}"
+			</p>
+		{/if}
+	</div>
+
+	{#if selectedSet.size === 0}
+		<p class="text-xs text-error-500">Please select at least one event type</p>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/notifications/NotificationRuleForm.svelte b/src/lib/components/admin/notifications/NotificationRuleForm.svelte
new file mode 100644
index 0000000..5baca37
--- /dev/null
+++ b/src/lib/components/admin/notifications/NotificationRuleForm.svelte
@@ -0,0 +1,396 @@
+<script lang="ts">
+	import {
+		CreateNotificationRuleStore,
+		UpdateNotificationRuleStore,
+		type EventTypeChoices$options,
+		type NotificationChannelChoices$options,
+		type RoleChoices$options
+	} from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import EventTypeSelector from './EventTypeSelector.svelte';
+	import ChannelSelector from './ChannelSelector.svelte';
+	import TargetSelector from './TargetSelector.svelte';
+	import TemplateEditor from './TemplateEditor.svelte';
+	import type { AdminNotificationRules$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type NotificationRule = AdminNotificationRules$result['notificationRules'][number];
+
+	interface TeamProfile {
+		id: string;
+		fullName: string;
+		email?: string | null;
+		role: string;
+	}
+
+	interface CustomerProfile {
+		id: string;
+		fullName: string;
+		email?: string | null;
+	}
+
+	interface Props {
+		rule?: NotificationRule | null;
+		teamProfiles: TeamProfile[];
+		customerProfiles: CustomerProfile[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { rule = null, teamProfiles, customerProfiles, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!rule);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Form fields
+	let name = $state(rule?.name ?? '');
+	let description = $state(rule?.description ?? '');
+	let eventTypes = $state<string[]>(rule?.eventTypes ?? []);
+	let channels = $state<string[]>(rule?.channels ?? ['IN_APP']);
+	let targetRoles = $state<string[]>(rule?.targetRoles ?? []);
+	let targetTeamProfileIds = $state<string[]>(rule?.targetTeamProfileIds ?? []);
+	let targetCustomerProfileIds = $state<string[]>(rule?.targetCustomerProfileIds ?? []);
+	let templateSubject = $state(rule?.templateSubject ?? '');
+	let templateBody = $state(rule?.templateBody ?? '');
+	let conditions = $state<string>(rule?.conditions ? JSON.stringify(rule.conditions, null, 2) : '');
+	let isActive = $state(rule?.isActive ?? true);
+
+	let showAdvanced = $state(false);
+	let conditionsError = $state('');
+
+	const createStore = new CreateNotificationRuleStore();
+	const updateStore = new UpdateNotificationRuleStore();
+
+	const conditionsExample = '{"status": "COMPLETED"}';
+
+	const roleOptions = [
+		{ value: 'ADMIN', label: 'Admin' },
+		{ value: 'TEAM_LEADER', label: 'Team Leader' },
+		{ value: 'TEAM_MEMBER', label: 'Team Member' }
+	];
+
+	function toggleRole(role: string) {
+		if (targetRoles.includes(role)) {
+			targetRoles = targetRoles.filter((r) => r !== role);
+		} else {
+			targetRoles = [...targetRoles, role];
+		}
+	}
+
+	function parseConditions(): Record<string, unknown> | null {
+		if (!conditions.trim()) return null;
+		try {
+			const parsed = JSON.parse(conditions);
+			conditionsError = '';
+			return parsed;
+		} catch {
+			conditionsError = 'Invalid JSON';
+			return null;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			// Validation
+			if (!name.trim()) {
+				error = 'Please provide a name for the rule';
+				return;
+			}
+
+			if (eventTypes.length === 0) {
+				error = 'Please select at least one event type';
+				return;
+			}
+
+			if (channels.length === 0) {
+				error = 'Please select at least one notification channel';
+				return;
+			}
+
+			// Parse conditions if provided
+			let parsedConditions: Record<string, unknown> | null = null;
+			if (conditions.trim()) {
+				parsedConditions = parseConditions();
+				if (conditionsError) {
+					error = 'Invalid JSON in conditions field';
+					return;
+				}
+			}
+
+			if (isEdit && rule) {
+				const res = await updateStore.mutate({
+					input: {
+						id: rule.id,
+						name: name.trim(),
+						description: description.trim() || null,
+						eventTypes: eventTypes as EventTypeChoices$options[],
+						channels: channels as NotificationChannelChoices$options[],
+						targetRoles: targetRoles.length > 0 ? (targetRoles as RoleChoices$options[]) : null,
+						targetTeamProfileIds: targetTeamProfileIds.length > 0 ? targetTeamProfileIds : null,
+						targetCustomerProfileIds:
+							targetCustomerProfileIds.length > 0 ? targetCustomerProfileIds : null,
+						templateSubject: templateSubject.trim() || null,
+						templateBody: templateBody.trim() || null,
+						conditions: parsedConditions,
+						isActive
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						name: name.trim(),
+						description: description.trim() || '',
+						eventTypes: eventTypes as EventTypeChoices$options[],
+						channels: channels as NotificationChannelChoices$options[],
+						targetRoles: targetRoles.length > 0 ? (targetRoles as RoleChoices$options[]) : [],
+						targetTeamProfileIds: targetTeamProfileIds.length > 0 ? targetTeamProfileIds : [],
+						targetCustomerProfileIds:
+							targetCustomerProfileIds.length > 0 ? targetCustomerProfileIds : [],
+						templateSubject: templateSubject.trim() || '',
+						templateBody: templateBody.trim() || '',
+						conditions: parsedConditions,
+						isActive
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save notification rule';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-6" onsubmit={handleSubmit}>
+		<!-- Basic Info -->
+		<div class="space-y-4">
+			<h3 class="text-sm font-semibold tracking-wide text-theme-secondary uppercase">Basic Info</h3>
+
+			<div>
+				<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+					Name <span class="text-error-500">*</span>
+				</label>
+				<input
+					id="name"
+					type="text"
+					bind:value={name}
+					disabled={submitting}
+					placeholder="e.g., Service Completion Alert"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+					Description
+				</label>
+				<textarea
+					id="description"
+					bind:value={description}
+					disabled={submitting}
+					rows={2}
+					placeholder="Describe when this rule triggers and what it does"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				></textarea>
+			</div>
+
+			<!-- Active Toggle -->
+			<label class="flex cursor-pointer items-center gap-3">
+				<input
+					type="checkbox"
+					bind:checked={isActive}
+					disabled={submitting}
+					class="border-theme-muted h-5 w-5 rounded text-primary-500 focus:ring-primary-500"
+				/>
+				<span class="text-sm font-medium text-theme">Active</span>
+				<span class="text-xs text-theme-muted">
+					{isActive ? 'This rule will trigger notifications' : 'This rule is disabled'}
+				</span>
+			</label>
+		</div>
+
+		<hr class="border-theme" />
+
+		<!-- Event Types -->
+		<div class="space-y-4">
+			<h3 class="text-sm font-semibold tracking-wide text-theme-secondary uppercase">
+				Trigger Events
+			</h3>
+			<EventTypeSelector bind:selected={eventTypes} />
+		</div>
+
+		<hr class="border-theme" />
+
+		<!-- Channels -->
+		<div class="space-y-4">
+			<h3 class="text-sm font-semibold tracking-wide text-theme-secondary uppercase">
+				Delivery Channels
+			</h3>
+			<ChannelSelector bind:selected={channels} />
+		</div>
+
+		<hr class="border-theme" />
+
+		<!-- Targets -->
+		<div class="space-y-4">
+			<h3 class="text-sm font-semibold tracking-wide text-theme-secondary uppercase">Recipients</h3>
+
+			<!-- Target by Role -->
+			<div>
+				<span class="mb-2 block text-sm font-medium text-theme">Target by Role</span>
+				<p class="mb-2 text-xs text-theme-muted">
+					Leave empty to notify all roles. Select specific roles to limit recipients.
+				</p>
+				<div class="flex flex-wrap gap-2">
+					{#each roleOptions as role (role.value)}
+						<button
+							type="button"
+							onclick={() => toggleRole(role.value)}
+							disabled={submitting}
+							class="rounded-lg border px-3 py-1.5 text-sm transition-colors {targetRoles.includes(
+								role.value
+							)
+								? 'border-primary-500 bg-primary-500/10 text-primary-600 dark:text-primary-400'
+								: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+						>
+							{role.label}
+						</button>
+					{/each}
+				</div>
+				{#if targetRoles.length === 0}
+					<p class="mt-2 text-xs text-success-600 dark:text-success-400">
+						All team members will receive notifications
+					</p>
+				{/if}
+			</div>
+
+			<!-- Specific Team Members -->
+			<TargetSelector
+				label="Specific Team Members"
+				profiles={teamProfiles}
+				bind:selectedIds={targetTeamProfileIds}
+				placeholder="Search team members..."
+			/>
+
+			<!-- Specific Customers -->
+			<TargetSelector
+				label="Specific Customers"
+				profiles={customerProfiles}
+				bind:selectedIds={targetCustomerProfileIds}
+				placeholder="Search customers..."
+			/>
+		</div>
+
+		<hr class="border-theme" />
+
+		<!-- Template -->
+		<div class="space-y-4">
+			<h3 class="text-sm font-semibold tracking-wide text-theme-secondary uppercase">
+				Message Template
+			</h3>
+			<TemplateEditor
+				bind:subject={templateSubject}
+				bind:body={templateBody}
+				selectedEventTypes={eventTypes}
+			/>
+		</div>
+
+		<!-- Advanced Options -->
+		<div>
+			<button
+				type="button"
+				onclick={() => (showAdvanced = !showAdvanced)}
+				class="flex items-center gap-2 text-sm font-medium text-theme-secondary hover:text-theme"
+			>
+				<svg
+					class="h-4 w-4 transition-transform {showAdvanced ? 'rotate-90' : ''}"
+					style="fill: none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+				Advanced Options
+			</button>
+
+			{#if showAdvanced}
+				<div class="mt-4 space-y-4">
+					<div>
+						<label for="conditions" class="mb-1.5 block text-sm font-medium text-theme">
+							Conditions (JSON)
+						</label>
+						<p class="mb-2 text-xs text-theme-muted">
+							Add JSON conditions to filter events. Example: {conditionsExample}
+						</p>
+						<textarea
+							id="conditions"
+							bind:value={conditions}
+							oninput={() => parseConditions()}
+							disabled={submitting}
+							rows={3}
+							placeholder={conditionsExample}
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 font-mono text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+						></textarea>
+						{#if conditionsError}
+							<p class="mt-1 text-xs text-error-500">{conditionsError}</p>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Actions -->
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Rule'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/notifications/TargetSelector.svelte b/src/lib/components/admin/notifications/TargetSelector.svelte
new file mode 100644
index 0000000..311e2cf
--- /dev/null
+++ b/src/lib/components/admin/notifications/TargetSelector.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+
+	interface Profile {
+		id: string;
+		fullName: string;
+		email?: string | null;
+		role?: string;
+	}
+
+	interface Props {
+		label: string;
+		profiles: Profile[];
+		selectedIds: string[];
+		placeholder?: string;
+	}
+
+	let { label, profiles, selectedIds = $bindable([]), placeholder = 'Search...' }: Props = $props();
+
+	let searchQuery = $state('');
+	let expanded = $state(false);
+	let selectedSet = new SvelteSet<string>(selectedIds);
+
+	// Sync external changes to internal set
+	$effect(() => {
+		const currentValues = [...selectedSet];
+		const isSame =
+			currentValues.length === selectedIds.length &&
+			currentValues.every((v) => selectedIds.includes(v));
+		if (!isSame) {
+			selectedSet.clear();
+			for (const v of selectedIds) {
+				selectedSet.add(v);
+			}
+		}
+	});
+
+	// Sync internal set back to parent
+	$effect(() => {
+		const newSelected = [...selectedSet];
+		if (
+			newSelected.length !== selectedIds.length ||
+			!newSelected.every((v) => selectedIds.includes(v))
+		) {
+			selectedIds = newSelected;
+		}
+	});
+
+	let filteredProfiles = $derived(
+		profiles.filter(
+			(p) =>
+				p.fullName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				(p.email?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false)
+		)
+	);
+
+	function toggle(id: string) {
+		if (selectedSet.has(id)) {
+			selectedSet.delete(id);
+		} else {
+			selectedSet.add(id);
+		}
+	}
+
+	function selectAll() {
+		for (const profile of filteredProfiles) {
+			selectedSet.add(profile.id);
+		}
+	}
+
+	function selectNone() {
+		selectedSet.clear();
+	}
+
+	function getSelectedNames(): string {
+		if (selectedSet.size === 0) return 'None selected';
+		if (selectedSet.size <= 2) {
+			return profiles
+				.filter((p) => selectedSet.has(p.id))
+				.map((p) => p.fullName)
+				.join(', ');
+		}
+		return `${selectedSet.size} selected`;
+	}
+</script>
+
+<div class="space-y-2">
+	<button
+		type="button"
+		class="flex w-full items-center justify-between rounded-lg border interactive px-4 py-2.5 text-left {selectedSet.size >
+		0
+			? 'border-primary-500 bg-primary-500/5'
+			: 'border-theme bg-theme'}"
+		onclick={() => (expanded = !expanded)}
+	>
+		<span class="flex flex-col">
+			<span class="flex items-center gap-2">
+				<span class="text-sm font-medium text-theme">{label}</span>
+				{#if selectedSet.size > 0}
+					<span
+						class="inline-flex items-center rounded-full bg-primary-500 px-1.5 py-0.5 text-xs font-medium text-white"
+					>
+						{selectedSet.size}
+					</span>
+				{/if}
+			</span>
+			<span
+				class="text-xs {selectedSet.size > 0
+					? 'text-primary-600 dark:text-primary-400'
+					: 'text-theme-muted'}">{getSelectedNames()}</span
+			>
+		</span>
+		<svg
+			class="h-5 w-5 text-theme-muted transition-transform {expanded ? 'rotate-180' : ''}"
+			style="fill: none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	{#if expanded}
+		<div class="rounded-lg border border-theme bg-theme-card">
+			<!-- Search -->
+			<div class="border-b border-theme p-3">
+				<div class="relative">
+					<svg
+						class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<input
+						type="text"
+						bind:value={searchQuery}
+						{placeholder}
+						class="placeholder-theme-muted w-full rounded-md border border-theme bg-theme py-1.5 pr-3 pl-9 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+					/>
+				</div>
+			</div>
+
+			<!-- Select All / None -->
+			<div class="flex items-center gap-4 border-b border-theme px-3 py-2">
+				<button
+					type="button"
+					onclick={selectAll}
+					class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400"
+				>
+					Select All
+				</button>
+				<button
+					type="button"
+					onclick={selectNone}
+					class="text-xs font-medium text-theme-muted hover:underline"
+				>
+					Select None
+				</button>
+				<span class="ml-auto text-xs text-theme-muted">{selectedSet.size} selected</span>
+			</div>
+
+			<!-- List -->
+			<div class="max-h-48 overflow-y-auto">
+				{#if filteredProfiles.length === 0}
+					<p class="px-3 py-4 text-center text-sm text-theme-muted italic">No profiles found</p>
+				{:else}
+					{#each filteredProfiles as profile (profile.id)}
+						<label class="flex cursor-pointer items-center gap-3 interactive px-3 py-2">
+							<input
+								type="checkbox"
+								checked={selectedSet.has(profile.id)}
+								onchange={() => toggle(profile.id)}
+								class="border-theme-muted h-4 w-4 rounded text-primary-500 focus:ring-primary-500"
+							/>
+							<span class="min-w-0 flex-1">
+								<span class="block truncate text-sm text-theme">{profile.fullName}</span>
+								{#if profile.email}
+									<span class="block truncate text-xs text-theme-muted">{profile.email}</span>
+								{/if}
+							</span>
+							{#if profile.role}
+								<span
+									class="flex-shrink-0 rounded-full bg-gray-500/10 px-2 py-0.5 text-xs text-theme-muted"
+								>
+									{profile.role === 'ADMIN'
+										? 'Admin'
+										: profile.role === 'TEAM_LEADER'
+											? 'Team Leader'
+											: 'Member'}
+								</span>
+							{/if}
+						</label>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/notifications/TemplateEditor.svelte b/src/lib/components/admin/notifications/TemplateEditor.svelte
new file mode 100644
index 0000000..867dacb
--- /dev/null
+++ b/src/lib/components/admin/notifications/TemplateEditor.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import {
+		UNIVERSAL_FIELDS,
+		getActiveDomainsForEvents,
+		type MetadataDomain
+	} from '$lib/data/notificationMetadata';
+
+	interface Props {
+		subject: string;
+		body: string;
+		selectedEventTypes?: string[];
+	}
+
+	let { subject = $bindable(''), body = $bindable(''), selectedEventTypes = [] }: Props = $props();
+
+	let showVariableHints = $state(false);
+
+	// Compute active domains based on selected event types
+	let activeDomains = $derived<MetadataDomain[]>(getActiveDomainsForEvents(selectedEventTypes));
+
+	const subjectPlaceholder = 'e.g., New {event_type} notification';
+	const bodyPlaceholder = 'e.g., A new {event_type} event occurred for {entity_type} {entity_id}.';
+</script>
+
+<div class="space-y-4">
+	<div class="flex items-center justify-between">
+		<h3 class="text-sm font-medium text-theme">Message Template</h3>
+		<button
+			type="button"
+			onclick={() => (showVariableHints = !showVariableHints)}
+			class="text-xs text-primary-600 hover:underline dark:text-primary-400"
+		>
+			{showVariableHints ? 'Hide' : 'Show'} Variables
+		</button>
+	</div>
+
+	{#if showVariableHints}
+		<div class="space-y-3 rounded-lg border border-theme bg-theme-card p-3">
+			<!-- Universal fields -->
+			<div>
+				<p class="mb-2 text-xs font-medium text-theme">Universal Variables:</p>
+				<div class="flex flex-wrap gap-2">
+					{#each UNIVERSAL_FIELDS as field (field.name)}
+						<span class="group relative">
+							<code
+								class="cursor-help rounded bg-primary-500/10 px-1.5 py-0.5 text-xs text-primary-600 dark:text-primary-400"
+							>
+								{`{${field.name}}`}
+							</code>
+							<span
+								class="absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded-lg bg-gray-900 px-2 py-1 text-xs text-white group-hover:block"
+							>
+								{field.description}
+							</span>
+						</span>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Domain-specific fields -->
+			{#if activeDomains.length > 0}
+				{#each activeDomains as domain (domain.name)}
+					<div>
+						<p class="mb-2 text-xs font-medium text-theme">{domain.label} Fields:</p>
+						<div class="flex flex-wrap gap-2">
+							{#each domain.fields as field (field.name)}
+								<span class="group relative">
+									<code
+										class="cursor-help rounded bg-secondary-500/10 px-1.5 py-0.5 text-xs text-secondary-600 dark:text-secondary-400"
+									>
+										{`{${field.name}}`}
+									</code>
+									<span
+										class="absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded-lg bg-gray-900 px-2 py-1 text-xs text-white group-hover:block"
+									>
+										{field.description}
+									</span>
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			{:else}
+				<p class="text-xs text-theme-muted">
+					Select event types above to see available metadata fields.
+				</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div>
+		<label for="template-subject" class="mb-1.5 block text-sm font-medium text-theme">Subject</label
+		>
+		<input
+			id="template-subject"
+			type="text"
+			bind:value={subject}
+			placeholder={subjectPlaceholder}
+			class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+		/>
+	</div>
+
+	<div>
+		<label for="template-body" class="mb-1.5 block text-sm font-medium text-theme">Body</label>
+		<textarea
+			id="template-body"
+			bind:value={body}
+			rows={4}
+			placeholder={bodyPlaceholder}
+			class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+		></textarea>
+	</div>
+</div>
diff --git a/src/lib/components/admin/profiles/CustomerProfileForm.svelte b/src/lib/components/admin/profiles/CustomerProfileForm.svelte
new file mode 100644
index 0000000..a94f802
--- /dev/null
+++ b/src/lib/components/admin/profiles/CustomerProfileForm.svelte
@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { CreateCustomerProfileStore, UpdateCustomerProfileStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { AdminProfiles$result, Customers$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type CustomerProfile = AdminProfiles$result['customerProfiles'][number];
+	type Customer = Customers$result['customers'][number];
+
+	interface Props {
+		profile?: CustomerProfile;
+		customers: Customer[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { profile, customers, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!profile);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let firstName = $state(profile?.firstName ?? '');
+	let lastName = $state(profile?.lastName ?? '');
+	let email = $state(profile?.email ?? '');
+	let phone = $state(profile?.phone ?? '');
+	let status = $state(profile?.status ?? 'ACTIVE');
+	let notes = $state(profile?.notes ?? '');
+	let selectedCustomerIds = $state<string[]>(profile?.customers.map((c) => c.id) ?? []);
+
+	const createStore = new CreateCustomerProfileStore();
+	const updateStore = new UpdateCustomerProfileStore();
+
+	const statusOptions = [
+		{ value: 'ACTIVE', label: 'Active' },
+		{ value: 'PENDING', label: 'Pending' },
+		{ value: 'INACTIVE', label: 'Inactive' }
+	];
+
+	// Active customers only for selection
+	let activeCustomers = $derived(customers.filter((c) => c.status === 'ACTIVE'));
+
+	function toggleCustomer(customerId: string) {
+		if (selectedCustomerIds.includes(customerId)) {
+			selectedCustomerIds = selectedCustomerIds.filter((id) => id !== customerId);
+		} else {
+			selectedCustomerIds = [...selectedCustomerIds, customerId];
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!firstName || !lastName) {
+				error = 'Please provide first name and last name';
+				return;
+			}
+
+			if (isEdit && profile) {
+				const res = await updateStore.mutate({
+					input: {
+						id: profile.id,
+						firstName,
+						lastName,
+						email: email || null,
+						phone: phone || null,
+						status,
+						notes: notes || null,
+						customerIds: selectedCustomerIds.length > 0 ? selectedCustomerIds : null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						firstName,
+						lastName,
+						email: email || null,
+						phone: phone || null,
+						status,
+						notes: notes || null,
+						customerIds: selectedCustomerIds.length > 0 ? selectedCustomerIds : null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save customer profile';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		{#if isEdit && profile}
+			<div>
+				<span class="mb-1.5 block text-sm font-medium text-theme">Profile ID</span>
+				<p class="font-mono text-sm text-theme-muted">{fromGlobalId(profile.id)}</p>
+			</div>
+		{/if}
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="firstName" class="mb-1.5 block text-sm font-medium text-theme">
+					First Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="firstName"
+					type="text"
+					bind:value={firstName}
+					disabled={submitting}
+					placeholder="Enter first name"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="lastName" class="mb-1.5 block text-sm font-medium text-theme">
+					Last Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="lastName"
+					type="text"
+					bind:value={lastName}
+					disabled={submitting}
+					placeholder="Enter last name"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<div>
+			<label for="email" class="mb-1.5 block text-sm font-medium text-theme"> Email </label>
+			<input
+				id="email"
+				type="email"
+				bind:value={email}
+				disabled={submitting}
+				placeholder="Enter email address"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="phone" class="mb-1.5 block text-sm font-medium text-theme"> Phone </label>
+			<input
+				id="phone"
+				type="tel"
+				bind:value={phone}
+				disabled={submitting}
+				placeholder="Enter phone number"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="status" class="mb-1.5 block text-sm font-medium text-theme"> Status </label>
+			<select
+				id="status"
+				bind:value={status}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#each statusOptions as option (option.value)}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Customer Access -->
+		<div>
+			<span class="mb-1.5 block text-sm font-medium text-theme">Customer Access</span>
+			<p class="mb-2 text-xs text-theme-muted">Select which customers this profile can access.</p>
+			{#if activeCustomers.length > 0}
+				<div
+					class="max-h-48 space-y-2 overflow-y-auto rounded-lg border border-theme bg-theme-secondary p-3"
+				>
+					{#each activeCustomers as customer (customer.id)}
+						<label class="flex cursor-pointer items-center gap-2">
+							<input
+								type="checkbox"
+								checked={selectedCustomerIds.includes(customer.id)}
+								onchange={() => toggleCustomer(customer.id)}
+								disabled={submitting}
+								class="h-4 w-4 rounded border-theme text-primary-500 focus:ring-primary-500"
+							/>
+							<span class="text-sm text-theme">{customer.name}</span>
+						</label>
+					{/each}
+				</div>
+			{:else}
+				<p class="text-sm text-theme-muted italic">No active customers available.</p>
+			{/if}
+		</div>
+
+		<div>
+			<label for="notes" class="mb-1.5 block text-sm font-medium text-theme"> Notes </label>
+			<textarea
+				id="notes"
+				bind:value={notes}
+				disabled={submitting}
+				rows="3"
+				placeholder="Additional notes (optional)"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Customer Profile'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/profiles/TeamProfileForm.svelte b/src/lib/components/admin/profiles/TeamProfileForm.svelte
new file mode 100644
index 0000000..c1f40d9
--- /dev/null
+++ b/src/lib/components/admin/profiles/TeamProfileForm.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+	import { CreateTeamProfileStore, UpdateTeamProfileStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { AdminProfiles$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type TeamProfile = AdminProfiles$result['teamProfiles'][number];
+
+	interface Props {
+		profile?: TeamProfile;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { profile, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!profile);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let firstName = $state(profile?.firstName ?? '');
+	let lastName = $state(profile?.lastName ?? '');
+	let email = $state(profile?.email ?? '');
+	let phone = $state(profile?.phone ?? '');
+	let role = $state(profile?.role ?? 'TEAM_MEMBER');
+	let status = $state(profile?.status ?? 'ACTIVE');
+	let notes = $state(profile?.notes ?? '');
+
+	const createStore = new CreateTeamProfileStore();
+	const updateStore = new UpdateTeamProfileStore();
+
+	const roleOptions = [
+		{ value: 'ADMIN', label: 'Admin' },
+		{ value: 'TEAM_LEADER', label: 'Team Leader' },
+		{ value: 'TEAM_MEMBER', label: 'Team Member' }
+	];
+
+	const statusOptions = [
+		{ value: 'ACTIVE', label: 'Active' },
+		{ value: 'PENDING', label: 'Pending' },
+		{ value: 'INACTIVE', label: 'Inactive' }
+	];
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!firstName || !lastName || !role) {
+				error = 'Please provide first name, last name, and role';
+				return;
+			}
+
+			if (isEdit && profile) {
+				const res = await updateStore.mutate({
+					input: {
+						id: profile.id,
+						firstName,
+						lastName,
+						email: email || null,
+						phone: phone || null,
+						role,
+						status,
+						notes: notes || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: {
+						firstName,
+						lastName,
+						email: email || null,
+						phone: phone || null,
+						role,
+						status,
+						notes: notes || null
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e: { message: string }) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save team member';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		{#if isEdit && profile}
+			<div>
+				<span class="mb-1.5 block text-sm font-medium text-theme">Profile ID</span>
+				<p class="font-mono text-sm text-theme-muted">{fromGlobalId(profile.id)}</p>
+			</div>
+		{/if}
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="firstName" class="mb-1.5 block text-sm font-medium text-theme">
+					First Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="firstName"
+					type="text"
+					bind:value={firstName}
+					disabled={submitting}
+					placeholder="Enter first name"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+
+			<div>
+				<label for="lastName" class="mb-1.5 block text-sm font-medium text-theme">
+					Last Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="lastName"
+					type="text"
+					bind:value={lastName}
+					disabled={submitting}
+					placeholder="Enter last name"
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+			</div>
+		</div>
+
+		<div>
+			<label for="email" class="mb-1.5 block text-sm font-medium text-theme"> Email </label>
+			<input
+				id="email"
+				type="email"
+				bind:value={email}
+				disabled={submitting}
+				placeholder="Enter email address"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="phone" class="mb-1.5 block text-sm font-medium text-theme"> Phone </label>
+			<input
+				id="phone"
+				type="tel"
+				bind:value={phone}
+				disabled={submitting}
+				placeholder="Enter phone number"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="role" class="mb-1.5 block text-sm font-medium text-theme">
+				Role <span class="text-red-500">*</span>
+			</label>
+			<select
+				id="role"
+				bind:value={role}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#each roleOptions as option (option.value)}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div>
+			<label for="status" class="mb-1.5 block text-sm font-medium text-theme"> Status </label>
+			<select
+				id="status"
+				bind:value={status}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#each statusOptions as option (option.value)}
+					<option value={option.value}>{option.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div>
+			<label for="notes" class="mb-1.5 block text-sm font-medium text-theme"> Notes </label>
+			<textarea
+				id="notes"
+				bind:value={notes}
+				disabled={submitting}
+				rows="3"
+				placeholder="Additional notes (optional)"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Team Member'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/projects/ProjectCategoryForm.svelte b/src/lib/components/admin/projects/ProjectCategoryForm.svelte
new file mode 100644
index 0000000..70e2b91
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectCategoryForm.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { createProjectScopeCategory, updateProjectScopeCategory } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { ProjectScope$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Category = NonNullable<ProjectScope$result['projectScope']>['projectAreas'][number];
+
+	interface Props {
+		scopeId: string;
+		category?: Category;
+		nextOrder?: number;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { scopeId, category, nextOrder = 0, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!category);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let name = $state(category?.name ?? '');
+	let order = $state(category?.order ?? nextOrder);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name.trim()) {
+				error = 'Please provide a category name';
+				return;
+			}
+
+			if (isEdit && category) {
+				await updateProjectScopeCategory({
+					id: category.id,
+					name: name.trim(),
+					order
+				});
+			} else {
+				await createProjectScopeCategory({
+					scopeId,
+					name: name.trim(),
+					order
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save category';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Category Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Kitchen, Exterior, Deep Clean"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="order" class="mb-1.5 block text-sm font-medium text-theme"> Display Order </label>
+			<input
+				id="order"
+				type="number"
+				min="0"
+				bind:value={order}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+			<p class="mt-1 text-xs text-theme-muted">Lower numbers appear first</p>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Category'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/projects/ProjectDetailsCard.svelte b/src/lib/components/admin/projects/ProjectDetailsCard.svelte
new file mode 100644
index 0000000..16e5559
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectDetailsCard.svelte
@@ -0,0 +1,298 @@
+<script lang="ts">
+	import { formatDate } from '$lib/utils/date';
+	import { goto } from '$app/navigation';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	interface TeamMember {
+		id: string;
+		fullName: string;
+		role: string;
+	}
+
+	interface AccountInfo {
+		accountName: string;
+		addressName: string;
+	}
+
+	interface CustomerInfo {
+		customerName: string;
+	}
+
+	interface WaveProduct {
+		id: string;
+		name: string;
+		description: string | null;
+		unitPrice: number | string;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		projectId: string;
+		projectName: string | null;
+		status: string;
+		date: string | null;
+		amount: number | string | null;
+		labor: number | string | null;
+		address: string | null;
+		teamMembers: TeamMember[];
+		notes: string | null;
+		calendarEventId?: string | null;
+		waveServiceId?: string | null;
+		waveProducts?: WaveProduct[];
+		onScheduleEvent?: () => void;
+		accountInfo?: AccountInfo | null;
+		customerInfo?: CustomerInfo | null;
+		isDispatched?: boolean;
+	}
+
+	let {
+		projectId,
+		projectName,
+		status,
+		date,
+		amount,
+		labor,
+		address,
+		teamMembers,
+		notes,
+		calendarEventId,
+		waveServiceId,
+		waveProducts = [],
+		onScheduleEvent,
+		accountInfo,
+		customerInfo,
+		isDispatched = false
+	}: Props = $props();
+
+	// Find linked Wave product
+	let linkedProduct = $derived(
+		waveServiceId ? waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId) : null
+	);
+
+	// Non-admin team members for messaging (exclude ADMIN role)
+	let messagableMembers = $derived(teamMembers.filter((m) => m.role !== 'ADMIN'));
+
+	// Build the subject line for messages
+	let messageSubject = $derived(() => {
+		const formattedDate = formatDate(date) || 'Unknown Date';
+		const accountName = accountInfo?.accountName || customerInfo?.customerName || 'Unknown';
+		const name = projectName || 'Project';
+		return `${formattedDate} - Project: ${name} - ${accountName}`;
+	});
+
+	// Navigate to new message page with pre-filled params
+	function messageTeamMember(memberId: string) {
+		const params = new URLSearchParams({
+			entityType: 'Project',
+			entityId: projectId,
+			participantIds: memberId,
+			conversationType: 'DIRECT',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	// Navigate to new message page with all team members
+	function messageAllTeamMembers() {
+		const memberIds = messagableMembers.map((m) => m.id).join(',');
+		const params = new URLSearchParams({
+			entityType: 'Project',
+			entityId: projectId,
+			participantIds: memberIds,
+			conversationType: 'GROUP',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	function formatCurrency(value: number | string | null | undefined): string {
+		if (value == null) return '$0';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD',
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 0
+		}).format(num);
+	}
+
+	function getStatusBadgeClass(projectStatus: string): string {
+		switch (projectStatus) {
+			case 'SCHEDULED':
+				return 'badge-primary';
+			case 'IN_PROGRESS':
+				return 'badge-accent';
+			default:
+				return 'badge-secondary';
+		}
+	}
+</script>
+
+<div class="mb-6 rounded-xl border border-theme bg-theme-card p-6">
+	<div class="mb-4 flex items-center justify-between">
+		<h2 class="text-lg font-semibold text-theme">Project Details</h2>
+		{#if calendarEventId}
+			<a
+				href="/admin/calendar/{calendarEventId}"
+				class="inline-flex items-center gap-2 rounded-lg bg-accent7-500/10 px-3 py-1.5 text-sm font-medium text-accent7-600 transition-colors hover:bg-accent7-500/20 dark:text-accent7-400"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				View Event
+			</a>
+		{:else if onScheduleEvent}
+			<button
+				type="button"
+				onclick={onScheduleEvent}
+				class="inline-flex items-center gap-2 rounded-lg bg-accent7-500/10 px-3 py-1.5 text-sm font-medium text-accent7-600 transition-colors hover:bg-accent7-500/20 dark:text-accent7-400"
+			>
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				Schedule Event
+			</button>
+		{/if}
+	</div>
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+		<!-- Status -->
+		<div>
+			<p class="detail-label">Status</p>
+			<div class="flex flex-wrap gap-2">
+				<span
+					class="inline-block rounded-full px-3 py-1 text-xs font-medium {getStatusBadgeClass(
+						status
+					)}"
+				>
+					{status.replace('_', ' ')}
+				</span>
+				{#if isDispatched}
+					<span
+						class="inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+					>
+						Dispatched
+					</span>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Date -->
+		<div>
+			<p class="detail-label">Date</p>
+			<p class="text-theme">{formatDate(date)}</p>
+		</div>
+
+		<!-- Amount -->
+		<div>
+			<p class="detail-label">Amount</p>
+			<p class="font-semibold text-theme">{formatCurrency(amount)}</p>
+		</div>
+
+		<!-- Labor -->
+		<div>
+			<p class="detail-label">Labor</p>
+			<p class="text-theme">{formatCurrency(labor)}</p>
+		</div>
+	</div>
+
+	<!-- Address -->
+	{#if address}
+		<div class="mt-4 border-t border-theme pt-4">
+			<p class="detail-label">Address</p>
+			<p class="text-theme">{address}</p>
+		</div>
+	{/if}
+
+	<!-- Team Members -->
+	{#if teamMembers.length > 0}
+		<div class="mt-4 border-t border-theme pt-4">
+			<div class="mb-2 flex items-center justify-between">
+				<p class="detail-label">Team</p>
+				{#if messagableMembers.length >= 2}
+					<button
+						type="button"
+						onclick={messageAllTeamMembers}
+						class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary-700"
+					>
+						<svg class="h-3.5 w-3.5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+						Message Team
+					</button>
+				{/if}
+			</div>
+			<div class="space-y-2">
+				{#each teamMembers as member (member.id)}
+					<div class="flex items-center gap-2">
+						<span
+							class="inline-flex h-6 w-6 items-center justify-center rounded text-xs font-bold {member.role ===
+							'TEAM_LEADER'
+								? 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
+								: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'}"
+						>
+							{member.role === 'TEAM_LEADER' ? 'TL' : 'TM'}
+						</span>
+						{#if member.role !== 'ADMIN'}
+							<button
+								type="button"
+								onclick={() => messageTeamMember(member.id)}
+								class="rounded-full p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Message {member.fullName}"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+									/>
+								</svg>
+							</button>
+						{:else}
+							<!-- Spacer to maintain alignment for admin members -->
+							<span class="h-6 w-6"></span>
+						{/if}
+						<span class="text-theme">{member.fullName}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Wave Integration -->
+	{#if waveServiceId}
+		<div class="mt-4 border-t border-theme pt-4">
+			<p class="detail-label">Wave Integration</p>
+			<div class="flex items-center gap-2">
+				<span class="badge-primary">Linked</span>
+				{#if linkedProduct}
+					<span class="text-theme">{linkedProduct.name}</span>
+				{/if}
+			</div>
+			<p class="mt-1 font-mono text-xs text-theme-muted">{waveServiceId}</p>
+		</div>
+	{/if}
+
+	<!-- Notes -->
+	{#if notes}
+		<div class="mt-4 border-t border-theme pt-4">
+			<p class="detail-label">Notes</p>
+			<p class="whitespace-pre-wrap text-theme-secondary">{notes}</p>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/projects/ProjectForm.svelte b/src/lib/components/admin/projects/ProjectForm.svelte
new file mode 100644
index 0000000..b12b2d7
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectForm.svelte
@@ -0,0 +1,769 @@
+<script lang="ts">
+	import { CreateProjectStore, UpdateProjectStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { GetProject$result, Customers$result, Accounts$result, Team$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Project = NonNullable<GetProject$result['project']>;
+	type Customer = Customers$result['customers'][number];
+	type Account = Accounts$result['accounts'][number];
+	type TeamProfile = Team$result['teamProfiles'][number];
+
+	interface WaveProduct {
+		id: string;
+		name: string;
+		description: string | null;
+		unitPrice: number | string;
+		isArchived: boolean;
+	}
+
+	interface Props {
+		project?: Project;
+		customers: Customer[];
+		accounts: Account[];
+		teamProfiles: TeamProfile[];
+		waveProducts?: WaveProduct[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let {
+		project,
+		customers,
+		accounts,
+		teamProfiles,
+		waveProducts = [],
+		onSuccess,
+		onCancel
+	}: Props = $props();
+
+	let isEdit = $derived(!!project);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Helper to find customer Relay Global ID from UUID
+	function findCustomerGlobalId(customerUuid: string | null | undefined): string {
+		if (!customerUuid) return '';
+		// Find customer whose Global ID decodes to this UUID
+		const customer = customers.find((c) => fromGlobalId(c.id) === customerUuid);
+		return customer?.id ?? '';
+	}
+
+	// Helper to find address Relay Global ID from UUID
+	function findAddressGlobalId(addressUuid: string | null | undefined): string {
+		if (!addressUuid) return '';
+		// Search through all accounts for this address UUID
+		for (const account of accounts) {
+			const address = account.addresses?.find((a) => fromGlobalId(a.id) === addressUuid);
+			if (address) return address.id;
+		}
+		return '';
+	}
+
+	// Helper to find account that contains an address UUID
+	function findAccountForAddressUuid(addressUuid: string | null | undefined): string {
+		if (!addressUuid) return '';
+		for (const account of accounts) {
+			const hasAddress = account.addresses?.some((a) => fromGlobalId(a.id) === addressUuid);
+			if (hasAddress) return account.id;
+		}
+		return '';
+	}
+
+	// Helper to convert team member UUIDs (pk) to Relay Global IDs
+	function findTeamMemberGlobalIds(memberPks: { pk: string }[] | null | undefined): string[] {
+		if (!memberPks) return [];
+		return memberPks
+			.map((m) => {
+				// Find team profile whose Global ID decodes to this pk UUID
+				const profile = teamProfiles.find((p) => fromGlobalId(p.id) === m.pk);
+				return profile?.id;
+			})
+			.filter((id): id is string => !!id);
+	}
+
+	// Form fields - convert project UUIDs to Relay Global IDs for form
+	let customerId = $state(findCustomerGlobalId(project?.customerId));
+	let selectedAccountId = $state(findAccountForAddressUuid(project?.accountAddressId));
+	let accountAddressId = $state(findAddressGlobalId(project?.accountAddressId));
+	let useManualAddress = $state(
+		!project?.accountAddressId && !!(project?.streetAddress || project?.city)
+	);
+	let name = $state(project?.name ?? '');
+	let date = $state(project?.date ?? '');
+	let amount = $state(project?.amount?.toString() ?? '');
+	let labor = $state(project?.labor?.toString() ?? '');
+	let status = $state(project?.status ?? 'SCHEDULED');
+	let streetAddress = $state(project?.streetAddress ?? '');
+	let city = $state(project?.city ?? '');
+	let stateCode = $state(project?.state ?? '');
+	let zipCode = $state(project?.zipCode ?? '');
+	let notes = $state(project?.notes ?? '');
+	let selectedTeamMemberIds = $state<string[]>(findTeamMemberGlobalIds(project?.teamMembers));
+	let waveServiceId = $state(project?.waveServiceId ?? '');
+
+	// Find linked Wave product for display
+	let linkedProduct = $derived(
+		waveServiceId ? waveProducts.find((p) => fromGlobalId(p.id) === waveServiceId) : null
+	);
+
+	// Filter accounts for selected customer
+	// customerId state is now a Relay Global ID
+	// account.customerId is a UUID, so we need to convert for comparison
+	let customerAccounts = $derived(() => {
+		if (!customerId) return [];
+		const customerUuid = fromGlobalId(customerId);
+		return accounts.filter((a) => a.customerId === customerUuid);
+	});
+
+	// Get addresses for selected account
+	let accountAddresses = $derived(() => {
+		if (!selectedAccountId) return [];
+		const account = customerAccounts().find((a) => a.id === selectedAccountId);
+		return account?.addresses ?? [];
+	});
+
+	// Get currently selected address details for display
+	let selectedAddressDetails = $derived(() => {
+		if (!accountAddressId) return null;
+		for (const account of customerAccounts()) {
+			const address = account.addresses?.find((a) => a.id === accountAddressId);
+			if (address) {
+				return { account, address };
+			}
+		}
+		return null;
+	});
+
+	// When customer changes, reset account and address
+	function handleCustomerChange() {
+		selectedAccountId = '';
+		accountAddressId = '';
+		useManualAddress = false;
+	}
+
+	// When account changes, auto-select if only one address, otherwise reset
+	function handleAccountChange() {
+		const addresses = accountAddresses();
+		if (addresses.length === 1) {
+			accountAddressId = addresses[0].id;
+		} else {
+			accountAddressId = '';
+		}
+		useManualAddress = false;
+	}
+
+	// Toggle manual address mode
+	function toggleManualAddress() {
+		useManualAddress = !useManualAddress;
+		if (useManualAddress) {
+			selectedAccountId = '';
+			accountAddressId = '';
+		}
+	}
+
+	// Non-admin team members only
+	let nonAdminTeamMembers = $derived(teamProfiles.filter((p) => p.role !== 'ADMIN'));
+
+	// Get admin profile ID
+	let adminProfileId = $derived(teamProfiles.find((p) => p.role === 'ADMIN')?.id ?? null);
+
+	// Track if project is dispatched (admin profile is in team members)
+	let isDispatched = $derived(
+		adminProfileId ? selectedTeamMemberIds.includes(adminProfileId) : false
+	);
+
+	function toggleDispatched() {
+		if (!adminProfileId) return;
+		if (isDispatched) {
+			// When un-dispatching, remove admin and clear all team members
+			selectedTeamMemberIds = [];
+		} else {
+			selectedTeamMemberIds = [...selectedTeamMemberIds, adminProfileId];
+		}
+	}
+
+	const createStore = new CreateProjectStore();
+	const updateStore = new UpdateProjectStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!customerId || !name || !date || !amount) {
+				error = 'Please provide customer, name, date, and amount';
+				return;
+			}
+
+			// Require either accountAddressId OR manual address
+			const hasAccountAddress = !!accountAddressId;
+			const hasManualAddress = !!(streetAddress && city && stateCode);
+			if (!hasAccountAddress && !hasManualAddress) {
+				error = 'Please select an account address or enter a manual address';
+				return;
+			}
+
+			const baseInput = {
+				customerId,
+				accountAddressId: accountAddressId || null,
+				name,
+				date,
+				amount: parseFloat(amount),
+				labor: labor ? parseFloat(labor) : 0,
+				status,
+				streetAddress: accountAddressId ? null : streetAddress || null,
+				city: accountAddressId ? null : city || null,
+				state: accountAddressId ? null : stateCode || null,
+				zipCode: accountAddressId ? null : zipCode || null,
+				notes: notes || null,
+				teamMemberIds: selectedTeamMemberIds.length > 0 ? selectedTeamMemberIds : null,
+				waveServiceId: waveServiceId || ''
+			};
+
+			if (isEdit && project) {
+				const res = await updateStore.mutate({
+					input: {
+						id: project.id,
+						...baseInput
+					}
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				const res = await createStore.mutate({
+					input: baseInput
+				});
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save project';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+
+	function toggleTeamMember(id: string) {
+		if (selectedTeamMemberIds.includes(id)) {
+			selectedTeamMemberIds = selectedTeamMemberIds.filter((m) => m !== id);
+		} else {
+			selectedTeamMemberIds = [...selectedTeamMemberIds, id];
+		}
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<!-- Customer -->
+		<div>
+			<label for="customerId" class="mb-1.5 block text-sm font-medium text-theme">
+				Customer <span class="text-red-500">*</span>
+			</label>
+			<div class="relative w-full">
+				<select
+					id="customerId"
+					bind:value={customerId}
+					onchange={handleCustomerChange}
+					disabled={submitting}
+					class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="">Select a customer</option>
+					{#each customers as customer (customer.id)}
+						<option value={customer.id}>{customer.name}</option>
+					{/each}
+				</select>
+				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+					<svg
+						class="h-4 w-4 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</div>
+			</div>
+		</div>
+
+		<!-- Address Selection Section -->
+		{#if customerId}
+			<div class="space-y-4 rounded-lg border border-theme bg-theme-card p-4">
+				<div class="flex items-center justify-between">
+					<p class="text-sm font-medium text-theme">Project Location</p>
+					{#if customerAccounts().length > 0}
+						<button
+							type="button"
+							onclick={toggleManualAddress}
+							class="text-xs text-primary-500 hover:text-primary-600"
+						>
+							{useManualAddress ? 'Use account address' : 'Enter address manually'}
+						</button>
+					{/if}
+				</div>
+
+				{#if !useManualAddress && customerAccounts().length > 0}
+					<!-- Account Selection -->
+					<div>
+						<label for="selectedAccountId" class="mb-1.5 block text-sm text-theme-secondary">
+							Account
+						</label>
+						<div class="relative w-full">
+							<select
+								id="selectedAccountId"
+								bind:value={selectedAccountId}
+								onchange={handleAccountChange}
+								disabled={submitting}
+								class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+							>
+								<option value="">Select an account</option>
+								{#each customerAccounts() as account (account.id)}
+									<option value={account.id}>{account.name}</option>
+								{/each}
+							</select>
+							<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+								<svg
+									class="h-4 w-4 text-theme-muted"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M19 9l-7 7-7-7"
+									/>
+								</svg>
+							</div>
+						</div>
+					</div>
+
+					<!-- Address Selection (shown when account is selected) -->
+					{#if selectedAccountId && accountAddresses().length > 0}
+						<div>
+							<label for="accountAddressId" class="mb-1.5 block text-sm text-theme-secondary">
+								Address
+							</label>
+							{#if accountAddresses().length === 1}
+								<!-- Single address - show as confirmation -->
+								{@const address = accountAddresses()[0]}
+								<div
+									class="rounded-lg border border-primary-200 bg-primary-50 p-3 dark:border-primary-800 dark:bg-primary-900/20"
+								>
+									<div class="flex items-start gap-2">
+										<svg
+											class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+											/>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+											/>
+										</svg>
+										<div class="text-sm">
+											<p class="font-medium text-theme">{address.streetAddress}</p>
+											<p class="text-theme-secondary">
+												{address.city}, {address.state}
+												{address.zipCode}
+											</p>
+										</div>
+									</div>
+								</div>
+							{:else}
+								<!-- Multiple addresses - show dropdown -->
+								<div class="relative w-full">
+									<select
+										id="accountAddressId"
+										bind:value={accountAddressId}
+										disabled={submitting}
+										class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+									>
+										<option value="">Select an address</option>
+										{#each accountAddresses() as address (address.id)}
+											<option value={address.id}>
+												{address.streetAddress}, {address.city}, {address.state}
+											</option>
+										{/each}
+									</select>
+									<div
+										class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
+									>
+										<svg
+											class="h-4 w-4 text-theme-muted"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</div>
+								</div>
+							{/if}
+						</div>
+
+						<!-- Show selected address confirmation (for multi-address accounts) -->
+						{#if accountAddresses().length > 1 && selectedAddressDetails()}
+							{@const details = selectedAddressDetails()}
+							<div
+								class="rounded-lg border border-primary-200 bg-primary-50 p-3 dark:border-primary-800 dark:bg-primary-900/20"
+							>
+								<div class="flex items-start gap-2">
+									<svg
+										class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+									</svg>
+									<div class="text-sm">
+										<p class="font-medium text-theme">{details?.address.streetAddress}</p>
+										<p class="text-theme-secondary">
+											{details?.address.city}, {details?.address.state}
+											{details?.address.zipCode}
+										</p>
+									</div>
+								</div>
+							</div>
+						{/if}
+					{:else if selectedAccountId && accountAddresses().length === 0}
+						<p class="text-sm text-theme-muted italic">
+							This account has no addresses. Please enter address manually.
+						</p>
+					{/if}
+				{:else}
+					<!-- Manual Address Entry -->
+					<div class="space-y-3">
+						<div>
+							<label for="streetAddress" class="mb-1 block text-sm text-theme-secondary"
+								>Street</label
+							>
+							<input
+								id="streetAddress"
+								type="text"
+								bind:value={streetAddress}
+								disabled={submitting}
+								placeholder="123 Main St"
+								class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+							/>
+						</div>
+						<div class="grid grid-cols-6 gap-3">
+							<div class="col-span-3">
+								<label for="city" class="mb-1 block text-sm text-theme-secondary">City</label>
+								<input
+									id="city"
+									type="text"
+									bind:value={city}
+									disabled={submitting}
+									class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+								/>
+							</div>
+							<div class="col-span-1">
+								<label for="stateCode" class="mb-1 block text-sm text-theme-secondary">State</label>
+								<input
+									id="stateCode"
+									type="text"
+									bind:value={stateCode}
+									disabled={submitting}
+									maxlength="2"
+									class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+								/>
+							</div>
+							<div class="col-span-2">
+								<label for="zipCode" class="mb-1 block text-sm text-theme-secondary">Zip</label>
+								<input
+									id="zipCode"
+									type="text"
+									bind:value={zipCode}
+									disabled={submitting}
+									class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Project Name -->
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Project Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Deep Clean - March"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<!-- Date -->
+		<div>
+			<label for="date" class="mb-1.5 block text-sm font-medium text-theme">
+				Date <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="date"
+				type="date"
+				bind:value={date}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<!-- Amount + Labor -->
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="amount" class="mb-1.5 block text-sm font-medium text-theme">
+					Amount <span class="text-red-500">*</span>
+				</label>
+				<div class="relative">
+					<span class="absolute top-1/2 left-3 -translate-y-1/2 text-theme-muted">$</span>
+					<input
+						id="amount"
+						type="number"
+						step="0.01"
+						min="0"
+						bind:value={amount}
+						disabled={submitting}
+						placeholder="0.00"
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-7 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					/>
+				</div>
+			</div>
+			<div>
+				<label for="labor" class="mb-1.5 block text-sm font-medium text-theme"> Labor </label>
+				<div class="relative">
+					<span class="absolute top-1/2 left-3 -translate-y-1/2 text-theme-muted">$</span>
+					<input
+						id="labor"
+						type="number"
+						step="0.01"
+						min="0"
+						bind:value={labor}
+						disabled={submitting}
+						placeholder="0.00"
+						class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-3 pl-7 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<!-- Status (only for edit) -->
+		{#if isEdit}
+			<div>
+				<label for="status" class="mb-1.5 block text-sm font-medium text-theme"> Status </label>
+				<div class="relative w-full">
+					<select
+						id="status"
+						bind:value={status}
+						disabled={submitting}
+						class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<option value="SCHEDULED">Scheduled</option>
+						<option value="IN_PROGRESS">In Progress</option>
+						<option value="COMPLETED">Completed</option>
+					</select>
+					<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+						<svg
+							class="h-4 w-4 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 9l-7 7-7-7"
+							/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Dispatched Toggle -->
+		<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-3">
+			<div>
+				<p class="text-sm font-medium text-theme">Dispatched</p>
+				<p class="text-xs text-theme-muted">Required before assigning team members</p>
+			</div>
+			<button
+				type="button"
+				onclick={toggleDispatched}
+				disabled={submitting}
+				class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {isDispatched
+					? 'bg-emerald-500'
+					: 'bg-gray-200 dark:bg-gray-700'}"
+				role="switch"
+				aria-checked={isDispatched}
+				aria-label="Toggle dispatched status"
+			>
+				<span
+					class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {isDispatched
+						? 'translate-x-5'
+						: 'translate-x-0'}"
+				></span>
+			</button>
+		</div>
+
+		<!-- Team Members -->
+		<div>
+			<p class="mb-1.5 text-sm font-medium text-theme">Team Members</p>
+			<div
+				class="space-y-2 rounded-lg border border-theme bg-theme-card p-3 {!isDispatched
+					? 'opacity-50'
+					: ''}"
+			>
+				{#if !isDispatched}
+					<p class="text-sm text-theme-muted italic">Enable "Dispatched" to assign team members</p>
+				{:else if nonAdminTeamMembers.length > 0}
+					{#each nonAdminTeamMembers as member (member.id)}
+						<label class="flex cursor-pointer items-center gap-3 rounded-lg interactive p-2">
+							<input
+								type="checkbox"
+								checked={selectedTeamMemberIds.includes(member.id)}
+								onchange={() => toggleTeamMember(member.id)}
+								disabled={submitting}
+								class="h-4 w-4 rounded border-input text-primary-500 focus:ring-primary-500"
+							/>
+							<span class="text-sm text-theme">{member.fullName}</span>
+							{#if member.role === 'TEAM_LEADER'}
+								<span
+									class="rounded bg-primary-100 px-1.5 py-0.5 text-xs text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+								>
+									TL
+								</span>
+							{/if}
+						</label>
+					{/each}
+				{:else}
+					<p class="text-sm text-theme-muted">No team members available</p>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Notes -->
+		<div>
+			<label for="notes" class="mb-1.5 block text-sm font-medium text-theme"> Notes </label>
+			<textarea
+				id="notes"
+				bind:value={notes}
+				disabled={submitting}
+				rows="3"
+				placeholder="Optional notes about the project"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<!-- Wave Product -->
+		{#if waveProducts.length > 0}
+			<div class="border-t border-theme pt-4">
+				<label for="waveProduct" class="mb-1.5 block text-sm font-medium text-theme">
+					Wave Product
+				</label>
+				<select
+					id="waveProduct"
+					bind:value={waveServiceId}
+					disabled={submitting}
+					class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<option value="">No linked product</option>
+					{#each waveProducts as product (product.id)}
+						{@const decodedId = fromGlobalId(product.id)}
+						<option value={decodedId}>
+							{product.name} (${Number(product.unitPrice).toFixed(2)})
+						</option>
+					{/each}
+				</select>
+				{#if linkedProduct}
+					<p class="mt-1 text-xs text-theme-muted">
+						Currently linked to: {linkedProduct.name}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Submit Buttons -->
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Project'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/projects/ProjectScopeForm.svelte b/src/lib/components/admin/projects/ProjectScopeForm.svelte
new file mode 100644
index 0000000..22b1970
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectScopeForm.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { createProjectScope, updateProjectScope } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { ProjectScope$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Scope = NonNullable<ProjectScope$result['projectScope']>;
+
+	interface Props {
+		projectId: string;
+		scope?: Scope;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { projectId, scope, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!scope);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let name = $state(scope?.name ?? 'Project Scope');
+	let description = $state(scope?.description ?? '');
+	let isActive = $state(scope?.isActive ?? true);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!name.trim()) {
+				error = 'Please provide a scope name';
+				return;
+			}
+
+			if (isEdit && scope) {
+				await updateProjectScope({
+					id: scope.id,
+					name: name.trim(),
+					description: description.trim() || null,
+					isActive
+				});
+			} else {
+				await createProjectScope({
+					projectId,
+					name: name.trim(),
+					description: description.trim() || null,
+					isActive
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save scope';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+				Scope Name <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="name"
+				type="text"
+				bind:value={name}
+				disabled={submitting}
+				placeholder="e.g., Project Scope"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+				Description
+			</label>
+			<textarea
+				id="description"
+				bind:value={description}
+				disabled={submitting}
+				rows="3"
+				placeholder="Optional description of this project scope"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div>
+			<div class="flex items-center gap-2">
+				<input
+					id="isActive"
+					type="checkbox"
+					bind:checked={isActive}
+					disabled={submitting}
+					class="h-4 w-4 rounded border-input text-primary-500 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				/>
+				<label for="isActive" class="text-sm text-theme">Active scope</label>
+			</div>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Scope'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/projects/ProjectScopeSection.svelte b/src/lib/components/admin/projects/ProjectScopeSection.svelte
new file mode 100644
index 0000000..88612af
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectScopeSection.svelte
@@ -0,0 +1,365 @@
+<script lang="ts">
+	import type { ProjectScope$result } from '$houdini';
+
+	// Types derived from the ProjectScope query
+	export type ProjectScopeType = NonNullable<ProjectScope$result['projectScope']>;
+	export type ProjectCategoryType = ProjectScopeType['projectAreas'][number];
+	export type ProjectTaskType = ProjectCategoryType['projectTasks'][number];
+
+	interface Props {
+		scope: ProjectScopeType;
+		expandedCategories: Set<string>;
+		editable?: boolean;
+		onToggleCategory: (categoryId: string) => void;
+		onEditScope?: (scope: ProjectScopeType) => void;
+		onDeleteScope?: (scopeId: string) => void;
+		onAddCategory?: (scopeId: string, nextOrder: number) => void;
+		onEditCategory?: (scopeId: string, category: ProjectCategoryType) => void;
+		onDeleteCategory?: (categoryId: string) => void;
+		onAddTask?: (categoryId: string, nextOrder: number) => void;
+		onEditTask?: (categoryId: string, task: ProjectTaskType) => void;
+		onDeleteTask?: (taskId: string) => void;
+	}
+
+	let {
+		scope,
+		expandedCategories,
+		editable = true,
+		onToggleCategory,
+		onEditScope,
+		onDeleteScope,
+		onAddCategory,
+		onEditCategory,
+		onDeleteCategory,
+		onAddTask,
+		onEditTask,
+		onDeleteTask
+	}: Props = $props();
+
+	function getTotalTasks(): number {
+		return scope.projectAreas?.reduce((acc, cat) => acc + (cat.projectTasks?.length ?? 0), 0) ?? 0;
+	}
+
+	function sortedCategories(categories: ProjectCategoryType[]): ProjectCategoryType[] {
+		return [...categories].sort((a, b) => a.order - b.order);
+	}
+
+	function sortedTasks(tasks: ProjectTaskType[]): ProjectTaskType[] {
+		return [...tasks].sort((a, b) => a.order - b.order);
+	}
+</script>
+
+<div class="space-y-3">
+	<!-- Scope Header -->
+	<div class="flex items-start justify-between gap-2">
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-2">
+				<h3 class="font-medium text-theme">{scope.name}</h3>
+				{#if scope.isActive}
+					<span
+						class="rounded bg-accent-100 px-1.5 py-0.5 text-xs font-medium text-accent-700 dark:bg-accent-900/40 dark:text-accent-400"
+					>
+						Active
+					</span>
+				{/if}
+			</div>
+			{#if scope.description}
+				<p class="mt-1 text-sm text-theme-muted">{scope.description}</p>
+			{/if}
+			<p class="mt-1 text-xs text-theme-muted">
+				{scope.projectAreas?.length ?? 0}
+				{(scope.projectAreas?.length ?? 0) === 1 ? 'category' : 'categories'}, {getTotalTasks()}
+				{getTotalTasks() === 1 ? 'task' : 'tasks'}
+			</p>
+		</div>
+		{#if editable && onEditScope && onDeleteScope}
+			<div class="flex shrink-0 items-center gap-1">
+				<button
+					type="button"
+					onclick={() => onEditScope(scope)}
+					class="rounded p-1.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Edit scope"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+						/>
+					</svg>
+				</button>
+				<button
+					type="button"
+					onclick={() => onDeleteScope(scope.id)}
+					class="rounded p-1.5 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+					aria-label="Delete scope"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						/>
+					</svg>
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Categories -->
+	<div class="border-t border-theme pt-3">
+		<div class="mb-2 flex items-center justify-between">
+			<p class="text-xs font-medium tracking-wide text-theme-muted uppercase">Categories</p>
+			{#if editable && onAddCategory}
+				<button
+					type="button"
+					onclick={() => onAddCategory(scope.id, scope.projectAreas?.length ?? 0)}
+					class="text-xs font-medium text-accent-500 hover:text-accent-600"
+				>
+					+ Add Category
+				</button>
+			{/if}
+		</div>
+
+		{#if scope.projectAreas && scope.projectAreas.length > 0}
+			<div class="space-y-2">
+				{#each sortedCategories(scope.projectAreas) as category (category.id)}
+					{@const taskCount = category.projectTasks?.length ?? 0}
+					{@const isCategoryExpanded = expandedCategories.has(category.id)}
+					<div
+						class="rounded-lg border border-l-2 border-theme border-l-accent-400 bg-gray-50 dark:bg-gray-800/50"
+					>
+						<!-- Category Header -->
+						<div class="flex items-start justify-between gap-1 p-2">
+							<button
+								type="button"
+								onclick={() => onToggleCategory(category.id)}
+								class="min-w-0 flex-1 text-left"
+							>
+								<span class="flex items-center gap-2">
+									<svg
+										class="h-4 w-4 flex-shrink-0 text-theme-muted transition-transform {isCategoryExpanded
+											? 'rotate-90'
+											: ''}"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+									<span class="font-medium text-theme">{category.name}</span>
+								</span>
+								<span class="mt-0.5 block pl-6 text-xs text-theme-muted">
+									{taskCount}
+									{taskCount === 1 ? 'task' : 'tasks'}
+								</span>
+							</button>
+							{#if editable && onAddTask && onEditCategory && onDeleteCategory}
+								<div class="flex shrink-0 items-center gap-1">
+									<button
+										type="button"
+										onclick={() => onAddTask(category.id, taskCount)}
+										class="rounded p-1 text-accent-500 hover:bg-accent-500/10"
+										aria-label="Add task"
+										title="Add task"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 4v16m8-8H4"
+											/>
+										</svg>
+									</button>
+									<button
+										type="button"
+										onclick={() => onEditCategory(scope.id, category)}
+										class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+										aria-label="Edit category"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+											/>
+										</svg>
+									</button>
+									<button
+										type="button"
+										onclick={() => onDeleteCategory(category.id)}
+										class="rounded p-1 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+										aria-label="Delete category"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									</button>
+								</div>
+							{/if}
+						</div>
+
+						<!-- Tasks (expanded content) -->
+						{#if isCategoryExpanded}
+							<div class="border-t border-theme px-2 pb-2">
+								{#if category.projectTasks && category.projectTasks.length > 0}
+									<div class="mt-2 space-y-2">
+										{#each sortedTasks(category.projectTasks) as task (task.id)}
+											<div class="rounded bg-gray-50 p-2 text-xs dark:bg-gray-800/50">
+												<!-- Task actions -->
+												{#if editable && onEditTask && onDeleteTask}
+													<div class="mb-2 flex items-center justify-end gap-0.5">
+														<button
+															type="button"
+															onclick={() => onEditTask(category.id, task)}
+															class="rounded p-0.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+															aria-label="Edit task"
+														>
+															<svg
+																class="h-3 w-3"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+																/>
+															</svg>
+														</button>
+														<button
+															type="button"
+															onclick={() => onDeleteTask(task.id)}
+															class="rounded p-0.5 text-theme-muted hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+															aria-label="Delete task"
+														>
+															<svg
+																class="h-3 w-3"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+																/>
+															</svg>
+														</button>
+													</div>
+												{/if}
+												<!-- Task fields stacked vertically -->
+												<div class="space-y-2">
+													<div>
+														<span
+															class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+														>
+															Scope Description
+															<button
+																type="button"
+																class="group relative"
+																aria-label="What is scope description?"
+															>
+																<svg
+																	class="h-3 w-3 text-theme-muted hover:text-theme"
+																	style="fill: none"
+																	stroke="currentColor"
+																	viewBox="0 0 24 24"
+																>
+																	<path
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		stroke-width="2"
+																		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+																	/>
+																</svg>
+																<span
+																	class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
+																>
+																	The customer-facing description of the task
+																</span>
+															</button>
+														</span>
+														<p class="text-theme">{task.description}</p>
+													</div>
+													<div>
+														<span
+															class="inline-flex items-center gap-1 text-[10px] font-medium text-theme-muted uppercase"
+														>
+															Checklist Description
+															<button
+																type="button"
+																class="group relative"
+																aria-label="What is checklist description?"
+															>
+																<svg
+																	class="h-3 w-3 text-theme-muted hover:text-theme"
+																	style="fill: none"
+																	stroke="currentColor"
+																	viewBox="0 0 24 24"
+																>
+																	<path
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		stroke-width="2"
+																		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+																	/>
+																</svg>
+																<span
+																	class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden w-48 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-[10px] text-white normal-case group-hover:block dark:bg-gray-700"
+																>
+																	What team members see during a session
+																</span>
+															</button>
+														</span>
+														<p class="text-theme">{task.checklistDescription || '—'}</p>
+													</div>
+												</div>
+											</div>
+										{/each}
+									</div>
+								{:else}
+									<p class="mt-2 text-center text-xs text-theme-muted">No tasks yet</p>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<p class="text-xs text-theme-muted">No categories defined for this scope.</p>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/admin/projects/ProjectTaskForm.svelte b/src/lib/components/admin/projects/ProjectTaskForm.svelte
new file mode 100644
index 0000000..8354567
--- /dev/null
+++ b/src/lib/components/admin/projects/ProjectTaskForm.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { createProjectScopeTask, updateProjectScopeTask } from '$lib/utils/scopes';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { ProjectScope$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Task = NonNullable<
+		ProjectScope$result['projectScope']
+	>['projectAreas'][number]['projectTasks'][number];
+
+	interface Props {
+		categoryId: string;
+		task?: Task;
+		nextOrder?: number;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { categoryId, task, nextOrder = 0, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!task);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let description = $state(task?.description ?? '');
+	let checklistDescription = $state(task?.checklistDescription ?? '');
+	let estimatedMinutes = $state<number | null>(task?.estimatedMinutes ?? null);
+	let order = $state(task?.order ?? nextOrder);
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!description.trim()) {
+				error = 'Please provide a task description';
+				return;
+			}
+
+			if (isEdit && task) {
+				await updateProjectScopeTask({
+					id: task.id,
+					description: description.trim(),
+					checklistDescription: checklistDescription.trim() || null,
+					estimatedMinutes: estimatedMinutes || null,
+					order
+				});
+			} else {
+				await createProjectScopeTask({
+					categoryId,
+					description: description.trim(),
+					checklistDescription: checklistDescription.trim() || '',
+					estimatedMinutes: estimatedMinutes || null,
+					order
+				});
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save task';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<div>
+			<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+				Task Description <span class="text-red-500">*</span>
+			</label>
+			<textarea
+				id="description"
+				bind:value={description}
+				disabled={submitting}
+				rows="2"
+				placeholder="e.g., Deep clean all kitchen appliances"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<div>
+			<label for="checklistDescription" class="mb-1.5 block text-sm font-medium text-theme">
+				Checklist Note
+			</label>
+			<input
+				id="checklistDescription"
+				type="text"
+				bind:value={checklistDescription}
+				disabled={submitting}
+				placeholder="Optional short note for checklist"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+			<p class="mt-1 text-xs text-theme-muted">Shortened version shown on project checklists</p>
+		</div>
+
+		<div>
+			<label for="estimatedMinutes" class="mb-1.5 block text-sm font-medium text-theme">
+				Estimated Time (minutes)
+			</label>
+			<input
+				id="estimatedMinutes"
+				type="number"
+				min="0"
+				bind:value={estimatedMinutes}
+				disabled={submitting}
+				placeholder="e.g., 30"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+			<p class="mt-1 text-xs text-theme-muted">Estimated time to complete this task</p>
+		</div>
+
+		<div>
+			<label for="order" class="mb-1.5 block text-sm font-medium text-theme"> Display Order </label>
+			<input
+				id="order"
+				type="number"
+				min="0"
+				bind:value={order}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Task'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/projects/ScopeTemplateDropdown.svelte b/src/lib/components/admin/projects/ScopeTemplateDropdown.svelte
new file mode 100644
index 0000000..d5ea822
--- /dev/null
+++ b/src/lib/components/admin/projects/ScopeTemplateDropdown.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	interface Template {
+		id: string;
+		name: string;
+	}
+
+	interface Props {
+		templates: Template[];
+		isOpen: boolean;
+		onToggle: () => void;
+		onCreateBlank: () => void;
+		onCreateFromTemplate: (templateId: string) => void;
+	}
+
+	let { templates, isOpen, onToggle, onCreateBlank, onCreateFromTemplate }: Props = $props();
+</script>
+
+<div class="relative">
+	{#if templates.length > 0}
+		<button
+			type="button"
+			onclick={onToggle}
+			class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-accent-600"
+		>
+			<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			<span>Create Scope</span>
+			<svg class="h-3 w-3" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+		{#if isOpen}
+			<!-- Backdrop to close dropdown -->
+			<button
+				type="button"
+				class="fixed inset-0 z-10"
+				onclick={onToggle}
+				aria-label="Close dropdown"
+			></button>
+			<!-- Dropdown menu -->
+			<div
+				class="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-theme bg-theme-card py-1 shadow-theme-lg"
+			>
+				<button
+					type="button"
+					onclick={() => {
+						onToggle();
+						onCreateBlank();
+					}}
+					class="block w-full interactive px-3 py-2 text-left text-sm text-theme"
+				>
+					Blank Scope
+				</button>
+				<div class="my-1 border-t border-theme"></div>
+				<p class="px-3 py-1 text-[10px] font-medium text-theme-muted uppercase">From Template</p>
+				{#each templates as template (template.id)}
+					<button
+						type="button"
+						onclick={() => {
+							onToggle();
+							onCreateFromTemplate(template.id);
+						}}
+						class="block w-full interactive px-3 py-2 text-left text-sm text-theme"
+					>
+						{template.name}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<button
+			type="button"
+			onclick={onCreateBlank}
+			class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-accent-600"
+		>
+			<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			<span>Create Scope</span>
+		</button>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/reports/AddProjectsModal.svelte b/src/lib/components/admin/reports/AddProjectsModal.svelte
new file mode 100644
index 0000000..0ea9b1c
--- /dev/null
+++ b/src/lib/components/admin/reports/AddProjectsModal.svelte
@@ -0,0 +1,297 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import { AdminProjectsStore, UpdateReportStore } from '$houdini';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { GetReport$result } from '$houdini';
+
+	type Report = NonNullable<GetReport$result['report']>;
+
+	interface AccountInfo {
+		accountName: string;
+		addressName?: string | null;
+	}
+
+	interface CustomerInfo {
+		customerName: string;
+	}
+
+	interface Props {
+		open: boolean;
+		report: Report;
+		teamMemberId: string;
+		accountLookup: Map<string, AccountInfo>;
+		customerLookup: Map<string, CustomerInfo>;
+		onSuccess: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		report,
+		teamMemberId,
+		accountLookup,
+		customerLookup,
+		onSuccess
+	}: Props = $props();
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let error = $state('');
+	let availableProjects = $state<
+		{
+			id: string;
+			name: string;
+			date: string;
+			accountAddressId: string | null;
+			customerId: string | null;
+		}[]
+	>([]);
+	let selectedProjectIds = new SvelteSet<string>();
+
+	const projectsStore = new AdminProjectsStore();
+	const updateStore = new UpdateReportStore();
+
+	// Get already included project IDs
+	let includedProjectIds = $derived(new Set(report.projects.map((p) => p.id)));
+
+	// Load available projects when modal opens
+	$effect(() => {
+		if (open) {
+			loadAvailableProjects();
+			selectedProjectIds.clear();
+		}
+	});
+
+	async function loadAvailableProjects() {
+		loading = true;
+		error = '';
+
+		// Extract year-month from report date (YYYY-MM)
+		const [year, month] = report.date.split('-');
+		const startOfMonth = `${year}-${month}-01`;
+		const endOfMonth = new Date(parseInt(year), parseInt(month), 0).toISOString().split('T')[0];
+
+		try {
+			const result = await projectsStore.fetch({
+				variables: {
+					filters: {
+						status: { exact: 'COMPLETED' },
+						date: { gte: startOfMonth, lte: endOfMonth }
+					}
+				}
+			});
+
+			// Filter to only projects assigned to this team member and not already included
+			availableProjects = (result.data?.projects ?? []).filter((project) => {
+				const isAssigned = project.teamMembers?.some((m) => m.pk === teamMemberId);
+				const notIncluded = !includedProjectIds.has(project.id);
+				return isAssigned && notIncluded;
+			});
+		} catch (err) {
+			console.error('Failed to load projects:', err);
+			error = 'Failed to load projects';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function formatItemDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	function getProjectDisplayName(project: {
+		date: string;
+		name: string;
+		accountAddressId: string | null;
+		customerId: string | null;
+	}): string {
+		const dateStr = formatItemDate(project.date);
+
+		let entityName = 'Unknown';
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			if (accountInfo) {
+				entityName = accountInfo.accountName;
+			}
+		} else if (project.customerId) {
+			const customerInfo = customerLookup.get(project.customerId);
+			if (customerInfo) {
+				entityName = customerInfo.customerName;
+			}
+		}
+
+		return `${dateStr}, ${entityName} - ${project.name}`;
+	}
+
+	function toggleProject(projectId: string) {
+		if (selectedProjectIds.has(projectId)) {
+			selectedProjectIds.delete(projectId);
+		} else {
+			selectedProjectIds.add(projectId);
+		}
+	}
+
+	function selectAll() {
+		for (const project of availableProjects) {
+			selectedProjectIds.add(project.id);
+		}
+	}
+
+	function selectNone() {
+		selectedProjectIds.clear();
+	}
+
+	async function handleSave() {
+		if (selectedProjectIds.size === 0) return;
+
+		saving = true;
+		error = '';
+
+		try {
+			// Combine existing project IDs with newly selected ones
+			const existingIds = report.projects.map((p) => p.id);
+			const newIds = [...selectedProjectIds];
+			const allIds = [...existingIds, ...newIds];
+
+			await updateStore.mutate({
+				input: {
+					id: report.id,
+					projectIds: allIds
+				}
+			});
+
+			open = false;
+			onSuccess();
+		} catch (err) {
+			console.error('Failed to add projects:', err);
+			error = 'Failed to add projects';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleClose() {
+		open = false;
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			handleClose();
+		}
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		transition:fade={{ duration: 150 }}
+		onmousedown={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && handleClose()}
+	>
+		<div
+			class="max-h-[90vh] w-full max-w-lg overflow-hidden rounded-xl bg-theme-card shadow-xl"
+			transition:scale={{ duration: 150, start: 0.95 }}
+		>
+			<!-- Header -->
+			<div class="border-b border-theme px-6 py-4">
+				<h2 class="text-lg font-semibold text-theme">Add Projects</h2>
+				<p class="mt-1 text-sm text-theme-muted">
+					Select completed projects to add to this report.
+				</p>
+			</div>
+
+			<!-- Content -->
+			<div class="max-h-[60vh] overflow-y-auto p-6">
+				{#if loading}
+					<div class="flex items-center justify-center py-8">
+						<svg
+							class="h-8 w-8 animate-spin text-accent-500"
+							style="fill: none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				{:else if availableProjects.length === 0}
+					<p class="py-8 text-center text-sm text-theme-muted italic">
+						No additional projects available for this team member in this month.
+					</p>
+				{:else}
+					<!-- Select All / None -->
+					<div class="mb-4 flex items-center gap-4">
+						<button
+							onclick={selectAll}
+							class="text-sm font-medium text-accent-600 hover:underline dark:text-accent-400"
+						>
+							Select All
+						</button>
+						<button
+							onclick={selectNone}
+							class="text-sm font-medium text-theme-muted hover:underline"
+						>
+							Select None
+						</button>
+						<span class="ml-auto text-sm text-theme-muted">
+							{selectedProjectIds.size} selected
+						</span>
+					</div>
+
+					<div class="space-y-2">
+						{#each availableProjects as project (project.id)}
+							<label
+								class="flex cursor-pointer items-center gap-3 rounded-lg border border-theme interactive p-3"
+							>
+								<input
+									type="checkbox"
+									checked={selectedProjectIds.has(project.id)}
+									onchange={() => toggleProject(project.id)}
+									class="border-theme-muted h-4 w-4 rounded text-primary-500 focus:ring-primary-500"
+								/>
+								<span class="flex-1 text-sm text-theme">
+									{getProjectDisplayName(project)}
+								</span>
+							</label>
+						{/each}
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="mt-4 rounded-lg bg-error-500/10 p-3">
+						<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="flex items-center justify-end gap-3 border-t border-theme px-6 py-4">
+				<button onclick={handleClose} class="btn-ghost" disabled={saving}> Cancel </button>
+				<button
+					onclick={handleSave}
+					class="btn-primary"
+					disabled={saving || selectedProjectIds.size === 0}
+				>
+					{#if saving}
+						Adding...
+					{:else}
+						Add {selectedProjectIds.size} Project{selectedProjectIds.size !== 1 ? 's' : ''}
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/admin/reports/AddServicesModal.svelte b/src/lib/components/admin/reports/AddServicesModal.svelte
new file mode 100644
index 0000000..2888b11
--- /dev/null
+++ b/src/lib/components/admin/reports/AddServicesModal.svelte
@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import { AdminServicesStore, UpdateReportStore } from '$houdini';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { GetReport$result } from '$houdini';
+
+	type Report = NonNullable<GetReport$result['report']>;
+
+	interface AccountInfo {
+		accountName: string;
+		addressName?: string | null;
+	}
+
+	interface Props {
+		open: boolean;
+		report: Report;
+		teamMemberId: string;
+		accountLookup: Map<string, AccountInfo>;
+		onSuccess: () => void;
+	}
+
+	let { open = $bindable(false), report, teamMemberId, accountLookup, onSuccess }: Props = $props();
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let error = $state('');
+	let availableServices = $state<{ id: string; date: string; accountAddressId: string | null }[]>(
+		[]
+	);
+	let selectedServiceIds = new SvelteSet<string>();
+
+	const servicesStore = new AdminServicesStore();
+	const updateStore = new UpdateReportStore();
+
+	// Get already included service IDs
+	let includedServiceIds = $derived(new Set(report.services.map((s) => s.id)));
+
+	// Load available services when modal opens
+	$effect(() => {
+		if (open) {
+			loadAvailableServices();
+			selectedServiceIds.clear();
+		}
+	});
+
+	async function loadAvailableServices() {
+		loading = true;
+		error = '';
+
+		// Extract year-month from report date (YYYY-MM)
+		const [year, month] = report.date.split('-');
+		const startOfMonth = `${year}-${month}-01`;
+		const endOfMonth = new Date(parseInt(year), parseInt(month), 0).toISOString().split('T')[0];
+
+		try {
+			const result = await servicesStore.fetch({
+				variables: {
+					filters: {
+						status: { exact: 'COMPLETED' },
+						date: { gte: startOfMonth, lte: endOfMonth }
+					}
+				}
+			});
+
+			// Filter to only services assigned to this team member and not already included
+			availableServices = (result.data?.services ?? []).filter((service) => {
+				const isAssigned = service.teamMembers?.some((m) => m.pk === teamMemberId);
+				const notIncluded = !includedServiceIds.has(service.id);
+				return isAssigned && notIncluded;
+			});
+		} catch (err) {
+			console.error('Failed to load services:', err);
+			error = 'Failed to load services';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function formatItemDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	function getServiceDisplayName(service: {
+		date: string;
+		accountAddressId: string | null;
+	}): string {
+		const dateStr = formatItemDate(service.date);
+		const accountInfo = service.accountAddressId
+			? accountLookup.get(service.accountAddressId)
+			: null;
+		const accountName = accountInfo?.accountName ?? 'Unknown Account';
+		return `${dateStr}, ${accountName}`;
+	}
+
+	function toggleService(serviceId: string) {
+		if (selectedServiceIds.has(serviceId)) {
+			selectedServiceIds.delete(serviceId);
+		} else {
+			selectedServiceIds.add(serviceId);
+		}
+	}
+
+	function selectAll() {
+		for (const service of availableServices) {
+			selectedServiceIds.add(service.id);
+		}
+	}
+
+	function selectNone() {
+		selectedServiceIds.clear();
+	}
+
+	async function handleSave() {
+		if (selectedServiceIds.size === 0) return;
+
+		saving = true;
+		error = '';
+
+		try {
+			// Combine existing service IDs with newly selected ones
+			const existingIds = report.services.map((s) => s.id);
+			const newIds = [...selectedServiceIds];
+			const allIds = [...existingIds, ...newIds];
+
+			await updateStore.mutate({
+				input: {
+					id: report.id,
+					serviceIds: allIds
+				}
+			});
+
+			open = false;
+			onSuccess();
+		} catch (err) {
+			console.error('Failed to add services:', err);
+			error = 'Failed to add services';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleClose() {
+		open = false;
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			handleClose();
+		}
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		transition:fade={{ duration: 150 }}
+		onmousedown={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && handleClose()}
+	>
+		<div
+			class="max-h-[90vh] w-full max-w-lg overflow-hidden rounded-xl bg-theme-card shadow-xl"
+			transition:scale={{ duration: 150, start: 0.95 }}
+		>
+			<!-- Header -->
+			<div class="border-b border-theme px-6 py-4">
+				<h2 class="text-lg font-semibold text-theme">Add Services</h2>
+				<p class="mt-1 text-sm text-theme-muted">
+					Select completed services to add to this report.
+				</p>
+			</div>
+
+			<!-- Content -->
+			<div class="max-h-[60vh] overflow-y-auto p-6">
+				{#if loading}
+					<div class="flex items-center justify-center py-8">
+						<svg
+							class="h-8 w-8 animate-spin text-secondary-500"
+							style="fill: none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				{:else if availableServices.length === 0}
+					<p class="py-8 text-center text-sm text-theme-muted italic">
+						No additional services available for this team member in this month.
+					</p>
+				{:else}
+					<!-- Select All / None -->
+					<div class="mb-4 flex items-center gap-4">
+						<button
+							onclick={selectAll}
+							class="text-sm font-medium text-secondary-600 hover:underline dark:text-secondary-400"
+						>
+							Select All
+						</button>
+						<button
+							onclick={selectNone}
+							class="text-sm font-medium text-theme-muted hover:underline"
+						>
+							Select None
+						</button>
+						<span class="ml-auto text-sm text-theme-muted">
+							{selectedServiceIds.size} selected
+						</span>
+					</div>
+
+					<div class="space-y-2">
+						{#each availableServices as service (service.id)}
+							<label
+								class="flex cursor-pointer items-center gap-3 rounded-lg border border-theme interactive p-3"
+							>
+								<input
+									type="checkbox"
+									checked={selectedServiceIds.has(service.id)}
+									onchange={() => toggleService(service.id)}
+									class="border-theme-muted h-4 w-4 rounded text-primary-500 focus:ring-primary-500"
+								/>
+								<span class="flex-1 text-sm text-theme">
+									{getServiceDisplayName(service)}
+								</span>
+							</label>
+						{/each}
+					</div>
+				{/if}
+
+				{#if error}
+					<div class="mt-4 rounded-lg bg-error-500/10 p-3">
+						<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="flex items-center justify-end gap-3 border-t border-theme px-6 py-4">
+				<button onclick={handleClose} class="btn-ghost" disabled={saving}> Cancel </button>
+				<button
+					onclick={handleSave}
+					class="btn-primary"
+					disabled={saving || selectedServiceIds.size === 0}
+				>
+					{#if saving}
+						Adding...
+					{:else}
+						Add {selectedServiceIds.size} Service{selectedServiceIds.size !== 1 ? 's' : ''}
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/admin/reports/ReportForm.svelte b/src/lib/components/admin/reports/ReportForm.svelte
new file mode 100644
index 0000000..f3d82f7
--- /dev/null
+++ b/src/lib/components/admin/reports/ReportForm.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { CreateReportStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { Team$result } from '$houdini';
+
+	type TeamProfile = Team$result['teamProfiles'][number];
+
+	interface Props {
+		teamProfiles: TeamProfile[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { teamProfiles, onSuccess, onCancel }: Props = $props();
+
+	let submitting = $state(false);
+	let error = $state('');
+
+	let teamMemberId = $state('');
+	let date = $state('');
+
+	// Non-admin team members only
+	let nonAdminTeamMembers = $derived(teamProfiles.filter((p) => p.role !== 'ADMIN'));
+
+	const createStore = new CreateReportStore();
+
+	// Format date for display (Dec 15, 2024)
+	function formatDate(dateStr: string): string {
+		if (!dateStr) return '';
+		const d = new Date(dateStr + 'T00:00:00');
+		return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!teamMemberId || !date) {
+				error = 'Please select a team member and date';
+				return;
+			}
+
+			const res = await createStore.mutate({
+				input: {
+					teamMemberId,
+					date
+				}
+			});
+
+			if (res.errors?.length) {
+				error = res.errors.map((e: { message: string }) => e.message).join(', ');
+				return;
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to create report';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="flex h-full flex-col">
+	<div class="flex-1 space-y-6 overflow-y-auto p-6">
+		<!-- Team Member -->
+		<div>
+			<label for="teamMember" class="mb-1.5 block text-sm font-medium text-theme">Team Member</label
+			>
+			<select
+				id="teamMember"
+				bind:value={teamMemberId}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				required
+			>
+				<option value="">Select team member...</option>
+				{#each nonAdminTeamMembers as profile (profile.id)}
+					<option value={profile.id}>{profile.fullName}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Date -->
+		<div>
+			<label for="date" class="mb-1.5 block text-sm font-medium text-theme">Report Date</label>
+			<input
+				type="date"
+				id="date"
+				bind:value={date}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+				required
+			/>
+			{#if date}
+				<p class="mt-1 text-sm text-theme-secondary">{formatDate(date)}</p>
+			{/if}
+		</div>
+
+		<!-- Info -->
+		<div class="rounded-lg bg-accent2-500/10 p-4">
+			<p class="text-sm text-accent2-600 dark:text-accent2-400">
+				After creating the report, you can add completed services and projects from the report
+				detail page.
+			</p>
+		</div>
+
+		{#if error}
+			<div class="rounded-lg bg-error-500/10 p-4">
+				<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Footer -->
+	<div class="flex items-center justify-end gap-3 border-t border-theme bg-theme p-6">
+		<button type="button" onclick={handleCancel} class="btn-ghost" disabled={submitting}>
+			Cancel
+		</button>
+		<button type="submit" class="btn-primary" disabled={submitting || !teamMemberId || !date}>
+			{#if submitting}
+				Creating...
+			{:else}
+				Create Report
+			{/if}
+		</button>
+	</div>
+</form>
diff --git a/src/lib/components/admin/scopes/AreaSection.svelte b/src/lib/components/admin/scopes/AreaSection.svelte
new file mode 100644
index 0000000..a17b765
--- /dev/null
+++ b/src/lib/components/admin/scopes/AreaSection.svelte
@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import TaskTemplateCard from './TaskTemplateCard.svelte';
+
+	interface TaskTemplate {
+		id: string;
+		description: string;
+		checklistDescription: string | null;
+		frequency?: string | null;
+		estimatedMinutes: number | null;
+		order: number;
+	}
+
+	interface AreaOrCategory {
+		id: string;
+		name: string;
+		taskTemplates: TaskTemplate[];
+	}
+
+	interface Props {
+		area: AreaOrCategory;
+		variant: 'service' | 'project';
+		isExpanded: boolean;
+		editingAreaName: string | null;
+		editingTaskId: string | null;
+		showNewTaskInput: string | null;
+		newTaskDescription: string;
+		onToggle: () => void;
+		onUpdateName: (name: string) => void;
+		onDelete: () => void;
+		onStartEditName: () => void;
+		onCancelEditName: () => void;
+		onShowNewTask: () => void;
+		onHideNewTask: () => void;
+		onNewTaskDescriptionChange: (desc: string) => void;
+		onCreateTask: () => void;
+		onStartEditTask: (taskId: string) => void;
+		onCancelEditTask: () => void;
+		onUpdateTask: (
+			taskId: string,
+			updates: {
+				description: string;
+				checklistDescription: string;
+				frequency?: string;
+				estimatedMinutes: number | null;
+			}
+		) => void;
+		onDeleteTask: (taskId: string) => void;
+		onMoveUp?: () => void;
+		onMoveDown?: () => void;
+		onMoveTaskUp: (taskId: string) => void;
+		onMoveTaskDown: (taskId: string) => void;
+	}
+
+	let {
+		area,
+		variant,
+		isExpanded,
+		editingAreaName,
+		editingTaskId,
+		showNewTaskInput,
+		newTaskDescription,
+		onToggle,
+		onUpdateName,
+		onDelete,
+		onStartEditName,
+		onCancelEditName,
+		onShowNewTask,
+		onHideNewTask,
+		onNewTaskDescriptionChange,
+		onCreateTask,
+		onStartEditTask,
+		onCancelEditTask,
+		onUpdateTask,
+		onDeleteTask,
+		onMoveUp,
+		onMoveDown,
+		onMoveTaskUp,
+		onMoveTaskDown
+	}: Props = $props();
+
+	let isEditingName = $derived(editingAreaName === area.id);
+	let isShowingNewTask = $derived(showNewTaskInput === area.id);
+	let sortedTasks = $derived([...area.taskTemplates].sort((a, b) => a.order - b.order));
+	let areaLabel = $derived(variant === 'service' ? 'area' : 'category');
+</script>
+
+<div class="mb-4 rounded-lg border border-theme bg-theme-card">
+	<div class="flex items-center justify-between border-b border-theme px-4 py-3">
+		<button onclick={onToggle} class="flex flex-1 items-center gap-2">
+			<svg
+				class="h-4 w-4 text-theme-muted transition-transform {isExpanded ? 'rotate-90' : ''}"
+				style="fill: none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+			{#if isEditingName}
+				<input
+					type="text"
+					value={area.name}
+					class="rounded border border-theme bg-theme px-2 py-1 text-sm font-semibold text-theme focus:border-secondary-500 focus:outline-none"
+					onclick={(e) => e.stopPropagation()}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							onUpdateName(e.currentTarget.value);
+						} else if (e.key === 'Escape') {
+							onCancelEditName();
+						}
+					}}
+					onblur={(e) => onUpdateName(e.currentTarget.value)}
+				/>
+			{:else}
+				<span
+					class="font-semibold text-theme"
+					role="button"
+					tabindex="0"
+					ondblclick={(e) => {
+						e.stopPropagation();
+						onStartEditName();
+					}}
+					onkeydown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.stopPropagation();
+							onStartEditName();
+						}
+					}}
+				>
+					{area.name}
+				</span>
+			{/if}
+			<span class="text-xs text-theme-muted">
+				({area.taskTemplates.length} tasks)
+			</span>
+		</button>
+		<div class="flex items-center gap-1">
+			<button
+				onclick={onShowNewTask}
+				class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Add task"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+					/>
+				</svg>
+			</button>
+			{#if onMoveUp}
+				<button
+					onclick={onMoveUp}
+					class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Move {areaLabel} up"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 15l7-7 7 7"
+						/>
+					</svg>
+				</button>
+			{/if}
+			{#if onMoveDown}
+				<button
+					onclick={onMoveDown}
+					class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Move {areaLabel} down"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</button>
+			{/if}
+			<button
+				onclick={onDelete}
+				class="rounded p-1 text-red-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+				aria-label="Delete {areaLabel}"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	{#if isExpanded}
+		<div class="p-3" transition:slide={{ duration: 150 }}>
+			<!-- New Task Input -->
+			{#if isShowingNewTask}
+				<div
+					class="mb-3 rounded-lg border border-dashed border-theme bg-theme p-3"
+					transition:slide={{ duration: 150 }}
+				>
+					<input
+						type="text"
+						value={newTaskDescription}
+						oninput={(e) => onNewTaskDescriptionChange(e.currentTarget.value)}
+						placeholder="Task description..."
+						class="placeholder-theme-muted w-full rounded border border-theme bg-theme-card px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+						onkeydown={(e) => {
+							if (e.key === 'Enter') {
+								onCreateTask();
+							} else if (e.key === 'Escape') {
+								onHideNewTask();
+								onNewTaskDescriptionChange('');
+							}
+						}}
+					/>
+					<div class="mt-2 flex justify-end gap-2">
+						<button
+							onclick={() => {
+								onHideNewTask();
+								onNewTaskDescriptionChange('');
+							}}
+							class="rounded px-2 py-1 text-xs text-theme-muted hover:text-theme"
+						>
+							Cancel
+						</button>
+						<button
+							onclick={onCreateTask}
+							class="rounded bg-secondary-500 px-2 py-1 text-xs text-white hover:bg-secondary-600"
+						>
+							Add Task
+						</button>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Tasks -->
+			{#each sortedTasks as task, index (task.id)}
+				<TaskTemplateCard
+					{task}
+					{variant}
+					isEditing={editingTaskId === task.id}
+					onStartEdit={() => onStartEditTask(task.id)}
+					onCancelEdit={onCancelEditTask}
+					onSave={(updates) => onUpdateTask(task.id, updates)}
+					onDelete={() => onDeleteTask(task.id)}
+					onMoveUp={index === 0 ? undefined : () => onMoveTaskUp(task.id)}
+					onMoveDown={index === sortedTasks.length - 1 ? undefined : () => onMoveTaskDown(task.id)}
+				/>
+			{/each}
+
+			{#if area.taskTemplates.length === 0 && !isShowingNewTask}
+				<div class="py-4 text-center text-sm text-theme-muted">
+					No tasks yet. Click + to add one.
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/scopes/TaskTemplateCard.svelte b/src/lib/components/admin/scopes/TaskTemplateCard.svelte
new file mode 100644
index 0000000..5f7b04b
--- /dev/null
+++ b/src/lib/components/admin/scopes/TaskTemplateCard.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+	interface TaskTemplate {
+		id: string;
+		description: string;
+		checklistDescription: string | null;
+		frequency?: string | null;
+		estimatedMinutes: number | null;
+	}
+
+	interface Props {
+		task: TaskTemplate;
+		variant: 'service' | 'project';
+		isEditing: boolean;
+		onStartEdit: () => void;
+		onCancelEdit: () => void;
+		onSave: (updates: {
+			description: string;
+			checklistDescription: string;
+			frequency?: string;
+			estimatedMinutes: number | null;
+		}) => void;
+		onDelete: () => void;
+		onMoveUp?: () => void;
+		onMoveDown?: () => void;
+	}
+
+	let { task, variant, isEditing, onStartEdit, onCancelEdit, onSave, onDelete, onMoveUp, onMoveDown }: Props = $props();
+
+	function formatFrequency(frequency: string | null | undefined): string {
+		const lower = frequency?.toLowerCase();
+		switch (lower) {
+			case 'daily':
+				return 'Daily';
+			case 'weekly':
+				return 'Weekly';
+			case 'monthly':
+				return 'Monthly';
+			case 'quarterly':
+				return 'Quarterly';
+			case 'triannual':
+				return '3x/Year';
+			case 'annual':
+				return 'Annual';
+			case 'as_needed':
+				return 'As Needed';
+			default:
+				return frequency ?? 'Weekly';
+		}
+	}
+
+	function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		const form = e.currentTarget as HTMLFormElement;
+		const formData = new FormData(form);
+		const updates: Parameters<typeof onSave>[0] = {
+			description: String(formData.get('description') ?? ''),
+			checklistDescription: String(formData.get('checklistDescription') ?? ''),
+			estimatedMinutes: formData.get('estimatedMinutes')
+				? parseInt(String(formData.get('estimatedMinutes')))
+				: null
+		};
+		if (variant === 'service') {
+			updates.frequency = String(formData.get('frequency') ?? 'weekly');
+		}
+		onSave(updates);
+	}
+</script>
+
+<div class="mb-2 rounded-lg border border-theme bg-theme p-3 last:mb-0">
+	{#if isEditing}
+		<!-- Edit Mode -->
+		<form onsubmit={handleSubmit}>
+			<div class="space-y-3">
+				<div>
+					<label for="task-desc-{task.id}" class="mb-1 block text-xs font-medium text-theme-muted"
+						>Description</label
+					>
+					<input
+						id="task-desc-{task.id}"
+						type="text"
+						name="description"
+						value={task.description}
+						class="w-full rounded border border-theme bg-theme-card px-2 py-1.5 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+						required
+					/>
+				</div>
+				<div>
+					<label
+						for="task-checklist-{task.id}"
+						class="mb-1 block text-xs font-medium text-theme-muted">Checklist Description</label
+					>
+					<input
+						id="task-checklist-{task.id}"
+						type="text"
+						name="checklistDescription"
+						value={task.checklistDescription ?? ''}
+						class="w-full rounded border border-theme bg-theme-card px-2 py-1.5 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+						placeholder="Optional checklist text..."
+					/>
+				</div>
+				{#if variant === 'service'}
+					<div class="flex gap-3">
+						<div class="flex-1">
+							<label
+								for="task-freq-{task.id}"
+								class="mb-1 block text-xs font-medium text-theme-muted">Frequency</label
+							>
+							<select
+								id="task-freq-{task.id}"
+								name="frequency"
+								class="w-full rounded border border-theme bg-theme-card px-2 py-1.5 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+							>
+								<option value="daily" selected={task.frequency?.toLowerCase() === 'daily'}
+									>Daily</option
+								>
+								<option
+									value="weekly"
+									selected={(task.frequency?.toLowerCase() ?? 'weekly') === 'weekly'}>Weekly</option
+								>
+								<option value="monthly" selected={task.frequency?.toLowerCase() === 'monthly'}
+									>Monthly</option
+								>
+								<option value="quarterly" selected={task.frequency?.toLowerCase() === 'quarterly'}
+									>Quarterly</option
+								>
+								<option value="triannual" selected={task.frequency?.toLowerCase() === 'triannual'}
+									>3x/Year</option
+								>
+								<option value="annual" selected={task.frequency?.toLowerCase() === 'annual'}
+									>Annual</option
+								>
+								<option value="as_needed" selected={task.frequency?.toLowerCase() === 'as_needed'}
+									>As Needed</option
+								>
+							</select>
+						</div>
+						<div class="w-24">
+							<label
+								for="task-mins-{task.id}"
+								class="mb-1 block text-xs font-medium text-theme-muted">Est. Min</label
+							>
+							<input
+								id="task-mins-{task.id}"
+								type="number"
+								name="estimatedMinutes"
+								value={task.estimatedMinutes ?? ''}
+								min="0"
+								class="w-full rounded border border-theme bg-theme-card px-2 py-1.5 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+								placeholder="—"
+							/>
+						</div>
+					</div>
+				{:else}
+					<div>
+						<label for="task-mins-{task.id}" class="mb-1 block text-xs font-medium text-theme-muted"
+							>Est. Minutes</label
+						>
+						<input
+							id="task-mins-{task.id}"
+							type="number"
+							name="estimatedMinutes"
+							value={task.estimatedMinutes ?? ''}
+							min="0"
+							class="w-24 rounded border border-theme bg-theme-card px-2 py-1.5 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+							placeholder="—"
+						/>
+					</div>
+				{/if}
+				<div class="flex justify-end gap-2">
+					<button
+						type="button"
+						onclick={onCancelEdit}
+						class="rounded px-3 py-1 text-xs text-theme-muted hover:text-theme"
+					>
+						Cancel
+					</button>
+					<button
+						type="submit"
+						class="rounded bg-secondary-500 px-3 py-1 text-xs text-white hover:bg-secondary-600"
+					>
+						Save
+					</button>
+				</div>
+			</div>
+		</form>
+	{:else}
+		<!-- Display Mode -->
+		<div class="flex items-start justify-between gap-2">
+			<button
+				type="button"
+				class="flex flex-1 cursor-pointer items-start gap-2 text-left"
+				onclick={onStartEdit}
+			>
+				<svg
+					class="mt-0.5 h-4 w-4 shrink-0 text-theme-muted transition-transform"
+					style="fill: none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+				<span class="flex-1">
+					<span class="text-sm font-medium text-theme">
+						{task.description}
+					</span>
+					{#if task.checklistDescription}
+						<span class="mt-1 block text-xs text-theme-muted">
+							{task.checklistDescription}
+						</span>
+					{/if}
+					<span class="mt-2 flex flex-wrap gap-2">
+						{#if variant === 'service' && task.frequency}
+							<span
+								class="rounded-full bg-primary-500/20 px-2 py-0.5 text-xs text-primary-600 dark:text-primary-400"
+							>
+								{formatFrequency(task.frequency)}
+							</span>
+						{/if}
+						{#if task.estimatedMinutes}
+							<span
+								class="rounded-full bg-surface-100 px-2 py-0.5 text-xs text-surface-600 dark:bg-surface-700 dark:text-surface-300"
+							>
+								{task.estimatedMinutes} min
+							</span>
+						{/if}
+					</span>
+				</span>
+			</button>
+			<div class="flex items-center gap-1">
+				{#if onMoveUp}
+					<button
+						type="button"
+						onclick={(e) => {
+							e.stopPropagation();
+							onMoveUp?.();
+						}}
+						class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Move task up"
+					>
+						<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 15l7-7 7 7"
+							/>
+						</svg>
+					</button>
+				{/if}
+				{#if onMoveDown}
+					<button
+						type="button"
+						onclick={(e) => {
+							e.stopPropagation();
+							onMoveDown?.();
+						}}
+						class="rounded p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Move task down"
+					>
+						<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 9l-7 7-7-7"
+							/>
+						</svg>
+					</button>
+				{/if}
+				<button
+					onclick={onDelete}
+					class="rounded p-1 text-red-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+					aria-label="Delete task"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/scopes/TemplateEditor.svelte b/src/lib/components/admin/scopes/TemplateEditor.svelte
new file mode 100644
index 0000000..91fb0e9
--- /dev/null
+++ b/src/lib/components/admin/scopes/TemplateEditor.svelte
@@ -0,0 +1,278 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import AreaSection from './AreaSection.svelte';
+	import type { SvelteSet } from 'svelte/reactivity';
+
+	interface TaskTemplate {
+		id: string;
+		description: string;
+		checklistDescription: string | null;
+		frequency?: string | null;
+		estimatedMinutes: number | null;
+		order: number;
+	}
+
+	interface AreaOrCategory {
+		id: string;
+		name: string;
+		order: number;
+		taskTemplates: TaskTemplate[];
+	}
+
+	interface Template {
+		id: string;
+		name: string;
+		description: string | null;
+		isActive: boolean;
+		areaTemplates?: AreaOrCategory[];
+		categoryTemplates?: AreaOrCategory[];
+	}
+
+	interface Props {
+		template: Template;
+		variant: 'service' | 'project';
+		expandedAreas: SvelteSet<string>;
+		editingTemplateName: string | null;
+		editingAreaName: string | null;
+		editingTaskId: string | null;
+		showNewAreaInput: string | null;
+		showNewTaskInput: string | null;
+		newAreaName: string;
+		newTaskDescription: string;
+		onToggleArea: (areaId: string) => void;
+		onStartEditTemplateName: () => void;
+		onCancelEditTemplateName: () => void;
+		onUpdateTemplateName: (name: string) => void;
+		onUpdateTemplateDescription: (description: string) => void;
+		onDeleteTemplate: () => void;
+		onStartEditAreaName: (areaId: string) => void;
+		onCancelEditAreaName: () => void;
+		onUpdateAreaName: (areaId: string, name: string) => void;
+		onDeleteArea: (areaId: string) => void;
+		onShowNewArea: () => void;
+		onHideNewArea: () => void;
+		onNewAreaNameChange: (name: string) => void;
+		onCreateArea: () => void;
+		onShowNewTask: (areaId: string) => void;
+		onHideNewTask: () => void;
+		onNewTaskDescriptionChange: (desc: string) => void;
+		onCreateTask: (areaId: string) => void;
+		onStartEditTask: (taskId: string) => void;
+		onCancelEditTask: () => void;
+		onUpdateTask: (
+			taskId: string,
+			updates: {
+				description: string;
+				checklistDescription: string;
+				frequency?: string;
+				estimatedMinutes: number | null;
+			}
+		) => void;
+		onDeleteTask: (taskId: string) => void;
+		onMoveAreaUp: (areaId: string) => void;
+		onMoveAreaDown: (areaId: string) => void;
+		onMoveTaskUp: (taskId: string, areaId: string) => void;
+		onMoveTaskDown: (taskId: string, areaId: string) => void;
+	}
+
+	let {
+		template,
+		variant,
+		expandedAreas,
+		editingTemplateName,
+		editingAreaName,
+		editingTaskId,
+		showNewAreaInput,
+		showNewTaskInput,
+		newAreaName,
+		newTaskDescription,
+		onToggleArea,
+		onStartEditTemplateName,
+		onCancelEditTemplateName,
+		onUpdateTemplateName,
+		onUpdateTemplateDescription,
+		onDeleteTemplate,
+		onStartEditAreaName,
+		onCancelEditAreaName,
+		onUpdateAreaName,
+		onDeleteArea,
+		onShowNewArea,
+		onHideNewArea,
+		onNewAreaNameChange,
+		onCreateArea,
+		onShowNewTask,
+		onHideNewTask,
+		onNewTaskDescriptionChange,
+		onCreateTask,
+		onStartEditTask,
+		onCancelEditTask,
+		onUpdateTask,
+		onDeleteTask,
+		onMoveAreaUp,
+		onMoveAreaDown,
+		onMoveTaskUp,
+		onMoveTaskDown
+	}: Props = $props();
+
+	let areas = $derived(
+		(template.areaTemplates ?? template.categoryTemplates ?? [])
+			.slice()
+			.sort((a, b) => a.order - b.order)
+	);
+	let isEditingName = $derived(editingTemplateName === template.id);
+	let isShowingNewArea = $derived(showNewAreaInput === template.id);
+	let areaLabel = $derived(variant === 'service' ? 'Area' : 'Category');
+</script>
+
+<!-- Template Header -->
+<div class="border-b border-theme bg-theme-card px-6 py-4">
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-3">
+			{#if isEditingName}
+				<input
+					type="text"
+					value={template.name}
+					class="rounded-lg border border-theme bg-theme px-3 py-1 text-lg font-bold text-theme focus:border-secondary-500 focus:outline-none"
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							onUpdateTemplateName(e.currentTarget.value);
+						} else if (e.key === 'Escape') {
+							onCancelEditTemplateName();
+						}
+					}}
+					onblur={(e) => onUpdateTemplateName(e.currentTarget.value)}
+				/>
+			{:else}
+				<h2
+					class="cursor-pointer text-xl font-bold text-theme"
+					ondblclick={onStartEditTemplateName}
+				>
+					{template.name}
+				</h2>
+			{/if}
+			<span
+				class="rounded-full px-2 py-0.5 text-xs {template.isActive
+					? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+					: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
+			>
+				{template.isActive ? 'Active' : 'Inactive'}
+			</span>
+		</div>
+		<button
+			onclick={onDeleteTemplate}
+			class="rounded-lg p-2 text-red-500 transition-colors hover:bg-red-50 dark:hover:bg-red-900/20"
+			aria-label="Delete template"
+		>
+			<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</button>
+	</div>
+	<!-- Description -->
+	<div class="mt-3">
+		<textarea
+			placeholder="Add a description..."
+			rows="2"
+			class="placeholder-theme-muted w-full resize-none rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme-secondary focus:border-secondary-500 focus:text-theme focus:outline-none"
+			onblur={(e) => {
+				const newDesc = e.currentTarget.value;
+				if (newDesc !== (template.description ?? '')) {
+					onUpdateTemplateDescription(newDesc);
+				}
+			}}>{template.description ?? ''}</textarea
+		>
+	</div>
+</div>
+
+<div class="flex-1 overflow-y-auto p-6">
+	<!-- Areas/Categories -->
+	{#each areas as area, index (area.id)}
+		<AreaSection
+			{area}
+			{variant}
+			isExpanded={expandedAreas.has(area.id)}
+			{editingAreaName}
+			{editingTaskId}
+			{showNewTaskInput}
+			{newTaskDescription}
+			onToggle={() => onToggleArea(area.id)}
+			onUpdateName={(name) => onUpdateAreaName(area.id, name)}
+			onDelete={() => onDeleteArea(area.id)}
+			onStartEditName={() => onStartEditAreaName(area.id)}
+			onCancelEditName={onCancelEditAreaName}
+			onShowNewTask={() => onShowNewTask(area.id)}
+			{onHideNewTask}
+			{onNewTaskDescriptionChange}
+			onCreateTask={() => onCreateTask(area.id)}
+			{onStartEditTask}
+			{onCancelEditTask}
+			{onUpdateTask}
+			{onDeleteTask}
+			onMoveUp={index === 0 ? undefined : () => onMoveAreaUp(area.id)}
+			onMoveDown={index === areas.length - 1 ? undefined : () => onMoveAreaDown(area.id)}
+			onMoveTaskUp={(taskId) => onMoveTaskUp(taskId, area.id)}
+			onMoveTaskDown={(taskId) => onMoveTaskDown(taskId, area.id)}
+		/>
+	{/each}
+
+	<!-- Add Area/Category Button / Input -->
+	{#if isShowingNewArea}
+		<div
+			class="rounded-lg border border-dashed border-theme bg-theme-card p-4"
+			transition:slide={{ duration: 150 }}
+		>
+			<input
+				type="text"
+				value={newAreaName}
+				oninput={(e) => onNewAreaNameChange(e.currentTarget.value)}
+				placeholder="{areaLabel} name..."
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						onCreateArea();
+					} else if (e.key === 'Escape') {
+						onHideNewArea();
+						onNewAreaNameChange('');
+					}
+				}}
+			/>
+			<div class="mt-2 flex justify-end gap-2">
+				<button
+					onclick={() => {
+						onHideNewArea();
+						onNewAreaNameChange('');
+					}}
+					class="rounded px-3 py-1 text-sm text-theme-muted hover:text-theme"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={onCreateArea}
+					class="rounded bg-secondary-500 px-3 py-1 text-sm text-white hover:bg-secondary-600"
+				>
+					Add {areaLabel}
+				</button>
+			</div>
+		</div>
+	{:else}
+		<button
+			onclick={onShowNewArea}
+			class="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-theme p-4 text-sm text-theme-muted transition-colors hover:border-secondary-500 hover:bg-theme-card hover:text-secondary-500"
+		>
+			<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+				/>
+			</svg>
+			Add {areaLabel}
+		</button>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/scopes/TemplateList.svelte b/src/lib/components/admin/scopes/TemplateList.svelte
new file mode 100644
index 0000000..f340bf6
--- /dev/null
+++ b/src/lib/components/admin/scopes/TemplateList.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+
+	interface AreaOrCategory {
+		id: string;
+		name: string;
+		order: number;
+		taskTemplates: { id: string }[];
+	}
+
+	interface Template {
+		id: string;
+		name: string;
+		isActive: boolean;
+		areaTemplates?: AreaOrCategory[];
+		categoryTemplates?: AreaOrCategory[];
+	}
+
+	interface Props {
+		templates: Template[];
+		selectedId: string | null;
+		variant: 'service' | 'project';
+		showNewInput: boolean;
+		newName: string;
+		onSelect: (id: string) => void;
+		onCreate: () => void;
+		onShowNewInput: (show: boolean) => void;
+		onNewNameChange: (name: string) => void;
+	}
+
+	let {
+		templates,
+		selectedId,
+		variant,
+		showNewInput,
+		newName,
+		onSelect,
+		onCreate,
+		onShowNewInput,
+		onNewNameChange
+	}: Props = $props();
+
+	let borderColorClass = $derived(
+		variant === 'service' ? 'border-l-secondary-500' : 'border-l-accent-500'
+	);
+	let bgColorClass = $derived(variant === 'service' ? 'bg-secondary-500/10' : 'bg-accent-500/10');
+	let areaLabel = $derived(variant === 'service' ? 'areas' : 'categories');
+
+	function getAreas(template: Template): AreaOrCategory[] {
+		return template.areaTemplates ?? template.categoryTemplates ?? [];
+	}
+
+	function getTaskCount(template: Template): number {
+		return getAreas(template).reduce((sum, a) => sum + a.taskTemplates.length, 0);
+	}
+</script>
+
+<!-- New Template Input -->
+{#if showNewInput}
+	<div class="border-b border-theme p-3" transition:slide={{ duration: 150 }}>
+		<input
+			type="text"
+			value={newName}
+			oninput={(e) => onNewNameChange(e.currentTarget.value)}
+			placeholder="Template name..."
+			class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:ring-1 focus:ring-secondary-500 focus:outline-none"
+			onkeydown={(e) => {
+				if (e.key === 'Enter') {
+					onCreate();
+				} else if (e.key === 'Escape') {
+					onShowNewInput(false);
+					onNewNameChange('');
+				}
+			}}
+		/>
+		<div class="mt-2 flex justify-end gap-2">
+			<button
+				onclick={() => {
+					onShowNewInput(false);
+					onNewNameChange('');
+				}}
+				class="rounded px-3 py-1 text-sm text-theme-muted hover:text-theme"
+			>
+				Cancel
+			</button>
+			<button
+				onclick={onCreate}
+				class="rounded bg-secondary-500 px-3 py-1 text-sm text-white hover:bg-secondary-600"
+			>
+				Create
+			</button>
+		</div>
+	</div>
+{/if}
+
+<!-- Template List -->
+<div class="flex-1 overflow-y-auto p-2">
+	{#each templates as template (template.id)}
+		<button
+			onclick={() => onSelect(template.id)}
+			class="mb-1 w-full rounded-lg border-l-4 p-3 text-left transition-colors {selectedId ===
+			template.id
+				? `${borderColorClass} ${bgColorClass}`
+				: 'border-l-transparent hover:bg-black/5 dark:hover:bg-white/10'}"
+		>
+			<span class="flex items-center justify-between">
+				<span class="font-medium text-theme">{template.name}</span>
+				<span
+					class="rounded-full px-2 py-0.5 text-xs {template.isActive
+						? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+						: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
+				>
+					{template.isActive ? 'Active' : 'Inactive'}
+				</span>
+			</span>
+			<span class="mt-1 block text-xs text-theme-muted">
+				{getAreas(template).length}
+				{areaLabel},
+				{getTaskCount(template)} tasks
+			</span>
+		</button>
+	{/each}
+	{#if templates.length === 0}
+		<div class="py-8 text-center text-theme-muted">
+			<p>No {variant} templates yet</p>
+			<p class="text-sm">Click + to create one</p>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/services/GenerateServicesModal.svelte b/src/lib/components/admin/services/GenerateServicesModal.svelte
new file mode 100644
index 0000000..df9979c
--- /dev/null
+++ b/src/lib/components/admin/services/GenerateServicesModal.svelte
@@ -0,0 +1,523 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import { GenerateServicesByMonthStore } from '$houdini';
+	import { SvelteDate, SvelteSet } from 'svelte/reactivity';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Schedule {
+		id: string;
+		name: string | null;
+		startDate: string;
+		endDate: string | null;
+		mondayService: boolean;
+		tuesdayService: boolean;
+		wednesdayService: boolean;
+		thursdayService: boolean;
+		fridayService: boolean;
+		saturdayService: boolean;
+		sundayService: boolean;
+		weekendService: boolean;
+	}
+
+	interface Address {
+		id: string;
+		name: string | null;
+		streetAddress: string;
+		city: string;
+		state: string;
+		zipCode: string;
+		isActive: boolean;
+		schedules: Schedule[];
+	}
+
+	interface Account {
+		id: string;
+		name: string;
+		addresses: Address[];
+	}
+
+	interface Props {
+		open: boolean;
+		accounts: Account[];
+		preselectedAddressId?: string;
+		preselectedScheduleId?: string;
+		initialMonth?: number;
+		initialYear?: number;
+		onClose: () => void;
+		onSuccess: (totalCount: number) => void;
+	}
+
+	let {
+		open = $bindable(false),
+		accounts,
+		preselectedAddressId,
+		preselectedScheduleId,
+		initialMonth,
+		initialYear,
+		onClose,
+		onSuccess
+	}: Props = $props();
+
+	// State
+	let now = new Date();
+	// Default to next month if no initial values provided
+	let defaultMonth = now.getMonth() + 2 > 12 ? 1 : now.getMonth() + 2;
+	let defaultYear = now.getMonth() + 2 > 12 ? now.getFullYear() + 1 : now.getFullYear();
+	let selectedMonth = $state(initialMonth ?? defaultMonth);
+	let selectedYear = $state(initialYear ?? defaultYear);
+
+	// Update selected month/year when initial values change
+	$effect(() => {
+		if (initialMonth !== undefined) {
+			selectedMonth = initialMonth;
+		}
+		if (initialYear !== undefined) {
+			selectedYear = initialYear;
+		}
+	});
+	let selectedItems = new SvelteSet<string>(); // "addressId:scheduleId"
+	let generating = $state(false);
+	let results = $state<
+		{ key: string; accountName: string; success: boolean; count?: number; error?: string }[]
+	>([]);
+	let showResults = $state(false);
+
+	const generateStore = new GenerateServicesByMonthStore();
+
+	// Filter accounts to only show those with active schedules
+	// A schedule is active if it has no endDate OR if the endDate is in the future
+	let accountsWithActiveSchedules = $derived(
+		accounts
+			.map((account) => ({
+				...account,
+				addresses: account.addresses
+					.filter((addr) => addr.isActive)
+					.map((addr) => ({
+						...addr,
+						activeSchedules: addr.schedules.filter((s) => {
+							if (!s.endDate) return true;
+							// Compare endDate with today
+							const endDate = new Date(s.endDate + 'T00:00:00');
+							const today = new SvelteDate();
+							today.setHours(0, 0, 0, 0);
+							return endDate >= today;
+						})
+					}))
+					.filter((addr) => addr.activeSchedules.length > 0)
+			}))
+			.filter((account) => account.addresses.length > 0)
+	);
+
+	// Initialize preselection
+	$effect(() => {
+		if (open && preselectedAddressId && preselectedScheduleId) {
+			selectedItems.add(`${preselectedAddressId}:${preselectedScheduleId}`);
+		}
+	});
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (open) {
+			results = [];
+			showResults = false;
+			if (!preselectedAddressId) {
+				selectedItems.clear();
+			}
+		}
+	});
+
+	function toggleSelection(addressId: string, scheduleId: string) {
+		const key = `${addressId}:${scheduleId}`;
+		if (selectedItems.has(key)) {
+			selectedItems.delete(key);
+		} else {
+			selectedItems.add(key);
+		}
+	}
+
+	function selectAll() {
+		for (const account of accountsWithActiveSchedules) {
+			for (const address of account.addresses) {
+				for (const schedule of address.activeSchedules) {
+					selectedItems.add(`${address.id}:${schedule.id}`);
+				}
+			}
+		}
+	}
+
+	function selectNone() {
+		selectedItems.clear();
+	}
+
+	function getScheduleDays(schedule: Schedule): string[] {
+		const days: string[] = [];
+		if (schedule.mondayService) days.push('Mon');
+		if (schedule.tuesdayService) days.push('Tue');
+		if (schedule.wednesdayService) days.push('Wed');
+		if (schedule.thursdayService) days.push('Thu');
+		if (schedule.fridayService) days.push('Fri');
+		if (schedule.saturdayService) days.push('Sat');
+		if (schedule.sundayService) days.push('Sun');
+		if (schedule.weekendService && !days.includes('Fri')) days.push('Weekend');
+		return days;
+	}
+
+	// Calculate estimated service count for a schedule
+	// Mirrors backend logic: Mon-Thu use day flags, Fri uses weekend_service OR friday flag,
+	// Sat-Sun use day flags only if weekend_service is false
+	function estimateServiceCount(schedule: Schedule): number {
+		const year = selectedYear;
+		const month = selectedMonth;
+		const firstDay = new Date(year, month - 1, 1);
+		const lastDay = new Date(year, month, 0);
+
+		// Map JS getDay() (Sun=0..Sat=6) to day flags
+		// Index: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
+		const dayFlags = [
+			schedule.sundayService,
+			schedule.mondayService,
+			schedule.tuesdayService,
+			schedule.wednesdayService,
+			schedule.thursdayService,
+			schedule.fridayService,
+			schedule.saturdayService
+		];
+
+		let count = 0;
+		for (let d = new SvelteDate(firstDay); d <= lastDay; d.setDate(d.getDate() + 1)) {
+			const jsDay = d.getDay(); // Sun=0, Mon=1, ..., Sat=6
+
+			let scheduleToday = false;
+
+			if (jsDay >= 1 && jsDay <= 4) {
+				// Mon-Thu: use the day flag
+				scheduleToday = dayFlags[jsDay];
+			} else if (jsDay === 5) {
+				// Friday: weekend_service takes precedence, otherwise use friday flag
+				scheduleToday = schedule.weekendService || dayFlags[5];
+			} else {
+				// Sat (6) or Sun (0): only use day flag if weekend_service is OFF
+				if (!schedule.weekendService) {
+					scheduleToday = dayFlags[jsDay];
+				}
+			}
+
+			if (scheduleToday) {
+				count++;
+			}
+		}
+		return count;
+	}
+
+	async function handleGenerate() {
+		if (selectedItems.size === 0) return;
+
+		generating = true;
+		results = [];
+
+		for (const key of selectedItems) {
+			const [addressId, scheduleId] = key.split(':');
+
+			// Find account name for display
+			let accountName = 'Unknown';
+			for (const account of accounts) {
+				if (account.addresses.some((a) => a.id === addressId)) {
+					accountName = account.name;
+					break;
+				}
+			}
+
+			try {
+				const res = await generateStore.mutate({
+					input: {
+						accountAddressId: addressId,
+						scheduleId: scheduleId,
+						year: selectedYear,
+						month: selectedMonth
+					}
+				});
+
+				const count = res.data?.generateServicesByMonth?.length ?? 0;
+				results = [...results, { key, accountName, success: true, count }];
+			} catch (err) {
+				const errorMessage = err instanceof Error ? err.message : 'Failed to generate';
+				results = [...results, { key, accountName, success: false, error: errorMessage }];
+			}
+		}
+
+		generating = false;
+		showResults = true;
+
+		// Calculate total and notify
+		const totalCount = results.reduce((sum, r) => sum + (r.count ?? 0), 0);
+		if (totalCount > 0) {
+			onSuccess(totalCount);
+		}
+	}
+
+	function handleClose() {
+		if (generating) return;
+		open = false;
+		onClose();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open && !generating) {
+			handleClose();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget && !generating) {
+			handleClose();
+		}
+	}
+
+	// Month names
+	const months = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	];
+
+	// Year options (current year and next 2)
+	let yearOptions = $derived([now.getFullYear(), now.getFullYear() + 1, now.getFullYear() + 2]);
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		transition:fade={{ duration: 150 }}
+		onclick={handleBackdropClick}
+		role="presentation"
+	>
+		<div
+			class="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-xl border border-theme bg-theme shadow-theme-lg"
+			transition:scale={{ duration: 150, start: 0.95 }}
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-title"
+		>
+			<!-- Header -->
+			<div class="flex items-center justify-between border-b border-theme px-6 py-4">
+				<h2 id="modal-title" class="text-lg font-semibold text-theme">Generate Services</h2>
+				<button
+					onclick={handleClose}
+					disabled={generating}
+					class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme disabled:opacity-50 dark:hover:bg-white/10"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="flex-1 overflow-y-auto p-6">
+				{#if showResults}
+					<!-- Results View -->
+					<div class="space-y-4">
+						<h3 class="font-medium text-theme">Generation Results</h3>
+						<div class="space-y-2">
+							{#each results as result (result.key)}
+								<div class="flex items-center justify-between rounded-lg border border-theme p-3">
+									<span class="text-theme">{result.accountName}</span>
+									{#if result.success}
+										<span
+											class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400"
+										>
+											{result.count} service{result.count !== 1 ? 's' : ''} created
+										</span>
+									{:else}
+										<span
+											class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
+										>
+											{result.error}
+										</span>
+									{/if}
+								</div>
+							{/each}
+						</div>
+						{#if results.length > 0}
+							{@const successCount = results.filter((r) => r.success).length}
+							{@const totalServices = results.reduce((sum, r) => sum + (r.count ?? 0), 0)}
+							<div class="rounded-lg bg-theme-card p-4 text-center">
+								<p class="text-lg font-semibold text-theme">
+									{totalServices} service{totalServices !== 1 ? 's' : ''} generated
+								</p>
+								<p class="text-sm text-theme-muted">
+									{successCount} of {results.length} address{results.length !== 1 ? 'es' : ''} succeeded
+								</p>
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<!-- Selection View -->
+					<div class="space-y-6">
+						<!-- Month/Year Selection -->
+						<div class="flex gap-4">
+							<div class="flex-1">
+								<label for="month-select" class="mb-1 block text-sm font-medium text-theme"
+									>Month</label
+								>
+								<select
+									id="month-select"
+									bind:value={selectedMonth}
+									class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme"
+								>
+									{#each months as month, i (month)}
+										<option value={i + 1}>{month}</option>
+									{/each}
+								</select>
+							</div>
+							<div class="w-32">
+								<label for="year-select" class="mb-1 block text-sm font-medium text-theme"
+									>Year</label
+								>
+								<select
+									id="year-select"
+									bind:value={selectedYear}
+									class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme"
+								>
+									{#each yearOptions as year (year)}
+										<option value={year}>{year}</option>
+									{/each}
+								</select>
+							</div>
+						</div>
+
+						<!-- Selection Controls -->
+						<div class="flex items-center justify-between">
+							<p class="text-sm text-theme-muted">
+								{selectedItems.size} address{selectedItems.size !== 1 ? 'es' : ''} selected
+							</p>
+							<div class="flex gap-2">
+								<button
+									onclick={selectAll}
+									class="text-sm text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Select All
+								</button>
+								<span class="text-theme-muted">|</span>
+								<button
+									onclick={selectNone}
+									class="text-sm text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+								>
+									Select None
+								</button>
+							</div>
+						</div>
+
+						<!-- Address List -->
+						<div class="space-y-3">
+							{#if accountsWithActiveSchedules.length === 0}
+								<div class="rounded-lg border border-theme bg-theme-card p-8 text-center">
+									<p class="text-theme-muted">No accounts with active schedules found</p>
+								</div>
+							{:else}
+								{#each accountsWithActiveSchedules as account (account.id)}
+									<div class="rounded-lg border border-theme">
+										<div class="border-b border-theme bg-theme-card px-4 py-2">
+											<h4 class="font-medium text-theme">{account.name}</h4>
+										</div>
+										<div class="divide-theme divide-y">
+											{#each account.addresses as address (address.id)}
+												{#each address.activeSchedules as schedule (schedule.id)}
+													{@const key = `${address.id}:${schedule.id}`}
+													{@const isSelected = selectedItems.has(key)}
+													{@const days = getScheduleDays(schedule)}
+													{@const estimatedCount = estimateServiceCount(schedule)}
+													<label
+														class="flex cursor-pointer items-start gap-3 px-4 py-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+													>
+														<input
+															type="checkbox"
+															checked={isSelected}
+															onchange={() => toggleSelection(address.id, schedule.id)}
+															class="mt-1 h-4 w-4 rounded border-theme text-primary-500"
+														/>
+														<span class="min-w-0 flex-1">
+															<span class="text-sm font-medium text-theme">
+																{address.name || address.streetAddress}
+															</span>
+															<span class="text-xs text-theme-muted">
+																{address.streetAddress}, {address.city}, {address.state}
+															</span>
+															<span class="mt-1 flex flex-wrap items-center gap-1">
+																{#each days as day (day)}
+																	<span
+																		class="rounded bg-primary-100 px-1.5 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+																	>
+																		{day}
+																	</span>
+																{/each}
+																<span class="ml-2 text-xs text-theme-muted">
+																	~{estimatedCount} service{estimatedCount !== 1 ? 's' : ''}
+																</span>
+															</span>
+														</span>
+													</label>
+												{/each}
+											{/each}
+										</div>
+									</div>
+								{/each}
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="flex justify-end gap-3 border-t border-theme px-6 py-4">
+				{#if showResults}
+					<button
+						onclick={handleClose}
+						class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600"
+					>
+						Done
+					</button>
+				{:else}
+					<button
+						onclick={handleClose}
+						disabled={generating}
+						class="rounded-lg border border-theme bg-theme px-4 py-2 text-sm font-medium text-theme transition-colors hover:bg-black/5 disabled:opacity-50 dark:hover:bg-white/10"
+					>
+						Cancel
+					</button>
+					<button
+						onclick={handleGenerate}
+						disabled={generating || selectedItems.size === 0}
+						class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#if generating}
+							<span class="flex items-center gap-2">
+								<IconSpinner class="h-4 w-4" />
+								Generating...
+							</span>
+						{:else}
+							Generate Services
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/admin/services/ServiceForm.svelte b/src/lib/components/admin/services/ServiceForm.svelte
new file mode 100644
index 0000000..cdcdee1
--- /dev/null
+++ b/src/lib/components/admin/services/ServiceForm.svelte
@@ -0,0 +1,559 @@
+<script lang="ts">
+	import { CreateServiceStore, UpdateServiceStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { GetService$result, Customers$result, Accounts$result, Team$result } from '$houdini';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	type Service = NonNullable<GetService$result['service']>;
+	type Customer = Customers$result['customers'][number];
+	type Account = Accounts$result['accounts'][number];
+	type TeamProfile = Team$result['teamProfiles'][number];
+
+	interface Props {
+		service?: Service;
+		customers: Customer[];
+		accounts: Account[];
+		teamProfiles: TeamProfile[];
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let { service, customers, accounts, teamProfiles, onSuccess, onCancel }: Props = $props();
+
+	let isEdit = $derived(!!service);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Helper to find customer Relay Global ID from UUID
+	function findCustomerGlobalId(accountAddressUuid: string | null | undefined): string {
+		if (!accountAddressUuid) return '';
+		// Find account that contains this address, then get its customer
+		for (const account of accounts) {
+			const hasAddress = account.addresses?.some((a) => fromGlobalId(a.id) === accountAddressUuid);
+			if (hasAddress && account.customerId) {
+				const customer = customers.find((c) => fromGlobalId(c.id) === account.customerId);
+				return customer?.id ?? '';
+			}
+		}
+		return '';
+	}
+
+	// Helper to find address Relay Global ID from UUID
+	function findAddressGlobalId(addressUuid: string | null | undefined): string {
+		if (!addressUuid) return '';
+		for (const account of accounts) {
+			const address = account.addresses?.find((a) => fromGlobalId(a.id) === addressUuid);
+			if (address) return address.id;
+		}
+		return '';
+	}
+
+	// Helper to find account that contains an address UUID
+	function findAccountForAddressUuid(addressUuid: string | null | undefined): string {
+		if (!addressUuid) return '';
+		for (const account of accounts) {
+			const hasAddress = account.addresses?.some((a) => fromGlobalId(a.id) === addressUuid);
+			if (hasAddress) return account.id;
+		}
+		return '';
+	}
+
+	// Helper to convert team member UUIDs (pk) to Relay Global IDs
+	function findTeamMemberGlobalIds(memberPks: { pk: string }[] | null | undefined): string[] {
+		if (!memberPks) return [];
+		return memberPks
+			.map((m) => {
+				const profile = teamProfiles.find((p) => fromGlobalId(p.id) === m.pk);
+				return profile?.id;
+			})
+			.filter((id): id is string => !!id);
+	}
+
+	// Form fields
+	let customerId = $state(findCustomerGlobalId(service?.accountAddressId));
+	let selectedAccountId = $state(findAccountForAddressUuid(service?.accountAddressId));
+	let accountAddressId = $state(findAddressGlobalId(service?.accountAddressId));
+	let date = $state(service?.date ?? '');
+	let notes = $state(service?.notes ?? '');
+	let selectedTeamMemberIds = $state<string[]>(findTeamMemberGlobalIds(service?.teamMembers));
+
+	// Filter accounts for selected customer
+	let customerAccounts = $derived(() => {
+		if (!customerId) return [];
+		const customerUuid = fromGlobalId(customerId);
+		return accounts.filter((a) => a.customerId === customerUuid);
+	});
+
+	// Get addresses for selected account
+	let accountAddresses = $derived(() => {
+		if (!selectedAccountId) return [];
+		const account = customerAccounts().find((a) => a.id === selectedAccountId);
+		return account?.addresses ?? [];
+	});
+
+	// Get currently selected address details for display
+	let selectedAddressDetails = $derived(() => {
+		if (!accountAddressId) return null;
+		for (const account of customerAccounts()) {
+			const address = account.addresses?.find((a) => a.id === accountAddressId);
+			if (address) {
+				return { account, address };
+			}
+		}
+		return null;
+	});
+
+	// When customer changes, reset account and address
+	function handleCustomerChange() {
+		selectedAccountId = '';
+		accountAddressId = '';
+	}
+
+	// When account changes, auto-select if only one address, otherwise reset
+	function handleAccountChange() {
+		const addresses = accountAddresses();
+		if (addresses.length === 1) {
+			accountAddressId = addresses[0].id;
+		} else {
+			accountAddressId = '';
+		}
+	}
+
+	// Non-admin team members only (for display)
+	let nonAdminTeamMembers = $derived(teamProfiles.filter((p) => p.role !== 'ADMIN'));
+
+	// Get admin profile ID to auto-include on create
+	let adminProfileId = $derived(teamProfiles.find((p) => p.role === 'ADMIN')?.id ?? null);
+
+	// Track if service is dispatched (admin profile is in team members)
+	let isDispatched = $derived(
+		adminProfileId ? selectedTeamMemberIds.includes(adminProfileId) : false
+	);
+
+	function toggleDispatched() {
+		if (!adminProfileId) return;
+		if (isDispatched) {
+			// When un-dispatching, remove admin and clear all team members
+			selectedTeamMemberIds = [];
+		} else {
+			selectedTeamMemberIds = [...selectedTeamMemberIds, adminProfileId];
+		}
+	}
+
+	const createStore = new CreateServiceStore();
+	const updateStore = new UpdateServiceStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!date) {
+				error = 'Please provide a date';
+				return;
+			}
+
+			if (!isEdit && !accountAddressId) {
+				error = 'Please select an account and address';
+				return;
+			}
+
+			if (isEdit && service) {
+				// Update existing service - only date, notes, and team members
+				const res = await updateStore.mutate({
+					input: {
+						id: service.id,
+						date,
+						notes: notes.trim() || null,
+						teamMemberIds: selectedTeamMemberIds
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			} else {
+				// Create new service
+				// Get account ID from the selected account
+				const selectedAccount = customerAccounts().find((a) => a.id === selectedAccountId);
+
+				// Build team member IDs, always including admin profile
+				const teamMemberIds = [...selectedTeamMemberIds];
+				if (adminProfileId && !teamMemberIds.includes(adminProfileId)) {
+					teamMemberIds.push(adminProfileId);
+				}
+
+				const res = await createStore.mutate({
+					input: {
+						accountId: selectedAccount?.id ?? null,
+						accountAddressId,
+						date,
+						status: 'SCHEDULED',
+						notes: notes.trim() || null,
+						teamMemberIds: teamMemberIds.length > 0 ? teamMemberIds : null
+					}
+				});
+
+				if (res.errors?.length) {
+					error = res.errors.map((e) => e.message).join(', ');
+					return;
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save service';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+
+	function toggleTeamMember(id: string) {
+		if (selectedTeamMemberIds.includes(id)) {
+			selectedTeamMemberIds = selectedTeamMemberIds.filter((m) => m !== id);
+		} else {
+			selectedTeamMemberIds = [...selectedTeamMemberIds, id];
+		}
+	}
+</script>
+
+<div class="min-w-0 space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="space-y-4" onsubmit={handleSubmit}>
+		<!-- Customer (only for create) -->
+		{#if !isEdit}
+			<div>
+				<label for="customerId" class="mb-1.5 block text-sm font-medium text-theme">
+					Customer <span class="text-red-500">*</span>
+				</label>
+				<div class="relative w-full">
+					<select
+						id="customerId"
+						bind:value={customerId}
+						onchange={handleCustomerChange}
+						disabled={submitting}
+						class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<option value="">Select a customer</option>
+						{#each customers as customer (customer.id)}
+							<option value={customer.id}>{customer.name}</option>
+						{/each}
+					</select>
+					<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+						<svg
+							class="h-4 w-4 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 9l-7 7-7-7"
+							/>
+						</svg>
+					</div>
+				</div>
+			</div>
+
+			<!-- Account/Address Selection (only for create) -->
+			{#if customerId}
+				<div class="space-y-4 rounded-lg border border-theme bg-theme-card p-4">
+					<p class="text-sm font-medium text-theme">Service Location</p>
+
+					{#if customerAccounts().length > 0}
+						<!-- Account Selection -->
+						<div>
+							<label for="selectedAccountId" class="mb-1.5 block text-sm text-theme-secondary">
+								Account <span class="text-red-500">*</span>
+							</label>
+							<div class="relative w-full">
+								<select
+									id="selectedAccountId"
+									bind:value={selectedAccountId}
+									onchange={handleAccountChange}
+									disabled={submitting}
+									class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+								>
+									<option value="">Select an account</option>
+									{#each customerAccounts() as account (account.id)}
+										<option value={account.id}>{account.name}</option>
+									{/each}
+								</select>
+								<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+									<svg
+										class="h-4 w-4 text-theme-muted"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 9l-7 7-7-7"
+										/>
+									</svg>
+								</div>
+							</div>
+						</div>
+
+						<!-- Address Selection (shown when account is selected) -->
+						{#if selectedAccountId && accountAddresses().length > 0}
+							<div>
+								<label for="accountAddressId" class="mb-1.5 block text-sm text-theme-secondary">
+									Address <span class="text-red-500">*</span>
+								</label>
+								{#if accountAddresses().length === 1}
+									<!-- Single address - show as confirmation -->
+									{@const address = accountAddresses()[0]}
+									<div
+										class="rounded-lg border border-primary-200 bg-primary-50 p-3 dark:border-primary-800 dark:bg-primary-900/20"
+									>
+										<div class="flex items-start gap-2">
+											<svg
+												class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+												/>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+												/>
+											</svg>
+											<div class="text-sm">
+												<p class="font-medium text-theme">{address.streetAddress}</p>
+												<p class="text-theme-secondary">
+													{address.city}, {address.state}
+													{address.zipCode}
+												</p>
+											</div>
+										</div>
+									</div>
+								{:else}
+									<!-- Multiple addresses - show dropdown -->
+									<div class="relative w-full">
+										<select
+											id="accountAddressId"
+											bind:value={accountAddressId}
+											disabled={submitting}
+											class="w-full appearance-none rounded-lg border border-theme bg-theme py-2 pr-10 pl-3 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+										>
+											<option value="">Select an address</option>
+											{#each accountAddresses() as address (address.id)}
+												<option value={address.id}>
+													{address.streetAddress}, {address.city}, {address.state}
+												</option>
+											{/each}
+										</select>
+										<div
+											class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
+										>
+											<svg
+												class="h-4 w-4 text-theme-muted"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 9l-7 7-7-7"
+												/>
+											</svg>
+										</div>
+									</div>
+								{/if}
+							</div>
+
+							<!-- Show selected address confirmation (for multi-address accounts) -->
+							{#if accountAddresses().length > 1 && selectedAddressDetails()}
+								{@const details = selectedAddressDetails()}
+								<div
+									class="rounded-lg border border-primary-200 bg-primary-50 p-3 dark:border-primary-800 dark:bg-primary-900/20"
+								>
+									<div class="flex items-start gap-2">
+										<svg
+											class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+											/>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+											/>
+										</svg>
+										<div class="text-sm">
+											<p class="font-medium text-theme">{details?.address.streetAddress}</p>
+											<p class="text-theme-secondary">
+												{details?.address.city}, {details?.address.state}
+												{details?.address.zipCode}
+											</p>
+										</div>
+									</div>
+								</div>
+							{/if}
+						{:else if selectedAccountId && accountAddresses().length === 0}
+							<p class="text-sm text-warning">
+								This account has no addresses. Please select a different account or add an address
+								to this account first.
+							</p>
+						{/if}
+					{:else}
+						<p class="text-sm text-warning">
+							This customer has no accounts. Please create an account first.
+						</p>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+
+		<!-- Date -->
+		<div>
+			<label for="date" class="mb-1.5 block text-sm font-medium text-theme">
+				Date <span class="text-red-500">*</span>
+			</label>
+			<input
+				id="date"
+				type="date"
+				bind:value={date}
+				disabled={submitting}
+				class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			/>
+		</div>
+
+		<!-- Dispatched Toggle -->
+		<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-3">
+			<div>
+				<p class="text-sm font-medium text-theme">Dispatched</p>
+				<p class="text-xs text-theme-muted">Required before assigning team members</p>
+			</div>
+			<button
+				type="button"
+				onclick={toggleDispatched}
+				disabled={submitting}
+				class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {isDispatched
+					? 'bg-emerald-500'
+					: 'bg-gray-200 dark:bg-gray-700'}"
+				role="switch"
+				aria-checked={isDispatched}
+				aria-label="Toggle dispatched status"
+			>
+				<span
+					class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {isDispatched
+						? 'translate-x-5'
+						: 'translate-x-0'}"
+				></span>
+			</button>
+		</div>
+
+		<!-- Team Members -->
+		<div>
+			<p class="mb-1.5 text-sm font-medium text-theme">Team Members</p>
+			<div
+				class="space-y-2 rounded-lg border border-theme bg-theme-card p-3 {!isDispatched
+					? 'opacity-50'
+					: ''}"
+			>
+				{#if !isDispatched}
+					<p class="text-sm text-theme-muted italic">Enable "Dispatched" to assign team members</p>
+				{:else if nonAdminTeamMembers.length > 0}
+					{#each nonAdminTeamMembers as member (member.id)}
+						<label class="flex cursor-pointer items-center gap-3 rounded-lg interactive p-2">
+							<input
+								type="checkbox"
+								checked={selectedTeamMemberIds.includes(member.id)}
+								onchange={() => toggleTeamMember(member.id)}
+								disabled={submitting}
+								class="h-4 w-4 rounded border-input text-primary-500 focus:ring-primary-500"
+							/>
+							<span class="text-sm text-theme">{member.fullName}</span>
+							{#if member.role === 'TEAM_LEADER'}
+								<span
+									class="rounded bg-primary-100 px-1.5 py-0.5 text-xs text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+								>
+									TL
+								</span>
+							{/if}
+						</label>
+					{/each}
+				{:else}
+					<p class="text-sm text-theme-muted">No team members available</p>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Notes -->
+		<div>
+			<label for="notes" class="mb-1.5 block text-sm font-medium text-theme">Notes</label>
+			<textarea
+				id="notes"
+				bind:value={notes}
+				disabled={submitting}
+				rows="3"
+				placeholder="Optional notes about this service"
+				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+			></textarea>
+		</div>
+
+		<!-- Submit Buttons -->
+		<div class="flex items-center gap-3 pt-4">
+			<button
+				type="submit"
+				disabled={submitting}
+				class="flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Creating...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Create Service'}
+				{/if}
+			</button>
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={submitting}
+				class="rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+			>
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/admin/services/assign/AssignColumn.svelte b/src/lib/components/admin/services/assign/AssignColumn.svelte
new file mode 100644
index 0000000..1768466
--- /dev/null
+++ b/src/lib/components/admin/services/assign/AssignColumn.svelte
@@ -0,0 +1,328 @@
+<script lang="ts">
+	import AssignColumnHeader from './AssignColumnHeader.svelte';
+	import AssignServiceGroup from './AssignServiceGroup.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type { SvelteSet } from 'svelte/reactivity';
+
+	type EnrichedService = {
+		id: string;
+		date: string;
+		status: string;
+		notes: string | null;
+		teamMembers: { pk: string }[];
+		accountAddressId: string;
+		accountName: string;
+		addressName: string | null;
+		address: string | null;
+	};
+
+	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';
+
+	interface Props {
+		column: ColumnType;
+		services: EnrichedService[];
+		groupedServices: Map<string, EnrichedService[]>;
+		expandedGroups: SvelteSet<string>;
+		updatingServices: Set<string>;
+		openTeamMemberDropdown: string | null;
+		editingDateServiceId?: string | null;
+		// Selection props
+		selectedServices: SvelteSet<string>;
+		isBulkOperating?: boolean;
+		// For Ready to Assign bulk operations
+		nonAdminTeamMembers?: { id: string; fullName: string }[];
+		bulkSelectedTeamMember?: string | null;
+		showBulkTeamMemberDropdown?: boolean;
+		// Callbacks
+		onToggleGroup: (groupKey: string) => void;
+		getTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
+		getNonDispatchTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
+		getAvailableTeamMembers: (service: EnrichedService) => { pk: string; name: string }[];
+		getStagedTeamMemberDetails: (serviceId: string) => { pk: string; name: string }[];
+		hasStagedMembers: (serviceId: string) => boolean;
+		onAddDispatch: (service: EnrichedService) => void;
+		onRemoveDispatch: (service: EnrichedService) => void;
+		onSubmitStaged: (service: EnrichedService) => void;
+		onRemoveNonDispatch: (service: EnrichedService) => void;
+		onStageTeamMember: (serviceId: string, memberPk: string) => void;
+		onUnstageTeamMember: (serviceId: string, memberPk: string) => void;
+		onToggleDropdown: (serviceId: string | null) => void;
+		// Selection callbacks
+		onToggleSelection: (serviceId: string) => void;
+		onSelectAll: () => void;
+		onClearSelection: () => void;
+		onBulkAction: () => void;
+		// For Ready to Assign
+		onBulkTeamMemberSelect?: (memberPk: string) => void;
+		onToggleBulkTeamMemberDropdown?: () => void;
+		// Unassigned column specific
+		onUpdateDate?: (service: EnrichedService, newDate: string) => void;
+		onDeleteService?: (service: EnrichedService) => void;
+		onStartEditDate?: (serviceId: string) => void;
+		onCancelEditDate?: () => void;
+	}
+
+	let {
+		column,
+		services,
+		groupedServices,
+		expandedGroups,
+		updatingServices,
+		openTeamMemberDropdown,
+		editingDateServiceId = null,
+		selectedServices,
+		isBulkOperating = false,
+		nonAdminTeamMembers = [],
+		bulkSelectedTeamMember = null,
+		showBulkTeamMemberDropdown = false,
+		onToggleGroup,
+		getTeamMemberNames,
+		getNonDispatchTeamMemberNames,
+		getAvailableTeamMembers,
+		getStagedTeamMemberDetails,
+		hasStagedMembers,
+		onAddDispatch,
+		onRemoveDispatch,
+		onSubmitStaged,
+		onRemoveNonDispatch,
+		onStageTeamMember,
+		onUnstageTeamMember,
+		onToggleDropdown,
+		onToggleSelection,
+		onSelectAll,
+		onClearSelection,
+		onBulkAction,
+		onBulkTeamMemberSelect,
+		onToggleBulkTeamMemberDropdown,
+		onUpdateDate,
+		onDeleteService,
+		onStartEditDate,
+		onCancelEditDate
+	}: Props = $props();
+
+	let hasSelection = $derived(selectedServices.size > 0);
+	let allSelected = $derived(services.length > 0 && selectedServices.size === services.length);
+
+	function getEmptyIcon(): string {
+		switch (column) {
+			case 'unassigned':
+			case 'assigned':
+				return 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
+			case 'readyToAssign':
+				return 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z';
+		}
+	}
+
+	function getEmptyMessage(): string {
+		switch (column) {
+			case 'unassigned':
+				return 'No unassigned services';
+			case 'readyToAssign':
+				return 'No services ready to assign';
+			case 'assigned':
+				return 'No assigned services';
+		}
+	}
+
+	function getBulkActionLabel(): string {
+		switch (column) {
+			case 'unassigned':
+				return 'Add Dispatch';
+			case 'readyToAssign':
+				return 'Assign';
+			case 'assigned':
+				return 'Remove Team';
+		}
+	}
+
+	function getBulkActionDisabled(): boolean {
+		if (isBulkOperating) return true;
+		if (selectedServices.size === 0) return true;
+		return column === 'readyToAssign' && !bulkSelectedTeamMember;
+	}
+
+	function getSelectedTeamMemberName(): string {
+		if (!bulkSelectedTeamMember) return 'Select team member...';
+		const member = nonAdminTeamMembers.find((m) => {
+			// Extract pk from global id
+			const parts = atob(m.id).split(':');
+			return parts[1] === bulkSelectedTeamMember;
+		});
+		return member?.fullName ?? 'Unknown';
+	}
+</script>
+
+<div class="flex w-1/3 flex-col overflow-hidden rounded-xl bg-theme-card shadow-md">
+	<AssignColumnHeader {column} count={services.length} />
+
+	<!-- Bulk Action Bar -->
+	{#if services.length > 0}
+		<div class="border-b border-theme bg-theme-card px-3 py-2">
+			<div class="flex items-center justify-between gap-2">
+				<!-- Select All / Clear -->
+				<div class="flex items-center gap-2">
+					<button
+						onclick={() => (allSelected ? onClearSelection() : onSelectAll())}
+						class="flex items-center gap-1.5 rounded interactive px-2 py-1 text-xs font-medium {hasSelection
+							? 'text-primary-600 dark:text-primary-400'
+							: 'text-theme-muted'}"
+					>
+						<svg
+							class="h-4 w-4"
+							style="fill: none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							{#if allSelected}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							{:else if hasSelection}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							{:else}
+								<circle cx="12" cy="12" r="9" />
+							{/if}
+						</svg>
+						{#if hasSelection}
+							<span>{selectedServices.size} selected</span>
+						{:else}
+							<span>Select all</span>
+						{/if}
+					</button>
+					{#if hasSelection}
+						<button onclick={onClearSelection} class="text-xs text-theme-muted hover:text-theme">
+							Clear
+						</button>
+					{/if}
+				</div>
+
+				<!-- Bulk Action -->
+				{#if hasSelection}
+					<div class="flex items-center gap-2">
+						{#if column === 'readyToAssign'}
+							<!-- Team member dropdown for bulk assignment -->
+							<div class="relative">
+								<button
+									onclick={(e) => {
+										e.stopPropagation();
+										onToggleBulkTeamMemberDropdown?.();
+									}}
+									class="flex items-center gap-1 rounded border border-theme interactive bg-theme px-2 py-1 text-xs font-medium text-theme"
+								>
+									<span class="max-w-[100px] truncate">{getSelectedTeamMemberName()}</span>
+									<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 9l-7 7-7-7"
+										/>
+									</svg>
+								</button>
+								{#if showBulkTeamMemberDropdown}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<div
+										role="menu"
+										tabindex="-1"
+										onclick={(e) => e.stopPropagation()}
+										class="absolute top-full right-0 z-30 mt-1 max-h-48 w-48 overflow-y-auto rounded-lg border border-theme bg-theme-card py-1 shadow-lg"
+									>
+										{#each nonAdminTeamMembers as member (member.id)}
+											{@const memberPk = atob(member.id).split(':')[1]}
+											<button
+												onclick={() => onBulkTeamMemberSelect?.(memberPk)}
+												class="block w-full px-3 py-2 text-left text-sm text-theme hover:bg-black/5 dark:hover:bg-white/10 {bulkSelectedTeamMember ===
+												memberPk
+													? 'bg-primary-50 dark:bg-primary-900/20'
+													: ''}"
+											>
+												{member.fullName}
+											</button>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/if}
+						<button
+							onclick={onBulkAction}
+							disabled={getBulkActionDisabled()}
+							class="flex items-center gap-1 rounded bg-primary-600 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							{#if isBulkOperating}
+								<IconSpinner class="h-3 w-3" />
+							{:else}
+								<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							{/if}
+							{getBulkActionLabel()}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="flex-1 space-y-2 overflow-y-auto bg-theme p-4">
+		{#each [...groupedServices.entries()] as [groupKey, groupServices] (groupKey)}
+			<AssignServiceGroup
+				{groupKey}
+				services={groupServices}
+				{column}
+				isExpanded={expandedGroups.has(groupKey)}
+				{updatingServices}
+				{openTeamMemberDropdown}
+				{editingDateServiceId}
+				{selectedServices}
+				onToggle={() => onToggleGroup(groupKey)}
+				{getTeamMemberNames}
+				{getNonDispatchTeamMemberNames}
+				{getAvailableTeamMembers}
+				{getStagedTeamMemberDetails}
+				{hasStagedMembers}
+				{onAddDispatch}
+				{onRemoveDispatch}
+				{onSubmitStaged}
+				{onRemoveNonDispatch}
+				{onStageTeamMember}
+				{onUnstageTeamMember}
+				{onToggleDropdown}
+				{onToggleSelection}
+				{onUpdateDate}
+				{onDeleteService}
+				{onStartEditDate}
+				{onCancelEditDate}
+			/>
+		{/each}
+		{#if services.length === 0}
+			<div class="py-12 text-center text-theme-muted">
+				<svg
+					class="mx-auto mb-3 h-12 w-12"
+					style="fill: none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d={getEmptyIcon()}
+					/>
+				</svg>
+				{getEmptyMessage()}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/admin/services/assign/AssignColumnHeader.svelte b/src/lib/components/admin/services/assign/AssignColumnHeader.svelte
new file mode 100644
index 0000000..1707f51
--- /dev/null
+++ b/src/lib/components/admin/services/assign/AssignColumnHeader.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';
+
+	interface Props {
+		column: ColumnType;
+		count: number;
+	}
+
+	let { column, count }: Props = $props();
+
+	function getConfig() {
+		switch (column) {
+			case 'unassigned':
+				return {
+					title: 'Unassigned',
+					description: 'Click the arrow to mark as ready for assignment.',
+					bgClass: 'bg-red-50 dark:bg-red-900/20',
+					dotClass: 'bg-red-500',
+					badgeClass: 'bg-red-500'
+				};
+			case 'readyToAssign':
+				return {
+					title: 'Ready to Assign',
+					description: 'Add team members, then click the arrow to assign.',
+					bgClass: 'bg-yellow-50 dark:bg-yellow-900/20',
+					dotClass: 'bg-yellow-500',
+					badgeClass: 'bg-yellow-500'
+				};
+			case 'assigned':
+				return {
+					title: 'Assigned',
+					description: 'These services are good to go.',
+					bgClass: 'bg-green-50 dark:bg-green-900/20',
+					dotClass: 'bg-green-500',
+					badgeClass: 'bg-green-500'
+				};
+		}
+	}
+
+	let config = $derived(getConfig());
+</script>
+
+<div class="border-b border-theme {config.bgClass} px-4 py-3">
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-2">
+			<div class="h-3 w-3 rounded-full {config.dotClass}"></div>
+			<h2 class="font-semibold text-theme">{config.title}</h2>
+		</div>
+		<span class="rounded-full {config.badgeClass} px-2.5 py-0.5 text-sm font-semibold text-white">
+			{count}
+		</span>
+	</div>
+	<p class="mt-1 text-xs text-theme-muted">
+		{config.description}
+	</p>
+</div>
diff --git a/src/lib/components/admin/services/assign/AssignServiceCard.svelte b/src/lib/components/admin/services/assign/AssignServiceCard.svelte
new file mode 100644
index 0000000..410616d
--- /dev/null
+++ b/src/lib/components/admin/services/assign/AssignServiceCard.svelte
@@ -0,0 +1,380 @@
+<script lang="ts">
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface ServiceDisplay {
+		date: string;
+		accountName: string;
+		addressName: string | null;
+		address: string | null;
+	}
+
+	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';
+
+	interface Props {
+		service: ServiceDisplay;
+		column: ColumnType;
+		isUpdating: boolean;
+		// For unassigned column
+		teamMemberNames?: string[];
+		isEditingDate?: boolean;
+		// For readyToAssign column
+		availableMembers?: { pk: string; name: string }[];
+		stagedMembers?: { pk: string; name: string }[];
+		hasStaged?: boolean;
+		isDropdownOpen?: boolean;
+		// For assigned column
+		nonDispatchTeamMemberNames?: string[];
+		// Selection
+		isSelected?: boolean;
+		showCheckbox?: boolean;
+		// Callbacks
+		onAddDispatch?: () => void;
+		onRemoveDispatch?: () => void;
+		onSubmitStaged?: () => void;
+		onRemoveNonDispatch?: () => void;
+		onStageTeamMember?: (memberPk: string) => void;
+		onUnstageTeamMember?: (memberPk: string) => void;
+		onToggleDropdown?: () => void;
+		onToggleSelection?: () => void;
+		// Unassigned column specific callbacks
+		onUpdateDate?: (newDate: string) => void;
+		onDelete?: () => void;
+		onStartEditDate?: () => void;
+		onCancelEditDate?: () => void;
+	}
+
+	let {
+		service,
+		column,
+		isUpdating,
+		teamMemberNames = [],
+		isEditingDate = false,
+		availableMembers = [],
+		stagedMembers = [],
+		hasStaged = false,
+		isDropdownOpen = false,
+		nonDispatchTeamMemberNames = [],
+		isSelected = false,
+		showCheckbox = false,
+		onAddDispatch,
+		onRemoveDispatch,
+		onSubmitStaged,
+		onRemoveNonDispatch,
+		onStageTeamMember,
+		onUnstageTeamMember,
+		onToggleDropdown,
+		onToggleSelection,
+		onUpdateDate,
+		onDelete,
+		onStartEditDate,
+		onCancelEditDate
+	}: Props = $props();
+
+	// Local state for date editing - initialized fresh when editing starts
+	let editDateValue = $state('');
+
+	// Reset edit value when editing starts
+	$effect(() => {
+		if (isEditingDate) {
+			editDateValue = service.date;
+		}
+	});
+
+	function formatServiceDate(dateString: string): string {
+		const date = new Date(dateString + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	function handleDateSubmit() {
+		if (editDateValue && editDateValue !== service.date) {
+			onUpdateDate?.(editDateValue);
+		} else {
+			onCancelEditDate?.();
+		}
+	}
+
+	function handleDateKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			handleDateSubmit();
+		} else if (e.key === 'Escape') {
+			onCancelEditDate?.();
+		}
+	}
+
+	function handleCheckboxClick(e: MouseEvent) {
+		e.stopPropagation();
+		onToggleSelection?.();
+	}
+</script>
+
+<div
+	class="group relative rounded-lg border bg-theme p-3 transition-all hover:shadow-md {isSelected
+		? 'border-primary-500 ring-1 ring-primary-500'
+		: 'border-theme hover:border-theme'}"
+>
+	{#if isUpdating}
+		<div class="bg-theme/80 absolute inset-0 z-10 flex items-center justify-center rounded-lg">
+			<IconSpinner class="h-6 w-6 text-secondary-500" />
+		</div>
+	{/if}
+
+	<!-- Checkbox for bulk selection -->
+	{#if showCheckbox}
+		<button
+			onclick={handleCheckboxClick}
+			class="absolute top-2 right-2 z-10 flex h-5 w-5 items-center justify-center rounded border transition-colors {isSelected
+				? 'border-primary-500 bg-primary-500 text-white'
+				: 'border-gray-300 bg-white hover:border-primary-400 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-primary-500'}"
+			aria-label={isSelected ? 'Deselect service' : 'Select service'}
+		>
+			{#if isSelected}
+				<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="3"
+						d="M5 13l4 4L19 7"
+					/>
+				</svg>
+			{/if}
+		</button>
+	{/if}
+
+	<!-- Date display/edit for unassigned column -->
+	{#if column === 'unassigned' && isEditingDate}
+		<div class="mb-2 flex items-center gap-2">
+			<input
+				type="date"
+				bind:value={editDateValue}
+				onkeydown={handleDateKeydown}
+				class="w-full rounded border border-theme bg-theme px-2 py-1 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+			/>
+			<button
+				onclick={handleDateSubmit}
+				class="rounded bg-green-500 p-1 text-white hover:bg-green-600"
+				aria-label="Save date"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M5 13l4 4L19 7"
+					/>
+				</svg>
+			</button>
+			<button
+				onclick={() => {
+					editDateValue = service.date;
+					onCancelEditDate?.();
+				}}
+				class="rounded bg-gray-500 p-1 text-white hover:bg-gray-600"
+				aria-label="Cancel"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		</div>
+	{:else if column === 'unassigned'}
+		<button
+			onclick={onStartEditDate}
+			class="mb-1 flex items-center gap-1 text-sm font-bold text-theme hover:text-primary-600 dark:hover:text-primary-400"
+			title="Click to edit date"
+		>
+			{formatServiceDate(service.date)}
+			<svg
+				class="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"
+				style="fill: none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+				/>
+			</svg>
+		</button>
+	{:else}
+		<div class="mb-1 text-sm font-bold text-theme">{formatServiceDate(service.date)}</div>
+	{/if}
+
+	<div
+		class="mb-1 text-sm font-semibold text-secondary-600 dark:text-secondary-400 {showCheckbox
+			? 'pr-6'
+			: ''}"
+	>
+		{service.accountName}
+	</div>
+	<div class="mb-2 text-xs text-theme-muted">{service.addressName ?? service.address}</div>
+
+	{#if column === 'unassigned'}
+		<!-- Unassigned column footer -->
+		<div class="flex items-center justify-between border-t border-theme pt-2">
+			<button
+				onclick={onDelete}
+				disabled={isUpdating}
+				class="rounded-full bg-red-100 p-1.5 text-red-600 transition-colors hover:bg-red-200 disabled:opacity-50 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+				aria-label="Delete service"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+					/>
+				</svg>
+			</button>
+			<div class="flex-1 px-2 text-xs text-theme-muted">
+				{#if teamMemberNames.length === 0}
+					<span class="italic">No team assigned</span>
+				{:else}
+					{teamMemberNames.join(', ')}
+				{/if}
+			</div>
+			<button
+				onclick={onAddDispatch}
+				disabled={isUpdating}
+				class="rounded-full bg-green-100 p-1.5 text-green-600 transition-colors hover:bg-green-200 disabled:opacity-50 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50"
+				aria-label="Add dispatch"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+			</button>
+		</div>
+	{:else if column === 'readyToAssign'}
+		<!-- Ready to Assign: Staged team members + Add button -->
+		<div class="mb-3 flex flex-wrap items-center gap-1.5">
+			{#each stagedMembers as member (member.pk)}
+				<span
+					class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+				>
+					{member.name}
+					<button
+						onclick={() => onUnstageTeamMember?.(member.pk)}
+						class="ml-0.5 rounded-full p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800"
+						aria-label="Remove {member.name}"
+					>
+						<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</span>
+			{/each}
+			<!-- Add team member button -->
+			<div class="relative">
+				<button
+					onclick={(e) => {
+						e.stopPropagation();
+						onToggleDropdown?.();
+					}}
+					class="inline-flex items-center gap-0.5 rounded-full border border-dashed border-blue-300 px-2 py-0.5 text-xs font-medium text-blue-500 transition-colors hover:border-blue-400 hover:bg-blue-50 hover:text-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-900/20"
+					aria-label="Add team member"
+				>
+					<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+						/>
+					</svg>
+					Add
+				</button>
+				{#if isDropdownOpen}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="menu"
+						tabindex="-1"
+						onclick={(e) => e.stopPropagation()}
+						class="absolute top-full left-0 z-20 mt-1 w-48 rounded-lg border border-theme bg-theme-card py-1 shadow-lg"
+					>
+						{#if availableMembers.length === 0}
+							<div class="px-3 py-2 text-sm text-theme-muted italic">No available members</div>
+						{:else}
+							{#each availableMembers as member (member.pk)}
+								<button
+									onclick={() => onStageTeamMember?.(member.pk)}
+									class="block w-full interactive px-3 py-2 text-left text-sm text-theme"
+								>
+									{member.name}
+								</button>
+							{/each}
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<div class="flex items-center justify-between border-t border-theme pt-2">
+			<button
+				onclick={onRemoveDispatch}
+				disabled={isUpdating}
+				class="rounded-full bg-red-100 p-1.5 text-red-600 transition-colors hover:bg-red-200 disabled:opacity-50 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+				aria-label="Remove dispatch"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</button>
+			<button
+				onclick={onSubmitStaged}
+				disabled={!hasStaged || isUpdating}
+				class="rounded-full p-1.5 transition-colors disabled:opacity-30 {hasStaged
+					? 'bg-green-100 text-green-600 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
+					: 'bg-theme-secondary text-theme-muted'}"
+				aria-label="Assign team members"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+			</button>
+		</div>
+	{:else}
+		<!-- Assigned column footer -->
+		<div class="flex items-center justify-between border-t border-theme pt-2">
+			<button
+				onclick={onRemoveNonDispatch}
+				disabled={isUpdating}
+				class="rounded-full bg-red-100 p-1.5 text-red-600 transition-colors hover:bg-red-200 disabled:opacity-50 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+				aria-label="Remove team members"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</button>
+			<div class="text-xs text-theme-muted">
+				<span class="font-medium">Team:</span>
+				{nonDispatchTeamMemberNames.join(', ')}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/admin/services/assign/AssignServiceGroup.svelte b/src/lib/components/admin/services/assign/AssignServiceGroup.svelte
new file mode 100644
index 0000000..5bffc92
--- /dev/null
+++ b/src/lib/components/admin/services/assign/AssignServiceGroup.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import AssignServiceCard from './AssignServiceCard.svelte';
+	import type { SvelteSet } from 'svelte/reactivity';
+
+	type EnrichedService = {
+		id: string;
+		date: string;
+		status: string;
+		notes: string | null;
+		teamMembers: { pk: string }[];
+		accountAddressId: string;
+		accountName: string;
+		addressName: string | null;
+		address: string | null;
+	};
+
+	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';
+
+	interface Props {
+		groupKey: string;
+		services: EnrichedService[];
+		column: ColumnType;
+		isExpanded: boolean;
+		updatingServices: Set<string>;
+		openTeamMemberDropdown: string | null;
+		editingDateServiceId?: string | null;
+		selectedServices?: SvelteSet<string>;
+		// Callbacks
+		onToggle: () => void;
+		getTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
+		getNonDispatchTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
+		getAvailableTeamMembers: (service: EnrichedService) => { pk: string; name: string }[];
+		getStagedTeamMemberDetails: (serviceId: string) => { pk: string; name: string }[];
+		hasStagedMembers: (serviceId: string) => boolean;
+		onAddDispatch: (service: EnrichedService) => void;
+		onRemoveDispatch: (service: EnrichedService) => void;
+		onSubmitStaged: (service: EnrichedService) => void;
+		onRemoveNonDispatch: (service: EnrichedService) => void;
+		onStageTeamMember: (serviceId: string, memberPk: string) => void;
+		onUnstageTeamMember: (serviceId: string, memberPk: string) => void;
+		onToggleDropdown: (serviceId: string | null) => void;
+		onToggleSelection?: (serviceId: string) => void;
+		// Unassigned column specific
+		onUpdateDate?: (service: EnrichedService, newDate: string) => void;
+		onDeleteService?: (service: EnrichedService) => void;
+		onStartEditDate?: (serviceId: string) => void;
+		onCancelEditDate?: () => void;
+	}
+
+	let {
+		groupKey,
+		services,
+		column,
+		isExpanded,
+		updatingServices,
+		openTeamMemberDropdown,
+		editingDateServiceId = null,
+		selectedServices,
+		onToggle,
+		getTeamMemberNames,
+		getNonDispatchTeamMemberNames,
+		getAvailableTeamMembers,
+		getStagedTeamMemberDetails,
+		hasStagedMembers,
+		onAddDispatch,
+		onRemoveDispatch,
+		onSubmitStaged,
+		onRemoveNonDispatch,
+		onStageTeamMember,
+		onUnstageTeamMember,
+		onToggleDropdown,
+		onToggleSelection,
+		onUpdateDate,
+		onDeleteService,
+		onStartEditDate,
+		onCancelEditDate
+	}: Props = $props();
+
+	function getBadgeClass(): string {
+		switch (column) {
+			case 'unassigned':
+				return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400';
+			case 'readyToAssign':
+				return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400';
+			case 'assigned':
+				return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400';
+		}
+	}
+
+	// Count selected services in this group
+	let selectedCount = $derived(
+		selectedServices ? services.filter((s) => selectedServices.has(s.id)).length : 0
+	);
+</script>
+
+<div class="rounded-lg border border-theme bg-theme-card">
+	<button
+		onclick={onToggle}
+		class="flex w-full items-center justify-between interactive px-3 py-2 text-left"
+	>
+		<span class="flex items-center gap-2">
+			<svg
+				class="h-4 w-4 text-theme-muted transition-transform {isExpanded ? 'rotate-90' : ''}"
+				style="fill: none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+			<span class="text-sm font-medium text-theme">{groupKey}</span>
+		</span>
+		<span class="flex items-center gap-1.5">
+			{#if selectedCount > 0}
+				<span
+					class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
+				>
+					{selectedCount}
+				</span>
+			{/if}
+			<span class="rounded-full px-2 py-0.5 text-xs font-semibold {getBadgeClass()}">
+				{services.length}
+			</span>
+		</span>
+	</button>
+	{#if isExpanded}
+		<div class="space-y-2 border-t border-theme p-2" transition:slide={{ duration: 150 }}>
+			{#each services as service (service.id)}
+				{@const availableMembers =
+					column === 'readyToAssign' ? getAvailableTeamMembers(service) : []}
+				{@const stagedMembers =
+					column === 'readyToAssign' ? getStagedTeamMemberDetails(service.id) : []}
+				{@const hasStaged = column === 'readyToAssign' ? hasStagedMembers(service.id) : false}
+				{@const isSelected = selectedServices?.has(service.id) ?? false}
+				<AssignServiceCard
+					{service}
+					{column}
+					isUpdating={updatingServices.has(service.id)}
+					teamMemberNames={column === 'unassigned' ? getTeamMemberNames(service.teamMembers) : []}
+					isEditingDate={column === 'unassigned' && editingDateServiceId === service.id}
+					{availableMembers}
+					{stagedMembers}
+					{hasStaged}
+					isDropdownOpen={openTeamMemberDropdown === service.id}
+					nonDispatchTeamMemberNames={column === 'assigned'
+						? getNonDispatchTeamMemberNames(service.teamMembers)
+						: []}
+					{isSelected}
+					showCheckbox={!!selectedServices}
+					onAddDispatch={() => onAddDispatch(service)}
+					onRemoveDispatch={() => onRemoveDispatch(service)}
+					onSubmitStaged={() => onSubmitStaged(service)}
+					onRemoveNonDispatch={() => onRemoveNonDispatch(service)}
+					onStageTeamMember={(pk) => onStageTeamMember(service.id, pk)}
+					onUnstageTeamMember={(pk) => onUnstageTeamMember(service.id, pk)}
+					onToggleDropdown={() =>
+						onToggleDropdown(openTeamMemberDropdown === service.id ? null : service.id)}
+					onToggleSelection={() => onToggleSelection?.(service.id)}
+					onUpdateDate={(newDate) => onUpdateDate?.(service, newDate)}
+					onDelete={() => onDeleteService?.(service)}
+					onStartEditDate={() => onStartEditDate?.(service.id)}
+					{onCancelEditDate}
+				/>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/chat/ChatPanel.svelte b/src/lib/components/chat/ChatPanel.svelte
new file mode 100644
index 0000000..46ff168
--- /dev/null
+++ b/src/lib/components/chat/ChatPanel.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { chat } from '$lib/stores/chat.svelte';
+	import MessageList from './MessageList.svelte';
+	import MessageInput from './MessageInput.svelte';
+	import ConversationList from './ConversationList.svelte';
+
+	let showConversations = $state(false);
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && chat.isOpen) {
+			if (showConversations) {
+				showConversations = false;
+			} else {
+				chat.close();
+			}
+		}
+	}
+
+	function toggleConversations() {
+		showConversations = !showConversations;
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if chat.isOpen}
+	<!-- Backdrop for mobile -->
+	<button
+		type="button"
+		class="fixed inset-0 z-40 bg-black/30 sm:hidden"
+		onclick={() => chat.close()}
+		aria-label="Close chat"
+	></button>
+
+	<!-- Chat panel -->
+	<div
+		class="fixed right-0 bottom-0 z-50 flex h-[calc(100dvh-3.5rem)] w-full flex-col bg-white shadow-xl sm:right-4 sm:bottom-20 sm:h-[600px] sm:max-h-[calc(100dvh-8rem)] sm:w-96 sm:rounded-2xl dark:bg-gray-800"
+		transition:fly={{ y: 20, duration: 200 }}
+		role="dialog"
+		aria-modal="true"
+		aria-label="Chat"
+	>
+		<!-- Header -->
+		<div
+			class="flex shrink-0 items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700"
+		>
+			<div class="flex items-center gap-3">
+				<button
+					type="button"
+					onclick={toggleConversations}
+					class="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+					aria-label="Show conversations"
+				>
+					<svg
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
+					</svg>
+				</button>
+
+				<div>
+					<h2 class="text-sm font-semibold text-gray-900 dark:text-white">
+						{chat.activeConversation?.title || 'New Chat'}
+					</h2>
+					<p class="text-xs text-gray-500 dark:text-gray-400">
+						{#if chat.connectionStatus === 'connected'}
+							AI Assistant
+						{:else if chat.connectionStatus === 'connecting'}
+							Connecting...
+						{:else}
+							Disconnected
+						{/if}
+					</p>
+				</div>
+			</div>
+
+			<button
+				type="button"
+				onclick={() => chat.close()}
+				class="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+				aria-label="Close chat"
+			>
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+		</div>
+
+		<!-- Main content area -->
+		<div class="relative flex min-h-0 flex-1 flex-col">
+			<!-- Messages -->
+			<MessageList />
+
+			<!-- Input -->
+			<MessageInput />
+
+			<!-- Conversation list overlay -->
+			{#if showConversations}
+				<div
+					class="absolute inset-0 bg-white dark:bg-gray-800"
+					transition:fly={{ x: -100, duration: 200 }}
+				>
+					<ConversationList onClose={() => (showConversations = false)} />
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/chat/ChatToggle.svelte b/src/lib/components/chat/ChatToggle.svelte
new file mode 100644
index 0000000..4d47445
--- /dev/null
+++ b/src/lib/components/chat/ChatToggle.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { chat } from '$lib/stores/chat.svelte';
+
+	const statusColors = {
+		disconnected: 'bg-gray-400',
+		connecting: 'bg-yellow-400 animate-pulse',
+		connected: 'bg-green-400',
+		error: 'bg-red-400'
+	};
+
+	let statusColor = $derived(statusColors[chat.connectionStatus]);
+</script>
+
+<button
+	type="button"
+	onclick={() => chat.toggle()}
+	class="fixed right-4 bottom-24 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-white shadow-lg transition-transform hover:scale-105 hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none md:bottom-6"
+	aria-label={chat.isOpen ? 'Close chat' : 'Open chat'}
+>
+	{#if chat.isOpen}
+		<!-- X icon -->
+		<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+		</svg>
+	{:else}
+		<!-- Chat bubble icon -->
+		<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+			/>
+		</svg>
+	{/if}
+
+	<!-- Connection status indicator -->
+	<span
+		class="absolute top-0 right-0 h-3 w-3 rounded-full border-2 border-white {statusColor}"
+		aria-hidden="true"
+	></span>
+</button>
diff --git a/src/lib/components/chat/ConversationList.svelte b/src/lib/components/chat/ConversationList.svelte
new file mode 100644
index 0000000..0a6a3b3
--- /dev/null
+++ b/src/lib/components/chat/ConversationList.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { chat } from '$lib/stores/chat.svelte';
+
+	interface Props {
+		onClose: () => void;
+	}
+
+	let { onClose }: Props = $props();
+
+	function selectConversation(id: string) {
+		chat.selectConversation(id);
+		onClose();
+	}
+
+	function startNew() {
+		chat.startNewConversation();
+		onClose();
+	}
+
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr);
+		const now = new Date();
+		const diffMs = now.getTime() - date.getTime();
+		const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+		if (diffDays === 0) {
+			return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+		} else if (diffDays === 1) {
+			return 'Yesterday';
+		} else if (diffDays < 7) {
+			return date.toLocaleDateString([], { weekday: 'short' });
+		} else {
+			return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+		}
+	}
+</script>
+
+<div class="flex h-full flex-col">
+	<div class="flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-700">
+		<h3 class="font-semibold text-gray-900 dark:text-white">Conversations</h3>
+		<button
+			type="button"
+			onclick={onClose}
+			class="rounded-lg p-1 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			aria-label="Close"
+		>
+			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
+	</div>
+
+	<div class="flex-1 overflow-y-auto">
+		<!-- New conversation button -->
+		<button
+			type="button"
+			onclick={startNew}
+			class="flex w-full items-center gap-3 border-b border-gray-100 px-4 py-3 text-left hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-700/50"
+		>
+			<div
+				class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
+			>
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+				</svg>
+			</div>
+			<div>
+				<p class="font-medium text-gray-900 dark:text-white">New Conversation</p>
+				<p class="text-xs text-gray-500 dark:text-gray-400">Start fresh</p>
+			</div>
+		</button>
+
+		<!-- Conversation list -->
+		{#each chat.conversations as conversation (conversation.id)}
+			<button
+				type="button"
+				onclick={() => selectConversation(conversation.id)}
+				class="flex w-full items-center gap-3 border-b border-gray-100 px-4 py-3 text-left hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-700/50 {conversation.id ===
+				chat.activeConversationId
+					? 'bg-primary-50 dark:bg-primary-900/20'
+					: ''}"
+			>
+				<div
+					class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+				>
+					<svg
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+				</div>
+				<div class="min-w-0 flex-1">
+					<p class="truncate font-medium text-gray-900 dark:text-white">
+						{conversation.title || 'New Conversation'}
+					</p>
+					<p class="text-xs text-gray-500 dark:text-gray-400">
+						{formatDate(conversation.updated_at || conversation.created_at)}
+					</p>
+				</div>
+			</button>
+		{/each}
+
+		{#if chat.conversations.length === 0}
+			<div class="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
+				No conversations yet
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/chat/Message.svelte b/src/lib/components/chat/Message.svelte
new file mode 100644
index 0000000..1c8cd3a
--- /dev/null
+++ b/src/lib/components/chat/Message.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { ChatMessage } from '$lib/stores/chat.svelte';
+	import ToolCallCard from './ToolCallCard.svelte';
+
+	interface Props {
+		message: ChatMessage;
+	}
+
+	let { message }: Props = $props();
+
+	let isUser = $derived(message.role === 'user');
+</script>
+
+<div class="flex {isUser ? 'justify-end' : 'justify-start'}">
+	<div
+		class="max-w-[85%] rounded-2xl px-4 py-2 {isUser
+			? 'bg-primary-600 text-white'
+			: 'bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100'}"
+	>
+		<!-- Tool calls (for assistant messages) -->
+		{#if message.tool_calls && message.tool_calls.length > 0}
+			<div class="mb-2 space-y-2">
+				{#each message.tool_calls as tool, i}
+					<ToolCallCard
+						{tool}
+						result={message.tool_results?.find((r) => r.tool_use_id === tool.id)?.result}
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Message content -->
+		{#if message.content}
+			<div class="prose prose-sm max-w-none {isUser ? 'prose-invert' : 'dark:prose-invert'}">
+				{@html message.content.replace(/\n/g, '<br>')}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
new file mode 100644
index 0000000..1024c21
--- /dev/null
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { chat } from '$lib/stores/chat.svelte';
+
+	let inputValue = $state('');
+	let textareaEl: HTMLTextAreaElement;
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!inputValue.trim() || chat.isStreaming) return;
+
+		chat.sendMessage(inputValue);
+		inputValue = '';
+
+		// Reset textarea height
+		if (textareaEl) {
+			textareaEl.style.height = 'auto';
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		// Submit on Enter (without Shift)
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			handleSubmit(e);
+		}
+	}
+
+	function autoResize() {
+		if (textareaEl) {
+			textareaEl.style.height = 'auto';
+			textareaEl.style.height = Math.min(textareaEl.scrollHeight, 150) + 'px';
+		}
+	}
+
+	let isDisabled = $derived(chat.connectionStatus !== 'connected' || chat.isStreaming);
+</script>
+
+<form onsubmit={handleSubmit} class="border-t border-gray-200 p-4 dark:border-gray-700">
+	<div class="flex items-end gap-2">
+		<textarea
+			bind:this={textareaEl}
+			bind:value={inputValue}
+			onkeydown={handleKeydown}
+			oninput={autoResize}
+			placeholder={chat.connectionStatus === 'connected'
+				? 'Type a message...'
+				: 'Connecting...'}
+			disabled={isDisabled}
+			rows="1"
+			class="max-h-36 min-h-[42px] flex-1 resize-none rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-primary-400"
+		></textarea>
+
+		<button
+			type="submit"
+			disabled={isDisabled || !inputValue.trim()}
+			class="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-xl bg-primary-600 text-white transition-colors hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Send message"
+		>
+			{#if chat.isStreaming}
+				<svg class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle
+						class="opacity-25"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+					></path>
+				</svg>
+			{:else}
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+					/>
+				</svg>
+			{/if}
+		</button>
+	</div>
+
+	{#if chat.connectionStatus === 'error'}
+		<p class="mt-2 text-xs text-red-500">
+			Connection error.
+			<button
+				type="button"
+				onclick={() => chat.connect()}
+				class="underline hover:no-underline"
+			>
+				Retry
+			</button>
+		</p>
+	{/if}
+</form>
diff --git a/src/lib/components/chat/MessageList.svelte b/src/lib/components/chat/MessageList.svelte
new file mode 100644
index 0000000..c0e0f54
--- /dev/null
+++ b/src/lib/components/chat/MessageList.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { chat } from '$lib/stores/chat.svelte';
+	import Message from './Message.svelte';
+	import ToolCallCard from './ToolCallCard.svelte';
+
+	let messagesContainer: HTMLDivElement;
+
+	// Auto-scroll to bottom when new messages arrive
+	$effect(() => {
+		// Track these to trigger the effect
+		const _ = chat.messages.length;
+		const __ = chat.streamingContent;
+
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	});
+</script>
+
+<div bind:this={messagesContainer} class="flex-1 space-y-4 overflow-y-auto p-4">
+	{#if chat.messages.length === 0 && !chat.isStreaming}
+		<!-- Intro message or empty state -->
+		{#if chat.introMessage}
+			<div class="flex justify-start">
+				<div class="max-w-[85%] rounded-2xl bg-gray-100 px-4 py-3 dark:bg-gray-700">
+					<div class="prose prose-sm max-w-none dark:prose-invert">
+						{@html chat.introMessage
+							.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+							.replace(/^• /gm, '<span class="mr-1">•</span>')
+							.replace(/\n\n/g, '</p><p class="mt-2">')
+							.replace(/\n/g, '<br>')}
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div class="flex h-full flex-col items-center justify-center text-center text-gray-500">
+				<svg class="mb-4 h-12 w-12 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+					/>
+				</svg>
+				<p class="text-sm">Connecting to your AI assistant...</p>
+			</div>
+		{/if}
+	{:else}
+		<!-- Messages -->
+		{#each chat.messages as message (message.id)}
+			<Message {message} />
+		{/each}
+
+		<!-- Streaming content -->
+		{#if chat.isStreaming}
+			<div class="flex justify-start">
+				<div class="max-w-[85%] rounded-2xl bg-gray-100 px-4 py-2 dark:bg-gray-700">
+					<!-- Active tool calls -->
+					{#if chat.currentToolCalls.length > 0}
+						<div class="mb-2 space-y-2">
+							{#each chat.currentToolCalls as tool}
+								<ToolCallCard {tool} isStreaming />
+							{/each}
+						</div>
+					{/if}
+
+					<!-- Streaming text -->
+					{#if chat.streamingContent}
+						<div class="prose prose-sm max-w-none dark:prose-invert">
+							{@html chat.streamingContent.replace(/\n/g, '<br>')}
+						</div>
+					{:else if chat.currentToolCalls.length === 0}
+						<!-- Typing indicator -->
+						<div class="flex space-x-1">
+							<div
+								class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+								style="animation-delay: 0ms"
+							></div>
+							<div
+								class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+								style="animation-delay: 150ms"
+							></div>
+							<div
+								class="h-2 w-2 animate-bounce rounded-full bg-gray-400"
+								style="animation-delay: 300ms"
+							></div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/chat/ToolCallCard.svelte b/src/lib/components/chat/ToolCallCard.svelte
new file mode 100644
index 0000000..a14860b
--- /dev/null
+++ b/src/lib/components/chat/ToolCallCard.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { ToolCall } from '$lib/stores/chat.svelte';
+
+	interface Props {
+		tool: ToolCall;
+		result?: unknown;
+		isStreaming?: boolean;
+	}
+
+	let { tool, result, isStreaming = false }: Props = $props();
+
+	// Format tool name for display
+	let displayName = $derived(
+		tool.name
+			.replace(/_/g, ' ')
+			.replace(/\b\w/g, (l) => l.toUpperCase())
+	);
+
+	// Determine if this is a "read" or "write" operation
+	let isReadOnly = $derived(
+		tool.name.startsWith('get_') ||
+			tool.name.startsWith('list_') ||
+			tool.name.includes('_my_')
+	);
+
+	let iconColor = $derived(isReadOnly ? 'text-blue-500' : 'text-amber-500');
+</script>
+
+<div
+	class="rounded-lg border border-gray-200 bg-white p-2 text-sm dark:border-gray-600 dark:bg-gray-800"
+>
+	<div class="flex items-center gap-2">
+		<!-- Tool icon -->
+		{#if isStreaming}
+			<svg class="h-4 w-4 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+				<circle
+					class="opacity-25"
+					cx="12"
+					cy="12"
+					r="10"
+					stroke="currentColor"
+					stroke-width="4"
+				></circle>
+				<path
+					class="opacity-75"
+					fill="currentColor"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+				></path>
+			</svg>
+		{:else}
+			<svg class="h-4 w-4 {iconColor}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				{#if isReadOnly}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				{:else}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+					/>
+				{/if}
+			</svg>
+		{/if}
+
+		<span class="font-medium text-gray-700 dark:text-gray-300">{displayName}</span>
+	</div>
+
+	<!-- Show result summary if available -->
+	{#if result && !isStreaming}
+		<div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+			{#if typeof result === 'object' && result !== null}
+				{#if Array.isArray(result)}
+					{result.length} result{result.length !== 1 ? 's' : ''}
+				{:else if 'error' in (result as Record<string, unknown>)}
+					<span class="text-red-500">Error: {(result as Record<string, unknown>).error}</span>
+				{:else}
+					Completed
+				{/if}
+			{:else}
+				{String(result).substring(0, 100)}
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/customer/CustomerPageHeader.svelte b/src/lib/components/customer/CustomerPageHeader.svelte
new file mode 100644
index 0000000..9b5433e
--- /dev/null
+++ b/src/lib/components/customer/CustomerPageHeader.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import { goto, beforeNavigate } from '$app/navigation';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		subtitleSnippet?: Snippet<[{ toggleMenu: () => void }]>;
+		colorScheme?: 'accent' | 'primary' | 'secondary' | 'accent6';
+		showBackButton?: boolean;
+		backHref?: string;
+		showNavMenu?: boolean;
+		invalidateOnBack?: boolean;
+	}
+
+	let {
+		title,
+		subtitle,
+		subtitleSnippet,
+		colorScheme = 'accent',
+		showBackButton = true,
+		backHref = '/customer',
+		showNavMenu = false,
+		invalidateOnBack = false
+	}: Props = $props();
+
+	function handleBack(event: MouseEvent) {
+		if (invalidateOnBack) {
+			event.preventDefault();
+			goto(backHref, { invalidateAll: true });
+		}
+	}
+
+	let menuOpen = $state(false);
+	let isNavigatingBack = $state(false);
+
+	beforeNavigate(({ to }) => {
+		if (to?.url.pathname === backHref) {
+			isNavigatingBack = true;
+		}
+	});
+
+	function toggleMenu() {
+		menuOpen = !menuOpen;
+	}
+
+	const colorClasses: Record<string, string> = {
+		accent: 'text-accent-600 dark:text-accent-400',
+		primary: 'text-primary-600 dark:text-primary-400',
+		secondary: 'text-secondary-600 dark:text-secondary-400',
+		accent6: 'text-accent6-600 dark:text-accent6-400'
+	};
+
+	const navItems = [
+		{
+			label: 'Accounts',
+			href: '/customer/accounts',
+			color: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Schedule',
+			href: '/customer/schedule',
+			color: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'History',
+			href: '/customer/history',
+			color: 'text-accent-600 dark:text-accent-400'
+		},
+		{
+			label: 'Invoices',
+			href: '/customer/invoices',
+			color: 'text-accent6-600 dark:text-accent6-400'
+		}
+	];
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.nav-menu-container') && !target.closest('.menu-trigger')) {
+			menuOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			menuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="mb-6">
+	{#if showBackButton}
+		<!-- 3-column grid: back button | content | spacer for centering -->
+		<div class="grid grid-cols-[auto_1fr_auto] items-start gap-4">
+			<a
+				href={backHref}
+				onclick={handleBack}
+				class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Go back"
+			>
+				{#if isNavigatingBack}
+					<svg
+						class="h-5 w-5 animate-spin {colorClasses[colorScheme]}"
+						style="fill: none"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{:else}
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				{/if}
+			</a>
+			<div>
+				<div class="flex items-center gap-2">
+					<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+					{#if showNavMenu}
+						<div class="nav-menu-container relative">
+							<button
+								type="button"
+								onclick={() => (menuOpen = !menuOpen)}
+								class="menu-trigger rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Navigation menu"
+								aria-expanded={menuOpen}
+							>
+								<svg
+									class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</button>
+
+							{#if menuOpen}
+								<div
+									class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+								>
+									{#each navItems as item (item.href)}
+										<a
+											href={item.href}
+											class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+												item.href || page.url.pathname.startsWith(item.href + '/')
+												? 'font-semibold'
+												: ''}"
+											onclick={() => (menuOpen = false)}
+										>
+											{item.label}
+										</a>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+				{#if subtitleSnippet}
+					<p class="page-subtitle">
+						{@render subtitleSnippet({ toggleMenu })}
+					</p>
+				{:else if subtitle}
+					<p class="page-subtitle">{subtitle}</p>
+				{/if}
+			</div>
+			<!-- Spacer to balance the back button and center the content -->
+			<div class="w-7"></div>
+		</div>
+	{:else}
+		<!-- No back button - simple layout -->
+		<div class="flex items-center gap-2">
+			<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+			{#if showNavMenu}
+				<div class="nav-menu-container relative">
+					<button
+						type="button"
+						onclick={() => (menuOpen = !menuOpen)}
+						class="menu-trigger rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Navigation menu"
+						aria-expanded={menuOpen}
+					>
+						<svg
+							class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+
+					{#if menuOpen}
+						<div
+							class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+						>
+							{#each navItems as item (item.href)}
+								<a
+									href={item.href}
+									class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+										item.href || page.url.pathname.startsWith(item.href + '/')
+										? 'font-semibold'
+										: ''}"
+									onclick={() => (menuOpen = false)}
+								>
+									{item.label}
+								</a>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if subtitleSnippet}
+			<p class="page-subtitle">
+				{@render subtitleSnippet({ toggleMenu })}
+			</p>
+		{:else if subtitle}
+			<p class="page-subtitle">{subtitle}</p>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/entity/EntityDetailsCard.svelte b/src/lib/components/entity/EntityDetailsCard.svelte
new file mode 100644
index 0000000..916df81
--- /dev/null
+++ b/src/lib/components/entity/EntityDetailsCard.svelte
@@ -0,0 +1,255 @@
+<script lang="ts">
+	import { formatDate, formatStatus, getStatusBadgeClass } from '$lib/utils/format';
+	import { formatDate as formatDateUtil } from '$lib/utils/date';
+	import { goto } from '$app/navigation';
+
+	interface TeamMember {
+		id: string;
+		fullName: string;
+		role: string;
+	}
+
+	interface AccountInfo {
+		accountName: string;
+		addressName: string;
+	}
+
+	interface CustomerInfo {
+		customerName: string;
+	}
+
+	interface Props {
+		entityType: 'service' | 'project';
+		entityId: string;
+		status: string;
+		date: string;
+		address?: string | null;
+		teamMembers: TeamMember[];
+		notes?: string | null;
+		// Project-specific
+		projectName?: string | null;
+		accountInfo?: AccountInfo | null;
+		customerInfo?: CustomerInfo | null;
+	}
+
+	let {
+		entityType,
+		entityId,
+		status,
+		date,
+		address,
+		teamMembers,
+		notes,
+		projectName,
+		accountInfo,
+		customerInfo
+	}: Props = $props();
+
+	// Non-admin team members for messaging (exclude ADMIN role)
+	let messagableMembers = $derived(teamMembers.filter((m) => m.role !== 'ADMIN'));
+
+	// Build the subject line for messages
+	let messageSubject = $derived(() => {
+		const formattedDate = formatDateUtil(date) || 'Unknown Date';
+		const accountName = accountInfo?.accountName || customerInfo?.customerName || 'Unknown';
+
+		if (entityType === 'service') {
+			return `${formattedDate} - Service: ${accountName}`;
+		} else {
+			const name = projectName || 'Project';
+			return `${formattedDate} - Project: ${name} - ${accountName}`;
+		}
+	});
+
+	// Navigate to new message page with pre-filled params
+	function messageTeamMember(memberId: string) {
+		const params = new URLSearchParams({
+			entityType: entityType === 'service' ? 'Service' : 'Project',
+			entityId,
+			participantIds: memberId,
+			conversationType: 'DIRECT',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	// Navigate to new message page with all team members
+	function messageAllTeamMembers() {
+		const memberIds = messagableMembers.map((m) => m.id).join(',');
+		const params = new URLSearchParams({
+			entityType: entityType === 'service' ? 'Service' : 'Project',
+			entityId,
+			participantIds: memberIds,
+			conversationType: 'GROUP',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	let colorClasses = $derived(
+		entityType === 'service'
+			? {
+					icon: 'bg-secondary-500/10',
+					iconText: 'text-secondary-600 dark:text-secondary-400',
+					leaderBadge: 'bg-accent-500/20 text-accent-600 dark:text-accent-400',
+					memberBadge: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'
+				}
+			: {
+					icon: 'bg-accent-500/10',
+					iconText: 'text-accent-600 dark:text-accent-400',
+					leaderBadge: 'bg-accent-500/20 text-accent-600 dark:text-accent-400',
+					memberBadge: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'
+				}
+	);
+
+	let title = $derived(entityType === 'service' ? 'Service Details' : 'Project Details');
+</script>
+
+<section class="mb-8">
+	<div class="mb-4 flex items-center gap-2">
+		<div class="flex h-8 w-8 items-center justify-center rounded-lg {colorClasses.icon}">
+			{#if entityType === 'service'}
+				<svg
+					class="h-5 w-5 {colorClasses.iconText}"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+					/>
+				</svg>
+			{:else}
+				<svg
+					class="h-5 w-5 {colorClasses.iconText}"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+					/>
+				</svg>
+			{/if}
+		</div>
+		<h2 class="text-lg font-semibold text-theme">{title}</h2>
+	</div>
+
+	<div class="card-padded">
+		<div class="space-y-4">
+			<!-- Status & Date Row -->
+			<div class="flex flex-wrap items-center gap-3">
+				<span class="rounded-full px-3 py-1 text-sm font-medium {getStatusBadgeClass(status)}">
+					{formatStatus(status)}
+				</span>
+				<span class="text-theme-secondary">
+					{formatDate(date)}
+				</span>
+			</div>
+
+			<!-- Account/Customer Info (projects only) -->
+			{#if entityType === 'project' && accountInfo}
+				<div class="border-t border-theme pt-2">
+					<h3 class="mb-1 text-sm font-medium text-theme-muted">Account</h3>
+					<p class="font-medium text-theme">{accountInfo.accountName}</p>
+					<p class="text-sm text-theme-secondary">{accountInfo.addressName}</p>
+				</div>
+			{:else if entityType === 'project' && customerInfo}
+				<div class="border-t border-theme pt-2">
+					<h3 class="mb-1 text-sm font-medium text-theme-muted">Customer</h3>
+					<p class="font-medium text-theme">{customerInfo.customerName}</p>
+				</div>
+			{/if}
+
+			<!-- Address Section -->
+			{#if address}
+				<div class="border-t border-theme pt-2">
+					<h3 class="mb-1 text-sm font-medium text-theme-muted">Address</h3>
+					<p class="text-theme">{address}</p>
+				</div>
+			{/if}
+
+			<!-- Team Members -->
+			<div class="border-t border-theme pt-2">
+				<div class="mb-2 flex items-center justify-between">
+					<h3 class="text-sm font-medium text-theme-muted">Team Members</h3>
+					{#if messagableMembers.length >= 2}
+						<button
+							type="button"
+							onclick={messageAllTeamMembers}
+							class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary-700"
+						>
+							<svg class="h-3.5 w-3.5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+								/>
+							</svg>
+							Message Team
+						</button>
+					{/if}
+				</div>
+				{#if teamMembers.length === 0}
+					<p class="text-theme-muted italic">No team members assigned</p>
+				{:else}
+					<div class="space-y-2">
+						{#each teamMembers as member (member.id)}
+							<div class="flex items-center gap-2">
+								<span
+									class="inline-flex h-6 w-6 items-center justify-center rounded text-xs font-bold {member.role ===
+									'TEAM_LEADER'
+										? colorClasses.leaderBadge
+										: colorClasses.memberBadge}"
+								>
+									{member.role === 'TEAM_LEADER' ? 'TL' : 'TM'}
+								</span>
+								{#if member.role !== 'ADMIN'}
+									<button
+										type="button"
+										onclick={() => messageTeamMember(member.id)}
+										class="rounded-full p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+										aria-label="Message {member.fullName}"
+									>
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+											/>
+										</svg>
+									</button>
+								{:else}
+									<!-- Spacer to maintain alignment for admin members -->
+									<span class="h-6 w-6"></span>
+								{/if}
+								<span class="text-theme">{member.fullName}</span>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Notes -->
+			{#if notes}
+				<div class="border-t border-theme pt-2">
+					<h3 class="mb-1 text-sm font-medium text-theme-muted">Notes</h3>
+					<p class="whitespace-pre-wrap text-theme">{notes}</p>
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
diff --git a/src/lib/components/entity/index.ts b/src/lib/components/entity/index.ts
new file mode 100644
index 0000000..bde4bf5
--- /dev/null
+++ b/src/lib/components/entity/index.ts
@@ -0,0 +1 @@
+export { default as EntityDetailsCard } from './EntityDetailsCard.svelte';
diff --git a/src/lib/components/icons/IconBack.svelte b/src/lib/components/icons/IconBack.svelte
new file mode 100644
index 0000000..642b404
--- /dev/null
+++ b/src/lib/components/icons/IconBack.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-5 w-5' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+</svg>
diff --git a/src/lib/components/icons/IconChevronRight.svelte b/src/lib/components/icons/IconChevronRight.svelte
new file mode 100644
index 0000000..f526f07
--- /dev/null
+++ b/src/lib/components/icons/IconChevronRight.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-4 w-4' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+</svg>
diff --git a/src/lib/components/icons/IconEdit.svelte b/src/lib/components/icons/IconEdit.svelte
new file mode 100644
index 0000000..1d01791
--- /dev/null
+++ b/src/lib/components/icons/IconEdit.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-4 w-4' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/IconPlus.svelte b/src/lib/components/icons/IconPlus.svelte
new file mode 100644
index 0000000..b68c715
--- /dev/null
+++ b/src/lib/components/icons/IconPlus.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-4 w-4' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+</svg>
diff --git a/src/lib/components/icons/IconSpinner.svelte b/src/lib/components/icons/IconSpinner.svelte
new file mode 100644
index 0000000..a695cd9
--- /dev/null
+++ b/src/lib/components/icons/IconSpinner.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-4 w-4 animate-spin' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" viewBox="0 0 24 24">
+	<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+	<path
+		class="opacity-75"
+		fill="currentColor"
+		d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	></path>
+</svg>
diff --git a/src/lib/components/icons/IconTrash.svelte b/src/lib/components/icons/IconTrash.svelte
new file mode 100644
index 0000000..45d5119
--- /dev/null
+++ b/src/lib/components/icons/IconTrash.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = 'h-4 w-4' }: Props = $props();
+</script>
+
+<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+	/>
+</svg>
diff --git a/src/lib/components/icons/NavIcon.svelte b/src/lib/components/icons/NavIcon.svelte
new file mode 100644
index 0000000..9134cd9
--- /dev/null
+++ b/src/lib/components/icons/NavIcon.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+	interface Props {
+		name:
+			| 'customers'
+			| 'accounts'
+			| 'services'
+			| 'projects'
+			| 'scopes'
+			| 'reports'
+			| 'invoices'
+			| 'calendar';
+		class?: string;
+	}
+
+	let { name, class: className = 'h-5 w-5' }: Props = $props();
+</script>
+
+{#if name === 'customers'}
+	<!-- Single building -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Main building -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M4 21V6a1 1 0 011-1h14a1 1 0 011 1v15"
+		/>
+		<!-- Roof -->
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 21h20" />
+		<!-- Windows row 1 -->
+		<rect x="7" y="8" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
+		<rect x="14.5" y="8" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
+		<!-- Windows row 2 -->
+		<rect x="7" y="13" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
+		<rect x="14.5" y="13" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
+		<!-- Door -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M10 21v-4a2 2 0 012-2v0a2 2 0 012 2v4"
+		/>
+	</svg>
+{:else if name === 'accounts'}
+	<!-- Multiple buildings -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Back building (taller) -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M14 21V4a1 1 0 011-1h6a1 1 0 011 1v17"
+		/>
+		<!-- Back building windows -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M17 6h2M17 9h2M17 12h2M17 15h2M17 18h2" />
+		<!-- Front building (shorter) -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M2 21V9a1 1 0 011-1h10a1 1 0 011 1v12"
+		/>
+		<!-- Front building windows -->
+		<rect x="4" y="11" width="2" height="2" rx="0.3" stroke-width="1.5" />
+		<rect x="9" y="11" width="2" height="2" rx="0.3" stroke-width="1.5" />
+		<rect x="4" y="16" width="2" height="2" rx="0.3" stroke-width="1.5" />
+		<rect x="9" y="16" width="2" height="2" rx="0.3" stroke-width="1.5" />
+		<!-- Ground line -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M1 21h22" />
+	</svg>
+{:else if name === 'services'}
+	<!-- Broom sweeping -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Handle -->
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2v10" />
+		<!-- Broom head binding -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M8 12h8a1 1 0 011 1v1H7v-1a1 1 0 011-1z"
+		/>
+		<!-- Bristles -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M7 14l-1 8M9.5 14l-.5 8M12 14v8M14.5 14l.5 8M17 14l1 8"
+		/>
+		<!-- Sweep motion lines -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M3 18l2 1M3 21l2-0.5" />
+	</svg>
+{:else if name === 'projects'}
+	<!-- Floor buffer/polisher - side view -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Long handle -->
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 3l8 10" />
+		<!-- Handle grip -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M3 2l2 2" />
+		<!-- Motor/body housing -->
+		<ellipse cx="14" cy="14" rx="4" ry="2.5" stroke-width="1.5" />
+		<!-- Rotating pad base -->
+		<ellipse cx="14" cy="19" rx="6" ry="2" stroke-width="1.5" />
+		<!-- Connection shaft -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M14 16.5v.5" />
+		<!-- Floor line -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M6 21h16" />
+		<!-- Motion arcs -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M7 19.5c1-.8 2-.8 3 0" />
+	</svg>
+{:else if name === 'scopes'}
+	<!-- Checklist -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Paper/document -->
+		<rect x="4" y="2" width="16" height="20" rx="2" stroke-width="1.5" />
+		<!-- Checkbox 1 with check -->
+		<rect x="7" y="6" width="3" height="3" rx="0.5" stroke-width="1.5" />
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 7.5l1 1 2-2" />
+		<path stroke-linecap="round" stroke-width="1.5" d="M13 7.5h4" />
+		<!-- Checkbox 2 with check -->
+		<rect x="7" y="11" width="3" height="3" rx="0.5" stroke-width="1.5" />
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 12.5l1 1 2-2" />
+		<path stroke-linecap="round" stroke-width="1.5" d="M13 12.5h4" />
+		<!-- Checkbox 3 empty -->
+		<rect x="7" y="16" width="3" height="3" rx="0.5" stroke-width="1.5" />
+		<path stroke-linecap="round" stroke-width="1.5" d="M13 17.5h4" />
+	</svg>
+{:else if name === 'reports'}
+	<!-- Bar chart -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Axis -->
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3v18h18" />
+		<!-- Bars -->
+		<rect x="6" y="12" width="3" height="8" rx="0.5" stroke-width="1.5" />
+		<rect x="11" y="7" width="3" height="13" rx="0.5" stroke-width="1.5" />
+		<rect x="16" y="10" width="3" height="10" rx="0.5" stroke-width="1.5" />
+	</svg>
+{:else if name === 'invoices'}
+	<!-- Dollar sign -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Vertical line through -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M12 2v20" />
+		<!-- S curve of dollar sign -->
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M17 6.5c0-1.93-2.24-3.5-5-3.5s-5 1.57-5 3.5c0 3.5 10 1.75 10 7 0 1.93-2.24 3.5-5 3.5s-5-1.57-5-3.5"
+		/>
+	</svg>
+{:else if name === 'calendar'}
+	<!-- Calendar -->
+	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<!-- Calendar body -->
+		<rect x="3" y="4" width="18" height="18" rx="2" stroke-width="1.5" />
+		<!-- Top binding tabs -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M8 2v4M16 2v4" />
+		<!-- Header line -->
+		<path stroke-linecap="round" stroke-width="1.5" d="M3 9h18" />
+		<!-- Date dots -->
+		<circle cx="7" cy="13" r="1" fill="currentColor" />
+		<circle cx="12" cy="13" r="1" fill="currentColor" />
+		<circle cx="17" cy="13" r="1" fill="currentColor" />
+		<circle cx="7" cy="17" r="1" fill="currentColor" />
+		<circle cx="12" cy="17" r="1" fill="currentColor" />
+		<circle cx="17" cy="17" r="1" fill="currentColor" />
+	</svg>
+{/if}
diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts
new file mode 100644
index 0000000..5becab1
--- /dev/null
+++ b/src/lib/components/icons/index.ts
@@ -0,0 +1,6 @@
+export { default as IconBack } from './IconBack.svelte';
+export { default as IconEdit } from './IconEdit.svelte';
+export { default as IconTrash } from './IconTrash.svelte';
+export { default as IconPlus } from './IconPlus.svelte';
+export { default as IconChevronRight } from './IconChevronRight.svelte';
+export { default as IconSpinner } from './IconSpinner.svelte';
diff --git a/src/lib/components/layout/ContentContainer.svelte b/src/lib/components/layout/ContentContainer.svelte
new file mode 100644
index 0000000..a628b10
--- /dev/null
+++ b/src/lib/components/layout/ContentContainer.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class?: string;
+		maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full';
+	}
+
+	let { children, class: className = '', maxWidth = '6xl' }: Props = $props();
+
+	const maxWidthClasses: Record<string, string> = {
+		sm: 'max-w-sm',
+		md: 'max-w-md',
+		lg: 'max-w-lg',
+		xl: 'max-w-xl',
+		'2xl': 'max-w-2xl',
+		'4xl': 'max-w-4xl',
+		'6xl': 'max-w-6xl',
+		'7xl': 'max-w-7xl',
+		full: 'max-w-full'
+	};
+</script>
+
+<div class="mx-auto w-full px-3 sm:px-6 lg:px-8 {maxWidthClasses[maxWidth]} {className}">
+	{@render children()}
+</div>
diff --git a/src/lib/components/layout/MenuOverlay.svelte b/src/lib/components/layout/MenuOverlay.svelte
new file mode 100644
index 0000000..2337b9c
--- /dev/null
+++ b/src/lib/components/layout/MenuOverlay.svelte
@@ -0,0 +1,395 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import type { Me$result } from '$houdini';
+	import { page } from '$app/state';
+	import { SvelteSet } from 'svelte/reactivity';
+	import logoIcon from '$lib/assets/logo-icon.png';
+
+	interface MenuItem {
+		label: string;
+		href: string;
+		icon?: string;
+	}
+
+	interface MenuSection {
+		title: string;
+		items: MenuItem[];
+		collapsible?: boolean;
+		colorScheme?: 'primary' | 'secondary' | 'accent' | 'accent3';
+	}
+
+	interface Props {
+		user: Me$result['me'] | undefined;
+		open: boolean;
+		onClose: () => void;
+	}
+
+	let { user, open, onClose }: Props = $props();
+	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
+	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
+	let userRole = $derived(user?.__typename === 'TeamProfileType' ? user.role : null);
+	let isAdmin = $derived(userRole === 'ADMIN');
+	let isTeamLeader = $derived(userRole === 'TEAM_LEADER');
+	let canAccessAdmin = $derived(isAdmin || isTeamLeader);
+
+	// Track expanded state for collapsible sections
+	let expandedSections = $state<Set<string>>(new Set());
+
+	function toggleSection(title: string) {
+		if (expandedSections.has(title)) {
+			expandedSections.delete(title);
+		} else {
+			expandedSections.add(title);
+		}
+		expandedSections = new SvelteSet(expandedSections); // Trigger reactivity
+	}
+
+	// Public menu - visible to everyone (non-collapsible)
+	const publicMenu: MenuSection = {
+		title: 'General',
+		items: [
+			{ label: 'Home', href: '/' },
+			{ label: 'Services', href: '/services' },
+			{ label: 'Our Standard', href: '/standard' },
+			{ label: 'Pricing', href: '/pricing' },
+			{ label: 'About', href: '/about' },
+			{ label: 'Contact', href: '/contact' }
+		],
+		collapsible: false
+	};
+
+	// Customer menu - visible only to logged in customers (collapsible, teal)
+	const customerMenu: MenuSection = {
+		title: 'Customer',
+		items: [
+			{ label: 'Dashboard', href: '/customer' },
+			{ label: 'Accounts', href: '/customer/accounts' },
+			{ label: 'Schedule', href: '/customer/schedule' },
+			{ label: 'History', href: '/customer/history' },
+			{ label: 'My Profile', href: '/customer/profile' }
+		],
+		collapsible: true,
+		colorScheme: 'accent3'
+	};
+
+	// Team menu - visible only to team members (collapsible, green)
+	const teamMenu: MenuSection = {
+		title: 'Team',
+		items: [
+			{ label: 'Dashboard', href: '/team' },
+			{ label: 'Accounts', href: '/team/accounts' },
+			{ label: 'Services', href: '/team/services' },
+			{ label: 'Projects', href: '/team/projects' },
+			{ label: 'Reports', href: '/team/reports' },
+			{ label: 'My Profile', href: '/team/profile' }
+		],
+		collapsible: true,
+		colorScheme: 'secondary'
+	};
+
+	// Admin menu - visible only to team leaders and admins (collapsible, orange)
+	let adminMenu = $derived<MenuSection>({
+		title: 'Admin',
+		items: [
+			{ label: 'Dashboard', href: '/admin' },
+			{ label: 'Customers', href: '/admin/customers' },
+			{ label: 'Accounts', href: '/admin/accounts' },
+			{ label: 'Services', href: '/admin/services' },
+			{ label: 'Projects', href: '/admin/projects' },
+			{ label: 'Scopes', href: '/admin/scopes' },
+			{ label: 'Reports', href: '/admin/reports' },
+			{ label: 'Invoices', href: '/admin/invoices' },
+			{ label: 'Calendar', href: '/admin/calendar' },
+			{ label: 'Profiles', href: '/admin/profiles' },
+			// ADMIN-only items
+			...(isAdmin
+				? [
+						{ label: 'Notifications', href: '/admin/notifications' },
+						{ label: 'Event Log', href: '/admin/events' }
+					]
+				: [])
+		],
+		collapsible: true,
+		colorScheme: 'accent'
+	});
+
+	// Portal menus (collapsible sections)
+	let portalMenus = $derived.by(() => {
+		const result: MenuSection[] = [];
+
+		if (isCustomer) {
+			result.push(customerMenu);
+		}
+
+		if (isTeamMember) {
+			result.push(teamMenu);
+		}
+
+		if (canAccessAdmin) {
+			result.push(adminMenu);
+		}
+
+		return result;
+	});
+
+	// Check if user has any portal access
+	let hasPortalAccess = $derived(portalMenus.length > 0);
+
+	// Get border color class for card-style headers
+	function getBorderColor(scheme: MenuSection['colorScheme']): string {
+		switch (scheme) {
+			case 'accent3':
+				return 'border-l-accent3-500';
+			case 'secondary':
+				return 'border-l-secondary-500';
+			case 'accent':
+				return 'border-l-accent-500';
+			default:
+				return 'border-l-primary-500';
+		}
+	}
+
+	// Get text color class for card headers
+	function getTextColor(scheme: MenuSection['colorScheme']): string {
+		switch (scheme) {
+			case 'accent3':
+				return 'text-accent3-600 dark:text-accent3-400';
+			case 'secondary':
+				return 'text-secondary-600 dark:text-secondary-400';
+			case 'accent':
+				return 'text-accent-600 dark:text-accent-400';
+			default:
+				return 'text-primary-600 dark:text-primary-400';
+		}
+	}
+
+	// Get chevron color for expanded state
+	function getChevronColor(scheme: MenuSection['colorScheme'], isExpanded: boolean): string {
+		if (isExpanded) {
+			switch (scheme) {
+				case 'accent3':
+					return 'text-accent3-500';
+				case 'secondary':
+					return 'text-secondary-500';
+				case 'accent':
+					return 'text-accent-500';
+				default:
+					return 'text-primary-500';
+			}
+		}
+		return 'text-theme-muted';
+	}
+
+	// Get active link colors based on section color scheme
+	function getActiveLinkColors(scheme: MenuSection['colorScheme']): string {
+		switch (scheme) {
+			case 'accent3':
+				return 'bg-accent3-100 font-medium text-accent3-700 dark:bg-accent3-900/50 dark:text-accent3-300';
+			case 'secondary':
+				return 'bg-secondary-100 font-medium text-secondary-700 dark:bg-secondary-900/50 dark:text-secondary-300';
+			case 'accent':
+				return 'bg-accent-100 font-medium text-accent-700 dark:bg-accent-900/50 dark:text-accent-300';
+			default:
+				return 'bg-primary-100 font-medium text-primary-700 dark:bg-primary-900/50 dark:text-primary-300';
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && open) {
+			onClose();
+		}
+	}
+
+	function handleLinkClick() {
+		onClose();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- Backdrop - clicking closes menu -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-40 overflow-y-auto bg-black/60 backdrop-blur-sm transition-opacity"
+		onclick={onClose}
+		onkeydown={(e) => e.key === 'Enter' && onClose()}
+	>
+		<!-- Menu container - centered in viewport -->
+		<div class="flex min-h-full items-center justify-center p-4">
+			<!-- Menu panel - stop click propagation so clicking menu doesn't close it -->
+			<div
+				class="w-full max-w-sm overflow-hidden rounded-2xl border border-theme bg-theme-card shadow-theme-lg"
+				onclick={(e) => e.stopPropagation()}
+				onkeydown={(e) => e.stopPropagation()}
+			>
+				<!-- Header -->
+				<div class="flex h-14 items-center justify-between border-b border-theme px-4">
+					<button
+						onclick={onClose}
+						class="-ml-2 rounded-lg interactive p-2"
+						aria-label="Close menu"
+					>
+						<svg
+							class="h-5 w-5 text-theme"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+					<span class="flex items-center gap-2 text-lg font-semibold text-theme">
+						<img src={logoIcon} alt="Logo" class="h-8 w-8" />
+						Nexus
+					</span>
+					<div class="w-9"></div>
+				</div>
+
+				<!-- Menu sections -->
+				<nav class="max-h-[60vh] overflow-y-auto py-4">
+					<!-- Public Menu (General) -->
+					<div class="mb-4 px-3">
+						<h3
+							class="mb-3 text-center text-[11px] font-semibold tracking-wider text-theme-muted uppercase"
+						>
+							{publicMenu.title}
+						</h3>
+						<div class="space-y-1.5">
+							{#each publicMenu.items as item (item.label)}
+								<a
+									href={item.href}
+									onclick={handleLinkClick}
+									data-sveltekit-preload-data="hover"
+									class="block rounded-md border bg-theme-card px-3 py-2 text-center text-sm shadow-sm transition-all duration-150 {page
+										.url.pathname === item.href
+										? 'border-l-2 border-l-primary-500 bg-primary-100 font-medium text-primary-700 dark:bg-primary-900/50 dark:text-primary-300'
+										: 'border-theme text-theme-secondary hover:bg-black/5 hover:shadow-theme active:scale-[0.98] dark:hover:bg-white/10'}"
+									aria-current={page.url.pathname === item.href ? 'page' : undefined}
+								>
+									{item.label}
+								</a>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Nexus Portal Section (bordered container for collapsible menus) -->
+					{#if hasPortalAccess}
+						<div class="bg-theme/50 mx-3 rounded-xl border border-theme">
+							<!-- Portal Header -->
+							<div class="border-b border-theme px-4 py-2.5">
+								<h3 class="text-center text-xs font-semibold tracking-wide text-theme">
+									Nexus Portal
+								</h3>
+							</div>
+
+							<!-- Collapsible Sections -->
+							<div class="space-y-2 p-2">
+								{#each portalMenus as section (section.title)}
+									{@const isExpanded = expandedSections.has(section.title)}
+									<!-- Card-style section -->
+									<div
+										class="overflow-hidden rounded-lg border border-theme bg-theme-card shadow-sm transition-shadow duration-150 {isExpanded
+											? 'shadow-theme'
+											: ''}"
+									>
+										<!-- Card header with colored left border -->
+										<button
+											onclick={() => toggleSection(section.title)}
+											class="flex w-full items-center justify-between border-l-4 px-3 py-2.5 transition-all duration-150 hover:bg-black/5 dark:hover:bg-white/10 {getBorderColor(
+												section.colorScheme
+											)}"
+										>
+											<span class="text-sm font-semibold {getTextColor(section.colorScheme)}"
+												>{section.title}</span
+											>
+											<svg
+												class="h-4 w-4 transition-transform duration-150 {isExpanded
+													? 'rotate-180'
+													: ''} {getChevronColor(section.colorScheme, isExpanded)}"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 9l-7 7-7-7"
+												/>
+											</svg>
+										</button>
+
+										{#if isExpanded}
+											<div
+												class="space-y-1.5 border-t border-theme p-2"
+												transition:slide={{ duration: 150 }}
+											>
+												{#each section.items as item (item.label)}
+													<a
+														href={item.href}
+														onclick={handleLinkClick}
+														data-sveltekit-preload-data="hover"
+														class="block rounded-md border bg-theme-card px-3 py-2 text-center text-sm shadow-sm transition-all duration-150 {page
+															.url.pathname === item.href
+															? `border-l-2 ${getBorderColor(section.colorScheme)} ${getActiveLinkColors(section.colorScheme)}`
+															: 'border-theme text-theme-secondary hover:border-theme hover:bg-black/5 hover:shadow-theme active:scale-[0.98] dark:hover:bg-white/10'}"
+														aria-current={page.url.pathname === item.href ? 'page' : undefined}
+													>
+														{item.label}
+													</a>
+												{/each}
+											</div>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</nav>
+
+				<!-- Footer -->
+				<div class="border-t border-theme p-4">
+					{#if user}
+						<a
+							href="/logout"
+							onclick={handleLinkClick}
+							class="flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-error-600 transition-colors hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-950/50"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+								/>
+							</svg>
+							Sign Out
+						</a>
+					{:else}
+						<a
+							href="/login"
+							onclick={handleLinkClick}
+							class="flex w-full items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-2.5 font-medium text-white transition-colors hover:bg-primary-700"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+								/>
+							</svg>
+							Sign In
+						</a>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/layout/OffCanvasRight.svelte b/src/lib/components/layout/OffCanvasRight.svelte
new file mode 100644
index 0000000..ae37394
--- /dev/null
+++ b/src/lib/components/layout/OffCanvasRight.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+
+	let isOpen = $derived(offCanvas.isRightOpen);
+	let content = $derived(offCanvas.rightContent);
+
+	function close() {
+		offCanvas.closeRight();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && isOpen) {
+			close();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			close();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+	<!-- Backdrop -->
+	<button
+		type="button"
+		class="fixed inset-0 z-40 bg-black/50 transition-opacity"
+		onclick={handleBackdropClick}
+		aria-label="Close panel"
+	></button>
+
+	<!-- Off-canvas panel -->
+	<div
+		class="fixed top-0 right-0 z-50 flex h-full max-w-full flex-col bg-theme shadow-theme-lg {content?.width ||
+			'w-full sm:w-96 md:w-[480px]'} {content?.class || ''}"
+		transition:fly={{ x: 320, duration: 300 }}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={content?.title ? 'offcanvas-title' : undefined}
+	>
+		{#if content?.title}
+			<div class="flex flex-shrink-0 items-center justify-between border-b border-theme p-4">
+				<h3 id="offcanvas-title" class="text-lg font-semibold text-theme">
+					{content.title}
+				</h3>
+				<button
+					type="button"
+					onclick={close}
+					class="rounded-lg p-1.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: currentColor" viewBox="0 0 20 20">
+						<path
+							fill-rule="evenodd"
+							d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</button>
+			</div>
+		{:else}
+			<!-- Close button when no title -->
+			<div class="absolute top-4 right-4">
+				<button
+					type="button"
+					onclick={close}
+					class="rounded-lg p-1.5 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: currentColor" viewBox="0 0 20 20">
+						<path
+							fill-rule="evenodd"
+							d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</button>
+			</div>
+		{/if}
+
+		<div class="min-w-0 flex-1 overflow-y-auto p-4">
+			{#if content?.content}
+				{@render content.content()}
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/nav/AdminNav.svelte b/src/lib/components/nav/AdminNav.svelte
new file mode 100644
index 0000000..92eae4c
--- /dev/null
+++ b/src/lib/components/nav/AdminNav.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import NavIcon from '$lib/components/icons/NavIcon.svelte';
+
+	let addMenuOpen = $state(false);
+
+	type NavIconName =
+		| 'customers'
+		| 'accounts'
+		| 'services'
+		| 'projects'
+		| 'scopes'
+		| 'reports'
+		| 'invoices'
+		| 'calendar';
+
+	const leftNavItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
+		{
+			label: 'Customers',
+			href: '/admin/customers',
+			icon: 'customers',
+			activeColor: 'text-accent3-600 dark:text-accent3-400'
+		},
+		{
+			label: 'Accounts',
+			href: '/admin/accounts',
+			icon: 'accounts',
+			activeColor: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Services',
+			href: '/admin/services',
+			icon: 'services',
+			activeColor: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'Projects',
+			href: '/admin/projects',
+			icon: 'projects',
+			activeColor: 'text-accent-600 dark:text-accent-400'
+		}
+	];
+
+	const rightNavItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
+		{
+			label: 'Scopes',
+			href: '/admin/scopes',
+			icon: 'scopes',
+			activeColor: 'text-accent3-600 dark:text-accent3-400'
+		},
+		{
+			label: 'Reports',
+			href: '/admin/reports',
+			icon: 'reports',
+			activeColor: 'text-accent2-600 dark:text-accent2-400'
+		},
+		{
+			label: 'Invoices',
+			href: '/admin/invoices',
+			icon: 'invoices',
+			activeColor: 'text-accent6-600 dark:text-accent6-400'
+		},
+		{
+			label: 'Calendar',
+			href: '/admin/calendar',
+			icon: 'calendar',
+			activeColor: 'text-accent7-600 dark:text-accent7-400'
+		}
+	];
+
+	const addMenuItems = [
+		{ label: 'Add a Customer', href: '/admin/customers?action=create' },
+		{ label: 'Add an Account', href: '/admin/accounts?action=create' },
+		{ label: 'Schedule a Service', href: '/admin/services?action=create' },
+		{ label: 'Schedule a Project', href: '/admin/projects?action=create' },
+		{ label: 'Create a Report', href: '/admin/reports?action=create' },
+		{ label: 'Create an Invoice', href: '/admin/invoices?action=create' }
+	];
+
+	function isActive(href: string): boolean {
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+
+	function closeAddMenu() {
+		addMenuOpen = false;
+	}
+</script>
+
+<svelte:window onkeydown={(e) => e.key === 'Escape' && addMenuOpen && closeAddMenu()} />
+
+<nav class="sticky bottom-0 z-30 border-t border-theme bg-theme-secondary">
+	<div class="mx-auto my-2 flex h-20 items-center justify-center px-2 sm:my-0 sm:h-16 sm:px-4">
+		<!-- Left nav items - 2x2 grid on mobile, row on desktop -->
+		<div
+			class="grid w-[calc(50%-2.25rem)] grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:w-auto sm:flex-1 sm:items-center sm:justify-end sm:gap-4"
+		>
+			{#each leftNavItems as item (item.href)}
+				{@const active = isActive(item.href)}
+				<a
+					href={item.href}
+					class="flex flex-col items-center justify-center rounded-lg px-1 py-1 transition-all duration-200 sm:px-3 sm:py-1.5 {active
+						? item.activeColor
+						: 'text-theme-muted hover:text-theme-secondary'}"
+					aria-current={active ? 'page' : undefined}
+				>
+					<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
+					<span class="mt-0.5 text-[8px] font-semibold sm:text-[10px]">{item.label}</span>
+				</a>
+			{/each}
+		</div>
+
+		<!-- Center add button -->
+		<div class="relative z-40 mx-3 flex shrink-0 items-center sm:mx-4">
+			<button
+				onclick={() => (addMenuOpen = !addMenuOpen)}
+				class="flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-all duration-200 hover:bg-primary-600 active:bg-primary-700 {addMenuOpen
+					? 'rotate-45'
+					: ''}"
+				aria-label="Add new"
+			>
+				<svg
+					class="h-7 w-7 transition-transform duration-200"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+			</button>
+
+			<!-- Add menu popup -->
+			{#if addMenuOpen}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="fixed inset-0 z-40"
+					onclick={closeAddMenu}
+					onkeydown={(e) => e.key === 'Escape' && closeAddMenu()}
+				></div>
+				<div
+					class="absolute bottom-full left-1/2 z-50 mb-3 w-56 -translate-x-1/2 overflow-hidden rounded-xl border border-theme bg-theme-card shadow-theme-lg"
+				>
+					<div class="py-2">
+						{#each addMenuItems as item (item.href)}
+							<a
+								href={item.href}
+								onclick={closeAddMenu}
+								class="flex items-center gap-3 interactive px-4 py-2.5 text-sm text-theme-secondary"
+							>
+								<svg
+									class="h-5 w-5 text-primary-500"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="1.5"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								{item.label}
+							</a>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Right nav items - 2x2 grid on mobile, row on desktop -->
+		<div
+			class="grid w-[calc(50%-2.25rem)] grid-cols-2 gap-x-1 gap-y-0.5 sm:flex sm:w-auto sm:flex-1 sm:items-center sm:justify-start sm:gap-4"
+		>
+			{#each rightNavItems as item (item.href)}
+				{@const active = isActive(item.href)}
+				<a
+					href={item.href}
+					class="flex flex-col items-center justify-center rounded-lg px-1 py-1 transition-all duration-200 sm:px-3 sm:py-1.5 {active
+						? item.activeColor
+						: 'text-theme-muted hover:text-theme-secondary'}"
+					aria-current={active ? 'page' : undefined}
+				>
+					<NavIcon name={item.icon} class="h-5 w-5 sm:h-6 sm:w-6" />
+					<span class="mt-0.5 text-[8px] font-semibold sm:text-[10px]">{item.label}</span>
+				</a>
+			{/each}
+		</div>
+	</div>
+</nav>
diff --git a/src/lib/components/nav/CustomerNav.svelte b/src/lib/components/nav/CustomerNav.svelte
new file mode 100644
index 0000000..82a8784
--- /dev/null
+++ b/src/lib/components/nav/CustomerNav.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import NavIcon from '$lib/components/icons/NavIcon.svelte';
+
+	type NavIconName = 'accounts' | 'services' | 'projects' | 'invoices';
+
+	const navItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
+		{
+			label: 'Accounts',
+			href: '/customer/accounts',
+			icon: 'accounts',
+			activeColor: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Schedule',
+			href: '/customer/schedule',
+			icon: 'services',
+			activeColor: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'History',
+			href: '/customer/history',
+			icon: 'projects',
+			activeColor: 'text-accent-600 dark:text-accent-400'
+		},
+		{
+			label: 'Invoices',
+			href: '/customer/invoices',
+			icon: 'invoices',
+			activeColor: 'text-accent6-600 dark:text-accent6-400'
+		}
+	];
+
+	function isActive(href: string): boolean {
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+</script>
+
+<nav class="sticky bottom-0 z-30 border-t border-theme bg-theme-secondary">
+	<div class="mx-auto flex h-16 max-w-lg items-center justify-around px-2">
+		{#each navItems as item (item.href)}
+			{@const active = isActive(item.href)}
+			<a
+				href={item.href}
+				class="flex flex-col items-center justify-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 {active
+					? item.activeColor
+					: 'text-theme-muted hover:text-theme-secondary'}"
+				aria-current={active ? 'page' : undefined}
+			>
+				<NavIcon name={item.icon} class="h-5 w-5" />
+				<span class="text-[10px] font-semibold">{item.label}</span>
+			</a>
+		{/each}
+	</div>
+</nav>
diff --git a/src/lib/components/nav/TeamNav.svelte b/src/lib/components/nav/TeamNav.svelte
new file mode 100644
index 0000000..5f03362
--- /dev/null
+++ b/src/lib/components/nav/TeamNav.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import NavIcon from '$lib/components/icons/NavIcon.svelte';
+
+	type NavIconName = 'customers' | 'accounts' | 'services' | 'projects' | 'scopes' | 'reports';
+
+	const navItems: { label: string; href: string; icon: NavIconName; activeColor: string }[] = [
+		{
+			label: 'Accounts',
+			href: '/team/accounts',
+			icon: 'accounts',
+			activeColor: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Services',
+			href: '/team/services',
+			icon: 'services',
+			activeColor: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'Projects',
+			href: '/team/projects',
+			icon: 'projects',
+			activeColor: 'text-accent-600 dark:text-accent-400'
+		},
+		{
+			label: 'Reports',
+			href: '/team/reports',
+			icon: 'reports',
+			activeColor: 'text-accent2-600 dark:text-accent2-400'
+		}
+	];
+
+	function isActive(href: string): boolean {
+		if (href === '/team') {
+			return page.url.pathname === '/team';
+		}
+		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
+	}
+</script>
+
+<nav class="sticky bottom-0 z-30 border-t border-theme bg-theme-secondary">
+	<div class="mx-auto flex h-16 max-w-lg items-center justify-around px-2">
+		{#each navItems as item (item.href)}
+			{@const active = isActive(item.href)}
+			<a
+				href={item.href}
+				class="flex flex-col items-center justify-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 {active
+					? item.activeColor
+					: 'text-theme-muted hover:text-theme-secondary'}"
+				aria-current={active ? 'page' : undefined}
+			>
+				<NavIcon name={item.icon} class="h-5 w-5" />
+				<span class="text-[10px] font-semibold">{item.label}</span>
+			</a>
+		{/each}
+	</div>
+</nav>
diff --git a/src/lib/components/nav/TopNav.svelte b/src/lib/components/nav/TopNav.svelte
new file mode 100644
index 0000000..7aece39
--- /dev/null
+++ b/src/lib/components/nav/TopNav.svelte
@@ -0,0 +1,404 @@
+<script lang="ts">
+	import ThemeToggle from '../ThemeToggle.svelte';
+	import UnreadBadge from '../shared/UnreadBadge.svelte';
+	import { theme } from '$lib/stores/theme.svelte.js';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte.js';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import type { Me$result } from '$houdini';
+	import logoIcon from '$lib/assets/logo-icon.png';
+
+	interface Props {
+		user: Me$result['me'] | undefined;
+		onMenuClick: () => void;
+	}
+
+	let { user, onMenuClick }: Props = $props();
+
+	let isAuthenticated = $derived(!!user);
+	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
+	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
+
+	// Public routes show company branding
+	const publicRoutes = [
+		'/',
+		'/services',
+		'/about',
+		'/contact',
+		'/careers',
+		'/press',
+		'/blog',
+		'/help',
+		'/privacy',
+		'/terms',
+		'/cookies',
+		'/login',
+		'/register',
+		'/logout',
+		'/standard',
+		'/pricing'
+	];
+	let isPublicRoute = $derived(publicRoutes.includes(page.url.pathname));
+	let brandName = $derived(isPublicRoute ? 'Nexus' : 'Nexus');
+	let brandHref = $derived(
+		isPublicRoute ? '/' : isTeamMember ? '/team' : isCustomer ? '/customer' : '/'
+	);
+	let userRole = $derived(
+		isTeamMember && user?.__typename === 'TeamProfileType' ? user.role : null
+	);
+	let displayName = $derived(user?.fullName ?? '');
+
+	// Role badge styling
+	const roleBadgeStyles: Record<string, string> = {
+		ADMIN: 'bg-error-100 text-error-700 dark:bg-error-900 dark:text-error-300',
+		TEAM_LEADER: 'bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-300',
+		TEAM_MEMBER: 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
+	};
+
+	const roleLabels: Record<string, string> = {
+		ADMIN: 'Admin',
+		TEAM_LEADER: 'Team Leader',
+		TEAM_MEMBER: 'Team Member'
+	};
+
+	// Badge label and style
+	let badgeLabel = $derived.by(() => {
+		if (isTeamMember && userRole) {
+			return roleLabels[userRole] || userRole;
+		}
+		if (isCustomer) {
+			return 'Customer';
+		}
+		return null;
+	});
+
+	let badgeStyle = $derived.by(() => {
+		if (isTeamMember && userRole) {
+			return (
+				roleBadgeStyles[userRole] || 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+			);
+		}
+		if (isCustomer) {
+			return 'bg-accent-100 text-accent-700 dark:bg-accent-900 dark:text-accent-300';
+		}
+		return '';
+	});
+
+	let profileUrl = $derived(
+		isTeamMember ? '/team/profile' : isCustomer ? '/customer/profile' : '/profile'
+	);
+	let profileMenuOpen = $state(false);
+</script>
+
+<nav
+	class="fixed top-0 right-0 left-0 z-40 h-14 border-b border-theme bg-theme-secondary shadow-theme"
+>
+	<div class="flex h-full items-center justify-between px-4">
+		<div class="flex items-center gap-3">
+			<button
+				onclick={onMenuClick}
+				class="rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15"
+				aria-label="Open menu"
+			>
+				<svg
+					class="h-6 w-6 text-theme"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h16M4 18h16"
+					/>
+				</svg>
+			</button>
+			<a href={brandHref} class="flex items-center gap-2 text-lg font-semibold text-theme">
+				<img src={logoIcon} alt="Logo" class="h-8 w-8" />
+				{brandName}
+			</a>
+		</div>
+
+		<div class="flex items-center gap-2">
+			{#if isAuthenticated}
+				<!-- Messages - hidden on mobile -->
+				<a
+					href="/messages"
+					class="relative hidden rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 sm:block dark:hover:bg-white/10 dark:active:bg-white/15"
+					aria-label="Messages"
+				>
+					<svg
+						class="h-5 w-5 text-theme-secondary"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+					<UnreadBadge count={unreadCounts.messageCount} />
+				</a>
+
+				<!-- Notifications - hidden on mobile -->
+				<a
+					href="/notifications"
+					class="relative hidden rounded-lg p-2 transition-all duration-150 hover:bg-black/5 active:bg-black/10 sm:block dark:hover:bg-white/10 dark:active:bg-white/15"
+					aria-label="Notifications"
+				>
+					<svg
+						class="h-5 w-5 text-theme-secondary"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+						/>
+					</svg>
+					<UnreadBadge count={unreadCounts.notificationCount} />
+				</a>
+			{/if}
+
+			<!-- Theme Toggle - hidden on mobile -->
+			<div class="hidden sm:block">
+				<ThemeToggle />
+			</div>
+
+			{#if badgeLabel}
+				<div class="relative flex items-center gap-2">
+					<!-- Name - visible on desktop only -->
+					{#if displayName}
+						<span class="hidden text-sm font-medium text-theme lg:inline">{displayName}</span>
+					{/if}
+					<button
+						onclick={() => (profileMenuOpen = !profileMenuOpen)}
+						class="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-semibold tracking-wide uppercase {badgeStyle} cursor-pointer transition-opacity hover:opacity-80"
+					>
+						{badgeLabel}
+						<svg
+							class="h-3 w-3 transition-transform duration-150 {profileMenuOpen
+								? 'rotate-180'
+								: ''}"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 9l-7 7-7-7"
+							/>
+						</svg>
+					</button>
+
+					{#if profileMenuOpen}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="fixed inset-0 z-50"
+							onclick={() => (profileMenuOpen = false)}
+							onkeydown={(e) => e.key === 'Escape' && (profileMenuOpen = false)}
+						></div>
+						<div
+							class="absolute top-full right-0 z-50 mt-2 w-56 overflow-hidden rounded-lg border border-theme bg-theme-card shadow-theme-lg"
+						>
+							<!-- Name header - visible on tablet and mobile -->
+							{#if displayName}
+								<div class="border-b border-theme px-4 py-3 lg:hidden">
+									<div class="text-sm font-medium text-theme">{displayName}</div>
+									<div class="text-xs text-theme-muted">{badgeLabel}</div>
+								</div>
+							{/if}
+
+							<a
+								href={profileUrl}
+								onclick={() => (profileMenuOpen = false)}
+								class="flex items-center gap-2 interactive px-4 py-2.5 text-sm text-theme-secondary"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+									/>
+								</svg>
+								My Profile
+							</a>
+							<a
+								href="https://account.example.com/"
+								target="_blank"
+								rel="noopener noreferrer"
+								onclick={() => (profileMenuOpen = false)}
+								class="flex items-center gap-2 interactive px-4 py-2.5 text-sm text-theme-secondary"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+								</svg>
+								My Nexus Account
+								<svg
+									class="ml-auto h-3 w-3 text-theme-muted"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+									/>
+								</svg>
+							</a>
+
+							<!-- Mobile-only actions -->
+							<div class="border-t border-theme sm:hidden">
+								<button
+									onclick={() => {
+										profileMenuOpen = false;
+										goto('/messages');
+									}}
+									class="flex w-full items-center justify-between interactive px-4 py-2.5 text-sm text-theme-secondary"
+									aria-label="Messages"
+								>
+									<span class="flex items-center gap-2">
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+											/>
+										</svg>
+										Messages
+									</span>
+									{#if unreadCounts.messageCount > 0}
+										<span
+											class="flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1.5 text-xs font-semibold text-white"
+										>
+											{unreadCounts.messageCount > 99 ? '99+' : unreadCounts.messageCount}
+										</span>
+									{/if}
+								</button>
+								<button
+									onclick={() => {
+										profileMenuOpen = false;
+										goto('/notifications');
+									}}
+									class="flex w-full items-center justify-between interactive px-4 py-2.5 text-sm text-theme-secondary"
+									aria-label="Notifications"
+								>
+									<span class="flex items-center gap-2">
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+											/>
+										</svg>
+										Notifications
+									</span>
+									{#if unreadCounts.notificationCount > 0}
+										<span
+											class="flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1.5 text-xs font-semibold text-white"
+										>
+											{unreadCounts.notificationCount > 99 ? '99+' : unreadCounts.notificationCount}
+										</span>
+									{/if}
+								</button>
+								<button
+									onclick={() => {
+										theme.toggle();
+										profileMenuOpen = false;
+									}}
+									class="flex w-full items-center gap-2 interactive px-4 py-2.5 text-sm text-theme-secondary"
+								>
+									{#if theme.isDark}
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+											/>
+										</svg>
+										Light Mode
+									{:else}
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+											/>
+										</svg>
+										Dark Mode
+									{/if}
+								</button>
+							</div>
+
+							<!-- Sign Out -->
+							<div class="border-t border-theme">
+								<a
+									href="/logout"
+									onclick={() => (profileMenuOpen = false)}
+									class="flex items-center gap-2 px-4 py-2.5 text-sm text-error-600 transition-colors hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-900/20"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+										/>
+									</svg>
+									Sign Out
+								</a>
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+</nav>
diff --git a/src/lib/components/session/SessionContent.svelte b/src/lib/components/session/SessionContent.svelte
new file mode 100644
index 0000000..051fb87
--- /dev/null
+++ b/src/lib/components/session/SessionContent.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+	import type { SvelteSet } from 'svelte/reactivity';
+	import SessionHeader from './SessionHeader.svelte';
+	import SessionTabs from './SessionTabs.svelte';
+	import SessionSummaryTab from './SessionSummaryTab.svelte';
+	import SessionTasksTab from './SessionTasksTab.svelte';
+	import SessionMediaTab from './SessionMediaTab.svelte';
+	import SessionNotesTab from './SessionNotesTab.svelte';
+	import type {
+		SessionType,
+		SessionTab,
+		ExtendedTask,
+		AreaWithCompletions,
+		AreaWithTasks,
+		SessionPhoto,
+		SessionVideo,
+		SessionNote,
+		ServiceArea,
+		ProjectArea
+	} from './types';
+
+	interface TeamMember {
+		id: string;
+		fullName: string;
+		role: string;
+	}
+
+	interface SessionData {
+		isActive: boolean;
+		start: string;
+		end?: string | null;
+		durationSeconds?: number | null;
+		photos?: SessionPhoto[];
+		videos?: SessionVideo[];
+		notes?: SessionNote[];
+		completedTasks?: Array<{ taskId: string }>;
+	}
+
+	interface Props {
+		sessionType: SessionType;
+		isActive: boolean;
+		session: SessionData;
+		entityName: string;
+		scopeName?: string | null;
+		scopeDescription?: string | null;
+		addressInfo?: string | null;
+		teamMembers: TeamMember[];
+		areas: (ServiceArea | ProjectArea)[];
+
+		// Task state
+		tasks: ExtendedTask[];
+		selectedTaskIds: SvelteSet<string>;
+		completedTaskIds: SvelteSet<string>;
+		completedTasksByArea: AreaWithCompletions[];
+		readyToSubmitByArea: AreaWithTasks[];
+		availableTasksCount: number;
+
+		// Loading states (only needed for active sessions)
+		isSubmitting?: boolean;
+		isReverting?: boolean;
+		submittingTaskId?: string | null;
+		removingTaskId?: string | null;
+
+		// Session handlers
+		onClose?: () => void;
+		onRevert?: () => void;
+
+		// Task handlers
+		onToggleTask?: (id: string) => void;
+		onSubmitTask?: (id: string) => void;
+		onRemoveTask?: (id: string) => void;
+		onRemoveCompletedTask?: (id: string) => void;
+		onSubmitAllTasks?: () => void;
+		onClearSelection?: () => void;
+
+		// Note handlers (match SessionNotesTab signatures)
+		onAddNote?: (content: string, internal: boolean) => Promise<void>;
+		onUpdateNote?: (noteId: string, content: string, internal: boolean) => Promise<void>;
+		onDeleteNote?: (noteId: string) => Promise<void>;
+
+		// Media handlers (match SessionMediaTab signatures)
+		onUploadPhoto?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
+		onUploadVideo?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
+		onUpdatePhoto?: (
+			photoId: string,
+			title: string,
+			notes: string,
+			internal: boolean
+		) => Promise<void>;
+		onUpdateVideo?: (
+			videoId: string,
+			title: string,
+			notes: string,
+			internal: boolean
+		) => Promise<void>;
+		onDeletePhoto?: (photoId: string) => Promise<void>;
+		onDeleteVideo?: (videoId: string) => Promise<void>;
+
+		getTeamMemberName: (id: string | null | undefined) => string;
+	}
+
+	let {
+		sessionType,
+		isActive,
+		session,
+		entityName,
+		scopeName,
+		scopeDescription,
+		addressInfo,
+		teamMembers,
+		areas,
+		tasks,
+		selectedTaskIds,
+		completedTaskIds,
+		completedTasksByArea,
+		readyToSubmitByArea,
+		availableTasksCount,
+		isSubmitting = false,
+		isReverting = false,
+		submittingTaskId = null,
+		removingTaskId = null,
+		onClose,
+		onRevert,
+		onToggleTask,
+		onSubmitTask,
+		onRemoveTask,
+		onRemoveCompletedTask,
+		onSubmitAllTasks,
+		onClearSelection,
+		onAddNote,
+		onUpdateNote,
+		onDeleteNote,
+		onUploadPhoto,
+		onUploadVideo,
+		onUpdatePhoto,
+		onUpdateVideo,
+		onDeletePhoto,
+		onDeleteVideo,
+		getTeamMemberName
+	}: Props = $props();
+
+	// Internal tab state
+	let activeTab = $state<SessionTab>('summary');
+
+	// Computed tab counts
+	let tabCounts = $derived({
+		tasks: tasks.length,
+		photos: session.photos?.length || 0,
+		videos: session.videos?.length || 0,
+		notes: session.notes?.length || 0
+	});
+
+	// Check if can close (has at least one completed task)
+	let canClose = $derived(completedTaskIds.size > 0);
+
+	// No-op handler for read-only mode
+	const noop = () => {};
+</script>
+
+<SessionHeader
+	{sessionType}
+	{entityName}
+	{scopeName}
+	scopeDescription={isActive ? scopeDescription : undefined}
+	{isActive}
+	{canClose}
+	{isSubmitting}
+	{isReverting}
+	onClose={isActive ? onClose : undefined}
+	onRevert={isActive ? onRevert : undefined}
+/>
+
+<SessionTabs
+	{activeTab}
+	counts={tabCounts}
+	hasScope={areas.length > 0}
+	onTabChange={(tab) => (activeTab = tab)}
+/>
+
+{#if activeTab === 'summary'}
+	<SessionSummaryTab
+		{sessionType}
+		stats={{
+			completedTasks: session.completedTasks?.length || 0,
+			photos: session.photos?.length || 0,
+			videos: session.videos?.length || 0,
+			notes: session.notes?.length || 0
+		}}
+		sessionDetails={{
+			start: session.start,
+			end: session.end,
+			isActive,
+			durationSeconds: session.durationSeconds
+		}}
+		{entityName}
+		{addressInfo}
+		{teamMembers}
+	/>
+{:else if activeTab === 'tasks'}
+	<SessionTasksTab
+		{sessionType}
+		{isActive}
+		hasScope={areas.length > 0}
+		{selectedTaskIds}
+		{completedTasksByArea}
+		{readyToSubmitByArea}
+		{availableTasksCount}
+		{tasks}
+		{completedTaskIds}
+		{areas}
+		isSubmitting={isActive ? isSubmitting : undefined}
+		submittingTaskId={isActive ? submittingTaskId : undefined}
+		removingTaskId={isActive ? removingTaskId : undefined}
+		{getTeamMemberName}
+		onToggleTask={isActive && onToggleTask ? onToggleTask : noop}
+		onSubmitTask={isActive && onSubmitTask ? onSubmitTask : noop}
+		onRemoveTask={isActive && onRemoveTask ? onRemoveTask : noop}
+		onRemoveCompletedTask={isActive && onRemoveCompletedTask ? onRemoveCompletedTask : noop}
+		onSubmitAllTasks={isActive && onSubmitAllTasks ? onSubmitAllTasks : noop}
+		onClearSelection={isActive && onClearSelection ? onClearSelection : noop}
+	/>
+{:else if activeTab === 'media'}
+	<SessionMediaTab
+		photos={session.photos || []}
+		videos={session.videos || []}
+		{isActive}
+		{getTeamMemberName}
+		onUploadPhoto={isActive ? onUploadPhoto : undefined}
+		onUploadVideo={isActive ? onUploadVideo : undefined}
+		onUpdatePhoto={isActive ? onUpdatePhoto : undefined}
+		onUpdateVideo={isActive ? onUpdateVideo : undefined}
+		onDeletePhoto={isActive ? onDeletePhoto : undefined}
+		onDeleteVideo={isActive ? onDeleteVideo : undefined}
+	/>
+{:else if activeTab === 'notes'}
+	<SessionNotesTab
+		notes={session.notes || []}
+		{isActive}
+		{getTeamMemberName}
+		onAdd={isActive ? onAddNote : undefined}
+		onUpdate={isActive ? onUpdateNote : undefined}
+		onDelete={isActive ? onDeleteNote : undefined}
+	/>
+{/if}
diff --git a/src/lib/components/session/SessionHeader.svelte b/src/lib/components/session/SessionHeader.svelte
new file mode 100644
index 0000000..85ead5b
--- /dev/null
+++ b/src/lib/components/session/SessionHeader.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { SessionType } from './types';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Props {
+		sessionType: SessionType;
+		entityName?: string;
+		scopeName?: string | null;
+		scopeDescription?: string | null;
+		isActive: boolean;
+		canClose?: boolean;
+		isSubmitting?: boolean;
+		isReverting?: boolean;
+		onClose?: () => void;
+		onRevert?: () => void;
+	}
+
+	let {
+		sessionType,
+		entityName,
+		scopeName,
+		scopeDescription,
+		isActive,
+		canClose = false,
+		isSubmitting = false,
+		isReverting = false,
+		onClose,
+		onRevert
+	}: Props = $props();
+
+	// Color classes based on session type
+	let colorClasses = $derived(
+		sessionType === 'service'
+			? {
+					bg: 'bg-secondary-500/10',
+					border: 'border-secondary-500/20',
+					text: 'text-secondary-600 dark:text-secondary-400',
+					badge: 'bg-secondary-500/20 text-secondary-700 dark:text-secondary-300'
+				}
+			: {
+					bg: 'bg-accent-500/10',
+					border: 'border-accent-500/20',
+					text: 'text-accent-600 dark:text-accent-400',
+					badge: 'bg-accent-500/20 text-accent-700 dark:text-accent-300'
+				}
+	);
+</script>
+
+<div class="mb-6 rounded-xl {colorClasses.bg} border {colorClasses.border} p-4">
+	<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+		<div class="min-w-0 flex-1">
+			{#if entityName}
+				<h2 class="text-lg font-semibold {colorClasses.text} truncate">{entityName}</h2>
+			{/if}
+
+			{#if scopeName}
+				<div class="mt-3">
+					<span
+						class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium {colorClasses.badge}"
+					>
+						<svg class="h-3.5 w-3.5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+							/>
+						</svg>
+						{scopeName}
+					</span>
+					{#if scopeDescription}
+						<p class="mt-2 text-xs text-theme-muted">{scopeDescription}</p>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		{#if isActive && onClose}
+			<div class="flex-shrink-0 space-y-2">
+				<button
+					type="button"
+					onclick={onClose}
+					disabled={!canClose || isSubmitting || isReverting}
+					class="btn-primary w-full disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+				>
+					{#if isSubmitting}
+						<span class="flex items-center gap-2">
+							<IconSpinner class="h-4 w-4" />
+							Closing...
+						</span>
+					{:else}
+						Close Session
+					{/if}
+				</button>
+				{#if !canClose}
+					<p class="text-center text-xs text-theme-muted sm:text-right">
+						Complete at least one task to close
+					</p>
+				{/if}
+				{#if onRevert}
+					<button
+						type="button"
+						onclick={onRevert}
+						disabled={isSubmitting || isReverting}
+						class="w-full rounded-lg px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto dark:text-red-400 dark:hover:bg-red-900/20"
+					>
+						{#if isReverting}
+							<span class="flex items-center justify-center gap-2">
+								<IconSpinner class="h-4 w-4" />
+								Cancelling...
+							</span>
+						{:else}
+							Cancel Session
+						{/if}
+					</button>
+				{/if}
+			</div>
+		{:else if !isActive}
+			<div class="flex-shrink-0">
+				<span
+					class="inline-flex items-center gap-1.5 rounded-full bg-theme-secondary px-3 py-1.5 text-sm font-medium text-theme-secondary"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+					Session Closed
+				</span>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/session/SessionMediaTab.svelte b/src/lib/components/session/SessionMediaTab.svelte
new file mode 100644
index 0000000..8cee1f3
--- /dev/null
+++ b/src/lib/components/session/SessionMediaTab.svelte
@@ -0,0 +1,1123 @@
+<script lang="ts">
+	import type { SessionPhoto, SessionVideo } from './types';
+	import { getAuthenticatedImageUrl } from './types';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	interface StagedPhoto {
+		id: string;
+		file: File;
+		previewUrl: string;
+		title: string;
+		notes: string;
+		internal: boolean;
+		uploading: boolean;
+		error?: string;
+	}
+
+	interface Props {
+		photos: SessionPhoto[];
+		videos: SessionVideo[];
+		isActive: boolean;
+		getTeamMemberName: (id: string | null | undefined) => string;
+		onUploadPhoto?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
+		onUploadVideo?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
+		onUpdatePhoto?: (
+			photoId: string,
+			title: string,
+			notes: string,
+			internal: boolean
+		) => Promise<void>;
+		onUpdateVideo?: (
+			videoId: string,
+			title: string,
+			notes: string,
+			internal: boolean
+		) => Promise<void>;
+		onDeletePhoto?: (photoId: string) => Promise<void>;
+		onDeleteVideo?: (videoId: string) => Promise<void>;
+	}
+
+	let {
+		photos,
+		videos,
+		isActive,
+		getTeamMemberName,
+		onUploadPhoto,
+		onUploadVideo,
+		onUpdatePhoto,
+		onUpdateVideo,
+		onDeletePhoto,
+		onDeleteVideo
+	}: Props = $props();
+
+	// Store authenticated URLs
+	let authenticatedImageUrls = new SvelteMap<string, string>();
+
+	// Track URLs that are currently being fetched to prevent duplicates
+	let fetchingUrls = new SvelteSet<string>();
+
+	// Load authenticated image URLs when photos/videos change
+	$effect(() => {
+		// Load photo URLs (both thumbnail and full image)
+		photos?.forEach(async (photo) => {
+			// Fetch thumbnail URL
+			const thumbnailUrl = photo.thumbnail?.url || photo.image.url;
+			if (
+				thumbnailUrl &&
+				!authenticatedImageUrls.has(thumbnailUrl) &&
+				!fetchingUrls.has(thumbnailUrl)
+			) {
+				fetchingUrls.add(thumbnailUrl);
+				const authUrl = await getAuthenticatedImageUrl(thumbnailUrl);
+				authenticatedImageUrls.set(thumbnailUrl, authUrl);
+				fetchingUrls.delete(thumbnailUrl);
+			}
+			// Also fetch full image URL if different from thumbnail
+			if (
+				photo.image.url !== thumbnailUrl &&
+				!authenticatedImageUrls.has(photo.image.url) &&
+				!fetchingUrls.has(photo.image.url)
+			) {
+				fetchingUrls.add(photo.image.url);
+				const authUrl = await getAuthenticatedImageUrl(photo.image.url);
+				authenticatedImageUrls.set(photo.image.url, authUrl);
+				fetchingUrls.delete(photo.image.url);
+			}
+		});
+
+		// Load video thumbnail URLs and video URLs
+		videos?.forEach(async (video) => {
+			// Fetch thumbnail
+			if (
+				video.thumbnail?.url &&
+				!authenticatedImageUrls.has(video.thumbnail.url) &&
+				!fetchingUrls.has(video.thumbnail.url)
+			) {
+				fetchingUrls.add(video.thumbnail.url);
+				const authUrl = await getAuthenticatedImageUrl(video.thumbnail.url);
+				authenticatedImageUrls.set(video.thumbnail.url, authUrl);
+				fetchingUrls.delete(video.thumbnail.url);
+			}
+			// Fetch video URL
+			if (
+				video.video?.url &&
+				!authenticatedImageUrls.has(video.video.url) &&
+				!fetchingUrls.has(video.video.url)
+			) {
+				fetchingUrls.add(video.video.url);
+				const authUrl = await getAuthenticatedImageUrl(video.video.url);
+				authenticatedImageUrls.set(video.video.url, authUrl);
+				fetchingUrls.delete(video.video.url);
+			}
+		});
+	});
+
+	// Open media in new tab
+	function openInNewTab(url: string | undefined) {
+		if (!url) return;
+		const authUrl = authenticatedImageUrls.get(url);
+		if (authUrl) {
+			window.open(authUrl, '_blank');
+		}
+	}
+
+	// Upload form state
+	let showUploadForm = $state(false);
+	let uploadType = $state<'photo' | 'video'>('photo');
+	let isUploading = $state(false);
+
+	// Bulk photo upload state
+	let stagedPhotos = $state<StagedPhoto[]>([]);
+	let defaultInternal = $state(true);
+	let isConvertingPhotos = $state(false);
+	let uploadProgress = $state<{ completed: number; total: number; failed: number } | null>(null);
+
+	// Single video upload state (videos stay single-file)
+	let uploadVideoFile = $state<File | null>(null);
+	let uploadVideoTitle = $state('');
+	let uploadVideoNotes = $state('');
+	let uploadVideoInternal = $state(true);
+	let uploadVideoPreviewUrl = $state<string | null>(null);
+
+	// Edit state
+	let editingId = $state<string | null>(null);
+	let editTitle = $state('');
+	let editNotes = $state('');
+	let editInternal = $state(false);
+	let isEditing = $state(false);
+
+	// Delete state
+	let deletingPhotoId = $state<string | null>(null);
+	let deletingVideoId = $state<string | null>(null);
+
+	function openUploadForm(type: 'photo' | 'video') {
+		uploadType = type;
+		showUploadForm = true;
+		if (type === 'video') {
+			uploadVideoFile = null;
+			uploadVideoTitle = '';
+			uploadVideoNotes = '';
+			uploadVideoInternal = true;
+		}
+		// Photos: stagedPhotos persists, user can add more
+	}
+
+	function closeUploadForm() {
+		showUploadForm = false;
+		// Clear staged photos and revoke URLs
+		for (const photo of stagedPhotos) {
+			URL.revokeObjectURL(photo.previewUrl);
+		}
+		stagedPhotos = [];
+		// Clear video state
+		if (uploadVideoPreviewUrl) {
+			URL.revokeObjectURL(uploadVideoPreviewUrl);
+			uploadVideoPreviewUrl = null;
+		}
+		uploadVideoFile = null;
+		uploadVideoTitle = '';
+		uploadVideoNotes = '';
+	}
+
+	// Staged photo management
+	function removeStagedPhoto(id: string) {
+		const photo = stagedPhotos.find((p) => p.id === id);
+		if (photo) {
+			URL.revokeObjectURL(photo.previewUrl);
+		}
+		stagedPhotos = stagedPhotos.filter((p) => p.id !== id);
+	}
+
+	function updateStagedPhoto(
+		id: string,
+		field: 'title' | 'notes' | 'internal',
+		value: string | boolean
+	) {
+		stagedPhotos = stagedPhotos.map((p) => (p.id === id ? { ...p, [field]: value } : p));
+	}
+
+	function clearAllStaged() {
+		for (const photo of stagedPhotos) {
+			URL.revokeObjectURL(photo.previewUrl);
+		}
+		stagedPhotos = [];
+	}
+
+	async function handleUpload() {
+		if (uploadType === 'photo') {
+			await handleBulkPhotoUpload();
+		} else {
+			await handleVideoUpload();
+		}
+	}
+
+	async function handleBulkPhotoUpload() {
+		if (stagedPhotos.length === 0 || !onUploadPhoto) return;
+
+		isUploading = true;
+		const total = stagedPhotos.length;
+		uploadProgress = { completed: 0, total, failed: 0 };
+
+		// Upload in chunks of 2 to avoid overwhelming mobile connections
+		const CHUNK_SIZE = 2;
+		const photosToUpload = [...stagedPhotos];
+
+		for (let i = 0; i < photosToUpload.length; i += CHUNK_SIZE) {
+			const chunk = photosToUpload.slice(i, i + CHUNK_SIZE);
+
+			// Mark chunk as uploading
+			const chunkIds = new Set(chunk.map((p) => p.id));
+			stagedPhotos = stagedPhotos.map((p) =>
+				chunkIds.has(p.id) ? { ...p, uploading: true, error: undefined } : p
+			);
+
+			// Upload chunk in parallel
+			const chunkResults = await Promise.allSettled(
+				chunk.map(async (photo) => {
+					try {
+						await onUploadPhoto(
+							photo.file,
+							photo.title || photo.file.name,
+							photo.notes,
+							photo.internal
+						);
+						// Remove successful upload
+						URL.revokeObjectURL(photo.previewUrl);
+						stagedPhotos = stagedPhotos.filter((p) => p.id !== photo.id);
+						uploadProgress = {
+							...uploadProgress!,
+							completed: uploadProgress!.completed + 1
+						};
+						return { id: photo.id, success: true };
+					} catch (err) {
+						const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+						stagedPhotos = stagedPhotos.map((p) =>
+							p.id === photo.id ? { ...p, uploading: false, error: errorMessage } : p
+						);
+						uploadProgress = {
+							...uploadProgress!,
+							completed: uploadProgress!.completed + 1,
+							failed: uploadProgress!.failed + 1
+						};
+						return { id: photo.id, success: false, error: err };
+					}
+				})
+			);
+		}
+
+		isUploading = false;
+		uploadProgress = null;
+
+		// Close form if all succeeded
+		if (stagedPhotos.length === 0) {
+			closeUploadForm();
+		}
+	}
+
+	async function handleVideoUpload() {
+		if (!uploadVideoFile || !onUploadVideo) return;
+
+		isUploading = true;
+		try {
+			await onUploadVideo(
+				uploadVideoFile,
+				uploadVideoTitle || uploadVideoFile.name,
+				uploadVideoNotes,
+				uploadVideoInternal
+			);
+			closeUploadForm();
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+			console.error('Upload failed:', err);
+			alert(`Video upload failed: ${errorMessage}`);
+		} finally {
+			isUploading = false;
+		}
+	}
+
+	function startEdit(id: string, title: string, notes: string, internal: boolean) {
+		editingId = id;
+		editTitle = title;
+		editNotes = notes;
+		editInternal = internal;
+	}
+
+	function cancelEdit() {
+		editingId = null;
+		editTitle = '';
+		editNotes = '';
+		editInternal = false;
+	}
+
+	async function savePhotoEdit(photoId: string) {
+		if (!onUpdatePhoto) return;
+		isEditing = true;
+		try {
+			await onUpdatePhoto(photoId, editTitle, editNotes, editInternal);
+			cancelEdit();
+		} catch (err) {
+			console.error('Failed to update photo:', err);
+		} finally {
+			isEditing = false;
+		}
+	}
+
+	async function saveVideoEdit(videoId: string) {
+		if (!onUpdateVideo) return;
+		isEditing = true;
+		try {
+			await onUpdateVideo(videoId, editTitle, editNotes, editInternal);
+			cancelEdit();
+		} catch (err) {
+			console.error('Failed to update video:', err);
+		} finally {
+			isEditing = false;
+		}
+	}
+
+	async function handleDeletePhoto(photoId: string) {
+		if (!onDeletePhoto || !confirm('Are you sure you want to delete this photo?')) return;
+		deletingPhotoId = photoId;
+		try {
+			await onDeletePhoto(photoId);
+		} catch (err) {
+			console.error('Failed to delete photo:', err);
+		} finally {
+			deletingPhotoId = null;
+		}
+	}
+
+	async function handleDeleteVideo(videoId: string) {
+		if (!onDeleteVideo || !confirm('Are you sure you want to delete this video?')) return;
+		deletingVideoId = videoId;
+		try {
+			await onDeleteVideo(videoId);
+		} catch (err) {
+			console.error('Failed to delete video:', err);
+		} finally {
+			deletingVideoId = null;
+		}
+	}
+
+	// Helper function to create preview URL with HEIC support
+	async function createPreviewUrl(file: File): Promise<string> {
+		// Check if file is HEIC by extension or MIME type
+		const isHeic =
+			file.name.toLowerCase().endsWith('.heic') ||
+			file.name.toLowerCase().endsWith('.heif') ||
+			file.type === 'image/heic' ||
+			file.type === 'image/heif';
+
+		if (isHeic) {
+			try {
+				// Dynamic import - only loads in browser to avoid SSR crash
+				const heic2any = (await import('heic2any')).default;
+				// Convert HEIC to JPEG for browser preview
+				const convertedBlob = await heic2any({
+					blob: file,
+					toType: 'image/jpeg',
+					quality: 0.8
+				});
+				// heic2any can return Blob or Blob[], handle both
+				const blob = Array.isArray(convertedBlob) ? convertedBlob[0] : convertedBlob;
+				return URL.createObjectURL(blob);
+			} catch (err) {
+				console.error('Failed to convert HEIC for preview:', err);
+				// Fallback: try regular blob URL (won't work but won't crash)
+				return URL.createObjectURL(file);
+			}
+		}
+
+		// Not HEIC, use regular blob URL
+		return URL.createObjectURL(file);
+	}
+
+	async function handlePhotoFileChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		if (target.files && target.files.length > 0) {
+			const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB limit for mobile compatibility
+			const validFiles: File[] = [];
+			const rejectedFiles: string[] = [];
+
+			// Validate each file
+			for (const file of Array.from(target.files)) {
+				if (file.size > MAX_FILE_SIZE) {
+					const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
+					rejectedFiles.push(`${file.name} (${sizeMB}MB - max 10MB)`);
+				} else {
+					validFiles.push(file);
+				}
+			}
+
+			// Show warning if any files were rejected
+			if (rejectedFiles.length > 0) {
+				alert(
+					`The following files are too large and were not added:\n\n${rejectedFiles.join('\n')}\n\nPlease use smaller images or compress them before uploading.`
+				);
+			}
+
+			// Stage valid files (async to handle HEIC conversion)
+			if (validFiles.length > 0) {
+				isConvertingPhotos = true;
+				try {
+					const newPhotos: StagedPhoto[] = await Promise.all(
+						validFiles.map(async (file) => ({
+							id: crypto.randomUUID(),
+							file,
+							previewUrl: await createPreviewUrl(file),
+							title: file.name.replace(/\.[^/.]+$/, ''),
+							notes: '',
+							internal: defaultInternal,
+							uploading: false
+						}))
+					);
+					stagedPhotos = [...stagedPhotos, ...newPhotos];
+				} finally {
+					isConvertingPhotos = false;
+				}
+			}
+
+			// Reset input so same files can be selected again
+			target.value = '';
+		}
+	}
+
+	function handleVideoFileChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		if (target.files && target.files[0]) {
+			const file = target.files[0];
+			const MAX_VIDEO_SIZE = 50 * 1024 * 1024; // 50MB limit for videos
+
+			// Validate file size
+			if (file.size > MAX_VIDEO_SIZE) {
+				const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
+				alert(
+					`Video file is too large (${sizeMB}MB).\n\nMaximum video size is 50MB. Please compress the video or use a shorter clip.`
+				);
+				target.value = '';
+				return;
+			}
+
+			uploadVideoFile = file;
+			if (!uploadVideoTitle) {
+				uploadVideoTitle = uploadVideoFile.name.replace(/\.[^/.]+$/, '');
+			}
+			// Create preview URL for local file
+			if (uploadVideoPreviewUrl) {
+				URL.revokeObjectURL(uploadVideoPreviewUrl);
+			}
+			uploadVideoPreviewUrl = URL.createObjectURL(uploadVideoFile);
+		}
+	}
+
+	// Helper functions for inline event handlers (TypeScript casting doesn't work in templates)
+	function handleStagedTitleInput(id: string, event: Event) {
+		const target = event.target as HTMLInputElement;
+		updateStagedPhoto(id, 'title', target.value);
+	}
+
+	function handleStagedNotesInput(id: string, event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		updateStagedPhoto(id, 'notes', target.value);
+	}
+
+	function handleStagedInternalChange(id: string, event: Event) {
+		const target = event.target as HTMLInputElement;
+		updateStagedPhoto(id, 'internal', target.checked);
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Upload Buttons -->
+	{#if isActive}
+		<div class="flex gap-3">
+			<button
+				type="button"
+				onclick={() => openUploadForm('photo')}
+				class="flex flex-1 items-center justify-center gap-2 rounded-lg border-2 border-dashed border-theme p-4 text-theme-muted transition-colors hover:border-primary-500 hover:text-primary-500"
+			>
+				<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				Add Photos
+			</button>
+			<button
+				type="button"
+				onclick={() => openUploadForm('video')}
+				class="flex flex-1 items-center justify-center gap-2 rounded-lg border-2 border-dashed border-theme p-4 text-theme-muted transition-colors hover:border-primary-500 hover:text-primary-500"
+			>
+				<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+					/>
+				</svg>
+				Add Video
+			</button>
+		</div>
+	{/if}
+
+	<!-- Upload Form Modal -->
+	{#if showUploadForm}
+		<div class="card-padded border-2 border-primary-500/30 bg-primary-500/5">
+			<h3 class="mb-4 font-medium text-theme">
+				Upload {uploadType === 'photo' ? 'Photos' : 'Video'}
+			</h3>
+
+			{#if uploadType === 'photo'}
+				<!-- Bulk Photo Upload -->
+				<div class="space-y-4">
+					<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+						<input
+							id="upload-photos"
+							type="file"
+							accept="image/*"
+							multiple
+							onchange={handlePhotoFileChange}
+							class="block w-full text-sm text-theme file:mr-4 file:rounded-lg file:border-0 file:bg-primary-500/10 file:px-4 file:py-2 file:text-sm file:font-medium file:text-primary-600 hover:file:bg-primary-500/20 sm:w-auto"
+						/>
+						<label class="flex items-center gap-2">
+							<input
+								type="checkbox"
+								bind:checked={defaultInternal}
+								class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
+							/>
+							<span class="text-sm text-theme">Internal by default</span>
+						</label>
+					</div>
+
+					<!-- Converting Photos Indicator -->
+					{#if isConvertingPhotos}
+						<div class="flex items-center justify-center gap-3 rounded-lg border border-theme bg-theme-card p-4">
+							<IconSpinner class="h-5 w-5 text-primary-500" />
+							<span class="text-sm text-theme">Converting images for preview...</span>
+						</div>
+					{/if}
+
+					<!-- Staged Photos Grid -->
+					{#if stagedPhotos.length > 0}
+						<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							{#each stagedPhotos as photo (photo.id)}
+								<div
+									class="space-y-3 rounded-lg border border-theme bg-theme-card p-3 {photo.error
+										? 'border-red-500'
+										: ''}"
+								>
+									<!-- Thumbnail and remove button -->
+									<div class="flex items-start justify-between gap-2">
+										<img
+											src={photo.previewUrl}
+											alt={photo.title}
+											class="h-20 w-20 shrink-0 rounded object-cover"
+										/>
+										<button
+											type="button"
+											onclick={() => removeStagedPhoto(photo.id)}
+											disabled={photo.uploading}
+											class="shrink-0 rounded p-1 text-theme-muted hover:bg-black/5 hover:text-red-500 disabled:opacity-50 dark:hover:bg-white/10"
+											aria-label="Remove photo"
+										>
+											{#if photo.uploading}
+												<IconSpinner class="h-5 w-5" />
+											{:else}
+												<svg
+													class="h-5 w-5"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M6 18L18 6M6 6l12 12"
+													/>
+												</svg>
+											{/if}
+										</button>
+									</div>
+
+									<!-- Title -->
+									<input
+										type="text"
+										value={photo.title}
+										oninput={(e) => handleStagedTitleInput(photo.id, e)}
+										placeholder="Title..."
+										disabled={photo.uploading}
+										class="w-full rounded border border-theme bg-theme px-2 py-1 text-sm text-theme placeholder:text-theme-muted focus:border-primary-500 focus:outline-none disabled:opacity-50"
+									/>
+
+									<!-- Notes -->
+									<textarea
+										oninput={(e) => handleStagedNotesInput(photo.id, e)}
+										placeholder="Notes..."
+										rows="2"
+										disabled={photo.uploading}
+										class="w-full rounded border border-theme bg-theme px-2 py-1 text-sm text-theme placeholder:text-theme-muted focus:border-primary-500 focus:outline-none disabled:opacity-50"
+										>{photo.notes}</textarea
+									>
+
+									<!-- Internal checkbox and error -->
+									<div class="flex items-center justify-between">
+										<label class="flex items-center gap-2">
+											<input
+												type="checkbox"
+												checked={photo.internal}
+												onchange={(e) => handleStagedInternalChange(photo.id, e)}
+												disabled={photo.uploading}
+												class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500 disabled:opacity-50"
+											/>
+											<span class="text-xs text-theme-muted">Internal</span>
+										</label>
+										{#if photo.error}
+											<span class="text-xs text-red-500">{photo.error}</span>
+										{/if}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+
+					<!-- Upload Progress Indicator -->
+					{#if uploadProgress}
+						<div class="rounded-lg border border-primary-500/30 bg-primary-500/5 p-4">
+							<div class="mb-2 flex items-center justify-between text-sm">
+								<span class="font-medium text-theme">
+									Uploading {uploadProgress.completed} of {uploadProgress.total}...
+								</span>
+								{#if uploadProgress.failed > 0}
+									<span class="text-red-500">{uploadProgress.failed} failed</span>
+								{/if}
+							</div>
+							<div class="h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+								<div
+									class="h-full rounded-full bg-primary-500 transition-all duration-300"
+									style="width: {(uploadProgress.completed / uploadProgress.total) * 100}%"
+								></div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Action buttons -->
+					<div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
+						<button
+							type="button"
+							onclick={closeUploadForm}
+							disabled={isUploading}
+							class="btn-ghost disabled:opacity-50"
+						>
+							Cancel
+						</button>
+						<div class="flex gap-2">
+							{#if stagedPhotos.length > 1 && !isUploading}
+								<button
+									type="button"
+									onclick={clearAllStaged}
+									class="btn-ghost text-red-500 hover:text-red-600"
+								>
+									Clear All
+								</button>
+							{/if}
+							<button
+								type="button"
+								onclick={handleUpload}
+								disabled={stagedPhotos.length === 0 || isUploading}
+								class="btn-primary disabled:opacity-50"
+							>
+								{isUploading
+									? 'Uploading...'
+									: `Upload ${stagedPhotos.length} Photo${stagedPhotos.length !== 1 ? 's' : ''}`}
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<!-- Single Video Upload -->
+				<div class="space-y-4">
+					<div>
+						<label for="upload-video" class="mb-1 block text-sm font-medium text-theme">File</label>
+						<input
+							id="upload-video"
+							type="file"
+							accept="video/*"
+							onchange={handleVideoFileChange}
+							class="block w-full text-sm text-theme file:mr-4 file:rounded-lg file:border-0 file:bg-primary-500/10 file:px-4 file:py-2 file:text-sm file:font-medium file:text-primary-600 hover:file:bg-primary-500/20"
+						/>
+						{#if uploadVideoPreviewUrl}
+							<div class="mt-3 overflow-hidden rounded-lg bg-theme-secondary">
+								<!-- svelte-ignore a11y_media_has_caption -->
+								<video src={uploadVideoPreviewUrl} class="max-h-48 w-full object-contain" controls
+								></video>
+							</div>
+						{/if}
+					</div>
+
+					<div>
+						<label for="upload-video-title" class="mb-1 block text-sm font-medium text-theme"
+							>Title</label
+						>
+						<input
+							id="upload-video-title"
+							type="text"
+							bind:value={uploadVideoTitle}
+							placeholder="Enter a title..."
+							class="w-full rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+						/>
+					</div>
+
+					<div>
+						<label for="upload-video-notes" class="mb-1 block text-sm font-medium text-theme"
+							>Notes</label
+						>
+						<textarea
+							id="upload-video-notes"
+							bind:value={uploadVideoNotes}
+							placeholder="Add notes..."
+							rows="2"
+							class="w-full rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+						></textarea>
+					</div>
+
+					<label class="flex items-center gap-2">
+						<input
+							type="checkbox"
+							bind:checked={uploadVideoInternal}
+							class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
+						/>
+						<span class="text-sm text-theme">Internal only (not visible to customer)</span>
+					</label>
+
+					<div class="flex gap-3">
+						<button
+							type="button"
+							onclick={closeUploadForm}
+							disabled={isUploading}
+							class="btn-ghost flex-1 disabled:opacity-50"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onclick={handleUpload}
+							disabled={!uploadVideoFile || isUploading}
+							class="btn-primary flex-1 disabled:opacity-50"
+						>
+							{isUploading ? 'Uploading...' : 'Upload'}
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Photos Grid -->
+	{#if photos.length > 0}
+		<div class="card-padded">
+			<h3 class="mb-4 font-medium text-theme">Photos ({photos.length})</h3>
+			<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+				{#each photos as photo (photo.id)}
+					{@const thumbnailUrl = photo.thumbnail?.url || photo.image.url}
+					<div class="group relative overflow-hidden rounded-lg bg-theme-secondary">
+						<button
+							type="button"
+							onclick={() => openInNewTab(photo.image.url)}
+							class="w-full cursor-pointer focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none"
+							aria-label="Open {photo.title || 'photo'} in new tab"
+						>
+							{#if thumbnailUrl && authenticatedImageUrls.has(thumbnailUrl)}
+								<img
+									src={authenticatedImageUrls.get(thumbnailUrl)}
+									alt={photo.title || 'Photo'}
+									class="aspect-square w-full object-cover"
+								/>
+							{:else if thumbnailUrl}
+								<!-- Loading placeholder while fetching authenticated URL -->
+								<span
+									class="flex aspect-square w-full items-center justify-center bg-theme-secondary"
+								>
+									<span class="h-8 w-8 animate-pulse rounded-full bg-gray-300 dark:bg-gray-600"
+									></span>
+								</span>
+							{:else}
+								<span
+									class="flex aspect-square w-full items-center justify-center text-theme-muted"
+								>
+									<svg
+										class="h-12 w-12"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="1.5"
+											d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+								</span>
+							{/if}
+						</button>
+
+						{#if photo.internal}
+							<span
+								class="absolute top-2 left-2 rounded bg-warning-500/90 px-1.5 py-0.5 text-xs font-medium text-white"
+							>
+								Internal
+							</span>
+						{/if}
+
+						{#if isActive}
+							<div
+								class="absolute top-2 right-2 flex gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+							>
+								<button
+									type="button"
+									onclick={(e) => {
+										e.stopPropagation();
+										startEdit(photo.id, photo.title || '', photo.notes || '', photo.internal);
+									}}
+									class="rounded bg-white/90 p-1.5 text-gray-600 hover:text-primary-500 dark:bg-gray-800/90 dark:text-gray-300"
+									aria-label="Edit photo"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+										/>
+									</svg>
+								</button>
+								<button
+									type="button"
+									onclick={(e) => {
+										e.stopPropagation();
+										handleDeletePhoto(photo.id);
+									}}
+									disabled={deletingPhotoId === photo.id}
+									class="rounded bg-white/90 p-1.5 text-gray-600 hover:text-red-500 disabled:opacity-50 dark:bg-gray-800/90 dark:text-gray-300"
+									aria-label="Delete photo"
+								>
+									{#if deletingPhotoId === photo.id}
+										<IconSpinner class="h-4 w-4" />
+									{:else}
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									{/if}
+								</button>
+							</div>
+						{/if}
+
+						<div
+							class="absolute right-0 bottom-0 left-0 bg-linear-to-t from-black/70 to-transparent p-2"
+						>
+							<p class="truncate text-xs text-white">{photo.title || 'Untitled'}</p>
+							{#if photo.notes}
+								<p class="truncate text-xs text-white/80">{photo.notes}</p>
+							{/if}
+							<p class="text-xs text-white/70">
+								{getTeamMemberName(
+									'uploadedByTeamProfileId' in photo ? photo.uploadedByTeamProfileId : null
+								)}
+							</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Videos Grid -->
+	{#if videos.length > 0}
+		<div class="card-padded">
+			<h3 class="mb-4 font-medium text-theme">Videos ({videos.length})</h3>
+			<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+				{#each videos as video (video.id)}
+					<div class="group relative overflow-hidden rounded-lg bg-theme-secondary">
+						<button
+							type="button"
+							onclick={() => openInNewTab(video.video?.url)}
+							class="w-full cursor-pointer focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none"
+							aria-label="Open {video.title || 'video'} in new tab"
+						>
+							{#if video.thumbnail?.url && authenticatedImageUrls.has(video.thumbnail.url)}
+								<img
+									src={authenticatedImageUrls.get(video.thumbnail.url)}
+									alt={video.title || 'Video'}
+									class="aspect-video w-full object-cover"
+								/>
+							{:else if video.thumbnail?.url}
+								<!-- Loading placeholder while fetching authenticated URL -->
+								<span
+									class="flex aspect-video w-full items-center justify-center bg-theme-secondary"
+								>
+									<span class="h-8 w-8 animate-pulse rounded-full bg-gray-300 dark:bg-gray-600"
+									></span>
+								</span>
+							{:else}
+								<span class="flex aspect-video w-full items-center justify-center text-theme-muted">
+									<svg
+										class="h-12 w-12"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="1.5"
+											d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+										/>
+									</svg>
+								</span>
+							{/if}
+
+							<!-- Play icon overlay -->
+							<span class="pointer-events-none absolute inset-0 flex items-center justify-center">
+								<span class="rounded-full bg-black/50 p-3">
+									<svg class="h-6 w-6 text-white" style="fill: currentColor" viewBox="0 0 24 24">
+										<path d="M8 5v14l11-7z" />
+									</svg>
+								</span>
+							</span>
+						</button>
+
+						{#if video.internal}
+							<span
+								class="absolute top-2 left-2 rounded bg-warning-500/90 px-1.5 py-0.5 text-xs font-medium text-white"
+							>
+								Internal
+							</span>
+						{/if}
+
+						{#if isActive}
+							<div
+								class="absolute top-2 right-2 flex gap-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+							>
+								<button
+									type="button"
+									onclick={(e) => {
+										e.stopPropagation();
+										startEdit(video.id, video.title || '', video.notes || '', video.internal);
+									}}
+									class="rounded bg-white/90 p-1.5 text-gray-600 hover:text-primary-500 dark:bg-gray-800/90 dark:text-gray-300"
+									aria-label="Edit video"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+										/>
+									</svg>
+								</button>
+								<button
+									type="button"
+									onclick={(e) => {
+										e.stopPropagation();
+										handleDeleteVideo(video.id);
+									}}
+									disabled={deletingVideoId === video.id}
+									class="rounded bg-white/90 p-1.5 text-gray-600 hover:text-red-500 disabled:opacity-50 dark:bg-gray-800/90 dark:text-gray-300"
+									aria-label="Delete video"
+								>
+									{#if deletingVideoId === video.id}
+										<IconSpinner class="h-4 w-4" />
+									{:else}
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									{/if}
+								</button>
+							</div>
+						{/if}
+
+						<div
+							class="absolute right-0 bottom-0 left-0 bg-linear-to-t from-black/70 to-transparent p-2"
+						>
+							<p class="truncate text-xs text-white">{video.title || 'Untitled'}</p>
+							{#if video.notes}
+								<p class="truncate text-xs text-white/80">{video.notes}</p>
+							{/if}
+							<p class="text-xs text-white/70">
+								{getTeamMemberName(video.uploadedByTeamProfileId)}
+							</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Empty State -->
+	{#if photos.length === 0 && videos.length === 0}
+		<div class="empty-state">
+			<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Media Yet</h2>
+			<p class="empty-state-text">
+				{#if isActive}
+					Add photos and videos to document your work.
+				{:else}
+					No photos or videos were added to this session.
+				{/if}
+			</p>
+		</div>
+	{/if}
+</div>
+
+<!-- Edit Modal -->
+{#if editingId}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-md rounded-xl bg-theme-card p-6 shadow-xl">
+			<h3 class="mb-4 font-medium text-theme">Edit Details</h3>
+
+			<div class="space-y-4">
+				<div>
+					<label for="edit-title" class="mb-1 block text-sm font-medium text-theme">Title</label>
+					<input
+						id="edit-title"
+						type="text"
+						bind:value={editTitle}
+						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+					/>
+				</div>
+
+				<div>
+					<label for="edit-notes" class="mb-1 block text-sm font-medium text-theme">Notes</label>
+					<textarea
+						id="edit-notes"
+						bind:value={editNotes}
+						rows="3"
+						class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+					></textarea>
+				</div>
+
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={editInternal}
+						class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
+					/>
+					<span class="text-sm text-theme">Internal only (not visible to customer)</span>
+				</label>
+
+				<div class="flex gap-3">
+					<button type="button" onclick={cancelEdit} class="btn-ghost flex-1"> Cancel </button>
+					<button
+						type="button"
+						onclick={() => {
+							if (!editingId) return;
+							const photo = photos.find((p) => p.id === editingId);
+							if (photo) {
+								savePhotoEdit(editingId);
+							} else {
+								saveVideoEdit(editingId);
+							}
+						}}
+						disabled={isEditing}
+						class="btn-primary flex-1 disabled:opacity-50"
+					>
+						{isEditing ? 'Saving...' : 'Save'}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/session/SessionNotesTab.svelte b/src/lib/components/session/SessionNotesTab.svelte
new file mode 100644
index 0000000..616301a
--- /dev/null
+++ b/src/lib/components/session/SessionNotesTab.svelte
@@ -0,0 +1,314 @@
+<script lang="ts">
+	import type { SessionNote } from './types';
+	import { formatDateTime } from './types';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Props {
+		notes: SessionNote[];
+		isActive: boolean;
+		getTeamMemberName?: (id: string | null | undefined) => string;
+		onAdd?: (content: string, internal: boolean) => Promise<void>;
+		onUpdate?: (noteId: string, content: string, internal: boolean) => Promise<void>;
+		onDelete?: (noteId: string) => Promise<void>;
+	}
+
+	let {
+		notes,
+		isActive,
+		getTeamMemberName = () => 'Unknown',
+		onAdd,
+		onUpdate,
+		onDelete
+	}: Props = $props();
+
+	// Add note form state
+	let showAddForm = $state(false);
+	let newNoteContent = $state('');
+	let newNoteInternal = $state(true);
+	let isAdding = $state(false);
+
+	// Edit state
+	let editingId = $state<string | null>(null);
+	let editContent = $state('');
+	let editInternal = $state(true);
+	let isEditing = $state(false);
+
+	// Delete state
+	let deletingId = $state<string | null>(null);
+
+	async function handleAddNote() {
+		if (!newNoteContent.trim() || !onAdd) return;
+
+		isAdding = true;
+		try {
+			await onAdd(newNoteContent.trim(), newNoteInternal);
+			newNoteContent = '';
+			newNoteInternal = true;
+			showAddForm = false;
+		} catch (err) {
+			console.error('Failed to add note:', err);
+		} finally {
+			isAdding = false;
+		}
+	}
+
+	function startEdit(note: SessionNote) {
+		editingId = note.id;
+		editContent = note.content;
+		editInternal = note.internal;
+	}
+
+	function cancelEdit() {
+		editingId = null;
+		editContent = '';
+		editInternal = true;
+	}
+
+	async function handleUpdateNote() {
+		if (!editingId || !editContent.trim() || !onUpdate) return;
+
+		isEditing = true;
+		try {
+			await onUpdate(editingId, editContent.trim(), editInternal);
+			cancelEdit();
+		} catch (err) {
+			console.error('Failed to update note:', err);
+		} finally {
+			isEditing = false;
+		}
+	}
+
+	async function handleDeleteNote(noteId: string) {
+		if (!onDelete || !confirm('Are you sure you want to delete this note?')) return;
+
+		deletingId = noteId;
+		try {
+			await onDelete(noteId);
+		} catch (err) {
+			console.error('Failed to delete note:', err);
+		} finally {
+			deletingId = null;
+		}
+	}
+
+	// Sort notes by creation date (newest first)
+	let sortedNotes = $derived(
+		[...notes].sort((a, b) => {
+			const dateA = new Date(a.createdAt).getTime();
+			const dateB = new Date(b.createdAt).getTime();
+			return dateB - dateA;
+		})
+	);
+</script>
+
+<div class="space-y-4">
+	<!-- Add Note Button/Form -->
+	{#if isActive}
+		{#if showAddForm}
+			<div class="card-padded border-2 border-primary-500/30 bg-primary-500/5">
+				<h3 class="mb-4 font-medium text-theme">Add Note</h3>
+
+				<div class="space-y-4">
+					<div>
+						<textarea
+							bind:value={newNoteContent}
+							placeholder="Write your note..."
+							rows="4"
+							class="w-full rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+						></textarea>
+					</div>
+
+					<label class="flex items-center gap-2">
+						<input
+							type="checkbox"
+							bind:checked={newNoteInternal}
+							class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
+						/>
+						<span class="text-sm text-theme">Internal only (not visible to customer)</span>
+					</label>
+
+					<div class="flex gap-3">
+						<button
+							type="button"
+							onclick={() => {
+								showAddForm = false;
+								newNoteContent = '';
+							}}
+							disabled={isAdding}
+							class="btn-ghost flex-1 disabled:opacity-50"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onclick={handleAddNote}
+							disabled={!newNoteContent.trim() || isAdding}
+							class="btn-primary flex-1 disabled:opacity-50"
+						>
+							{isAdding ? 'Adding...' : 'Add Note'}
+						</button>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<button
+				type="button"
+				onclick={() => (showAddForm = true)}
+				class="flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-theme p-4 text-theme-muted transition-colors hover:border-primary-500 hover:text-primary-500"
+			>
+				<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add Note
+			</button>
+		{/if}
+	{/if}
+
+	<!-- Notes List -->
+	{#if sortedNotes.length > 0}
+		<div class="space-y-3">
+			{#each sortedNotes as note (note.id)}
+				<div class="card-padded">
+					{#if editingId === note.id}
+						<!-- Edit Mode -->
+						<div class="space-y-4">
+							<textarea
+								bind:value={editContent}
+								rows="4"
+								class="w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+							></textarea>
+
+							<label class="flex items-center gap-2">
+								<input
+									type="checkbox"
+									bind:checked={editInternal}
+									class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
+								/>
+								<span class="text-sm text-theme">Internal only</span>
+							</label>
+
+							<div class="flex gap-3">
+								<button
+									type="button"
+									onclick={cancelEdit}
+									disabled={isEditing}
+									class="btn-ghost flex-1 disabled:opacity-50"
+								>
+									Cancel
+								</button>
+								<button
+									type="button"
+									onclick={handleUpdateNote}
+									disabled={!editContent.trim() || isEditing}
+									class="btn-primary flex-1 disabled:opacity-50"
+								>
+									{isEditing ? 'Saving...' : 'Save'}
+								</button>
+							</div>
+						</div>
+					{:else}
+						<!-- View Mode -->
+						<div class="flex items-start gap-3">
+							<div class="min-w-0 flex-1">
+								<div class="mb-2 flex items-center gap-2">
+									{#if note.authorId}
+										<span class="text-sm font-medium text-theme">
+											{getTeamMemberName(note.authorId)}
+										</span>
+									{/if}
+									{#if note.internal}
+										<span class="badge-warning">Internal</span>
+									{/if}
+								</div>
+
+								<p class="whitespace-pre-wrap text-theme">{note.content}</p>
+
+								<p class="mt-2 text-xs text-theme-muted">
+									{formatDateTime(note.createdAt)}
+									{#if note.updatedAt && note.updatedAt !== note.createdAt}
+										<span class="italic"> (edited)</span>
+									{/if}
+								</p>
+							</div>
+
+							{#if isActive}
+								<div class="flex flex-shrink-0 gap-1">
+									<button
+										type="button"
+										onclick={() => startEdit(note)}
+										class="rounded p-1.5 text-theme-muted hover:bg-primary-50 hover:text-primary-500 dark:hover:bg-primary-900/20"
+										title="Edit note"
+									>
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+											/>
+										</svg>
+									</button>
+									<button
+										type="button"
+										onclick={() => handleDeleteNote(note.id)}
+										disabled={deletingId === note.id}
+										class="rounded p-1.5 text-theme-muted hover:bg-error-50 hover:text-error-500 disabled:opacity-50 dark:hover:bg-error-900/20"
+										title="Delete note"
+									>
+										{#if deletingId === note.id}
+											<IconSpinner class="h-4 w-4" />
+										{:else}
+											<svg
+												class="h-4 w-4"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												/>
+											</svg>
+										{/if}
+									</button>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<!-- Empty State -->
+		<div class="empty-state">
+			<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+				/>
+			</svg>
+			<h2 class="empty-state-title">No Notes Yet</h2>
+			<p class="empty-state-text">
+				{#if isActive}
+					Add notes to document important information.
+				{:else}
+					No notes were added to this session.
+				{/if}
+			</p>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/session/SessionSectionHeader.svelte b/src/lib/components/session/SessionSectionHeader.svelte
new file mode 100644
index 0000000..02762cf
--- /dev/null
+++ b/src/lib/components/session/SessionSectionHeader.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { SessionType } from './types';
+
+	interface Props {
+		isActive: boolean;
+		sessionType: SessionType;
+	}
+
+	let { isActive, sessionType }: Props = $props();
+
+	let iconColorClasses = $derived(
+		isActive
+			? sessionType === 'service'
+				? 'bg-accent-500/10'
+				: 'bg-secondary-500/10'
+			: 'bg-surface-500/10'
+	);
+
+	let iconTextClasses = $derived(
+		isActive
+			? sessionType === 'service'
+				? 'text-accent-600 dark:text-accent-400'
+				: 'text-secondary-600 dark:text-secondary-400'
+			: 'text-surface-600 dark:text-surface-400'
+	);
+
+	let title = $derived(isActive ? 'Active Session' : 'Completed Session');
+</script>
+
+<div class="mb-4 flex items-center gap-2">
+	<div class="flex h-8 w-8 items-center justify-center rounded-lg {iconColorClasses}">
+		{#if isActive}
+			<svg
+				class="h-5 w-5 {iconTextClasses}"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+		{:else}
+			<svg
+				class="h-5 w-5 {iconTextClasses}"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+		{/if}
+	</div>
+	<h2 class="text-lg font-semibold text-theme">{title}</h2>
+	{#if isActive}
+		<span class="relative flex h-3 w-3">
+			<span
+				class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+			></span>
+			<span class="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+		</span>
+	{/if}
+</div>
diff --git a/src/lib/components/session/SessionSummaryTab.svelte b/src/lib/components/session/SessionSummaryTab.svelte
new file mode 100644
index 0000000..d478f88
--- /dev/null
+++ b/src/lib/components/session/SessionSummaryTab.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import type { SessionType } from './types';
+	import { formatDateTime, formatDuration } from './types';
+
+	interface Props {
+		sessionType: SessionType;
+		stats: {
+			completedTasks: number;
+			photos: number;
+			videos: number;
+			notes: number;
+		};
+		sessionDetails: {
+			start?: string | null;
+			end?: string | null;
+			isActive: boolean;
+			durationSeconds?: number | null;
+		};
+		entityName?: string;
+		addressInfo?: string | null;
+		teamMembers?: Array<{ id: string; fullName: string; role: string }>;
+	}
+
+	let {
+		sessionType,
+		stats,
+		sessionDetails,
+		entityName,
+		addressInfo,
+		teamMembers = []
+	}: Props = $props();
+
+	// Color classes based on session type
+	let colorClasses = $derived(
+		sessionType === 'service'
+			? {
+					statBg: 'bg-secondary-500/10',
+					statText: 'text-secondary-600 dark:text-secondary-400',
+					statValue: 'text-secondary-700 dark:text-secondary-300'
+				}
+			: {
+					statBg: 'bg-accent-500/10',
+					statText: 'text-accent-600 dark:text-accent-400',
+					statValue: 'text-accent-700 dark:text-accent-300'
+				}
+	);
+
+	const statItems = $derived([
+		{
+			label: 'Tasks Completed',
+			value: stats.completedTasks,
+			icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'
+		},
+		{
+			label: 'Photos',
+			value: stats.photos,
+			icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
+		},
+		{
+			label: 'Videos',
+			value: stats.videos,
+			icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'
+		},
+		{
+			label: 'Notes',
+			value: stats.notes,
+			icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
+		}
+	]);
+</script>
+
+<!-- Stats Grid -->
+<div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
+	{#each statItems as stat (stat.label)}
+		<div class="rounded-xl {colorClasses.statBg} p-4 text-center">
+			<div class="mb-2 flex justify-center">
+				<svg
+					class="h-6 w-6 {colorClasses.statText}"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={stat.icon} />
+				</svg>
+			</div>
+			<p class="text-2xl font-bold {colorClasses.statValue}">{stat.value}</p>
+			<p class="mt-1 text-xs text-theme-muted">{stat.label}</p>
+		</div>
+	{/each}
+</div>
+
+<!-- Session Details Card -->
+<div class="card-padded">
+	<h3 class="mb-4 text-sm font-medium text-theme-muted">Session Details</h3>
+
+	<div class="space-y-4">
+		<!-- Time Info -->
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+			<div>
+				<p class="text-xs tracking-wide text-theme-muted uppercase">Started</p>
+				<p class="font-medium text-theme">{formatDateTime(sessionDetails.start)}</p>
+			</div>
+			{#if sessionDetails.end}
+				<div>
+					<p class="text-xs tracking-wide text-theme-muted uppercase">Ended</p>
+					<p class="font-medium text-theme">{formatDateTime(sessionDetails.end)}</p>
+				</div>
+			{:else if sessionDetails.isActive}
+				<div>
+					<p class="text-xs tracking-wide text-theme-muted uppercase">Status</p>
+					<p class="font-medium text-primary-600 dark:text-primary-400">In Progress</p>
+				</div>
+			{/if}
+		</div>
+
+		{#if sessionDetails.durationSeconds}
+			<div class="border-t border-theme pt-3">
+				<p class="text-xs tracking-wide text-theme-muted uppercase">Duration</p>
+				<p class="font-medium text-theme">{formatDuration(sessionDetails.durationSeconds)}</p>
+			</div>
+		{/if}
+
+		<!-- Entity Info -->
+		{#if entityName || addressInfo}
+			<div class="border-t border-theme pt-3">
+				{#if entityName}
+					<p class="mb-1 text-xs tracking-wide text-theme-muted uppercase">
+						{sessionType === 'service' ? 'Account' : 'Project'}
+					</p>
+					<p class="font-medium text-theme">{entityName}</p>
+				{/if}
+				{#if addressInfo}
+					<p class="mt-1 text-sm text-theme-secondary">{addressInfo}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Team Members -->
+		{#if teamMembers.length > 0}
+			<div class="border-t border-theme pt-3">
+				<p class="mb-2 text-xs tracking-wide text-theme-muted uppercase">Team Members</p>
+				<div class="space-y-2">
+					{#each teamMembers as member (member.id)}
+						<div class="flex items-center gap-2">
+							<span
+								class="inline-flex h-6 w-6 items-center justify-center rounded text-xs font-bold
+									{member.role === 'TEAM_LEADER'
+									? 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
+									: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'}"
+							>
+								{member.role === 'TEAM_LEADER' ? 'TL' : 'TM'}
+							</span>
+							<span class="text-theme">{member.fullName}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/session/SessionTabs.svelte b/src/lib/components/session/SessionTabs.svelte
new file mode 100644
index 0000000..b884e2d
--- /dev/null
+++ b/src/lib/components/session/SessionTabs.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { SessionTab, SessionTabsCounts } from './types';
+
+	interface Props {
+		activeTab: SessionTab;
+		counts: SessionTabsCounts;
+		hasScope?: boolean;
+		onTabChange: (tab: SessionTab) => void;
+	}
+
+	let { activeTab, counts, hasScope = true, onTabChange }: Props = $props();
+
+	const allTabs: { id: SessionTab; label: string; countKey: keyof SessionTabsCounts | null }[] = [
+		{ id: 'summary', label: 'Summary', countKey: null },
+		{ id: 'tasks', label: 'Tasks', countKey: 'tasks' },
+		{ id: 'media', label: 'Media', countKey: null },
+		{ id: 'notes', label: 'Notes', countKey: 'notes' }
+	];
+
+	// Filter tabs based on whether scope exists (hide Tasks if no scope)
+	let tabs = $derived(hasScope ? allTabs : allTabs.filter((t) => t.id !== 'tasks'));
+
+	// Compute media count (photos + videos)
+	let mediaCount = $derived(counts.photos + counts.videos);
+
+	function getCount(tab: (typeof tabs)[number]): number | null {
+		if (tab.id === 'media') return mediaCount > 0 ? mediaCount : null;
+		if (tab.countKey) {
+			const count = counts[tab.countKey];
+			return count > 0 ? count : null;
+		}
+		return null;
+	}
+
+	// Mobile tab navigation
+	let currentTabIndex = $derived(tabs.findIndex((t) => t.id === activeTab));
+
+	function goToPrevTab() {
+		const newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
+		onTabChange(tabs[newIndex].id);
+	}
+
+	function goToNextTab() {
+		const newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
+		onTabChange(tabs[newIndex].id);
+	}
+</script>
+
+<!-- Mobile: Carousel style -->
+<div class="mb-6 md:hidden">
+	<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-2">
+		<button
+			type="button"
+			onclick={goToPrevTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Previous tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+
+		<div class="flex items-center gap-2">
+			<span class="font-medium text-theme">{tabs[currentTabIndex].label}</span>
+			{#if getCount(tabs[currentTabIndex]) !== null}
+				<span
+					class="rounded-full bg-primary-500/20 px-2 py-0.5 text-xs font-medium text-primary-600 dark:text-primary-400"
+				>
+					{getCount(tabs[currentTabIndex])}
+				</span>
+			{/if}
+		</div>
+
+		<button
+			type="button"
+			onclick={goToNextTab}
+			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+			aria-label="Next tab"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Tab indicators -->
+	<div class="mt-2 flex justify-center gap-1.5">
+		{#each tabs as tab, i (tab.id)}
+			<button
+				type="button"
+				onclick={() => onTabChange(tab.id)}
+				class="h-1.5 rounded-full transition-all {i === currentTabIndex
+					? 'w-4 bg-primary-500'
+					: 'w-1.5 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'}"
+				aria-label={tab.label}
+			></button>
+		{/each}
+	</div>
+</div>
+
+<!-- Desktop: Horizontal tabs -->
+<div class="mb-6 hidden md:block">
+	<div class="border-b border-theme">
+		<nav class="flex gap-1" aria-label="Session tabs">
+			{#each tabs as tab (tab.id)}
+				{@const count = getCount(tab)}
+				<button
+					type="button"
+					onclick={() => onTabChange(tab.id)}
+					class="relative px-4 py-3 text-sm font-medium transition-colors
+						{activeTab === tab.id
+						? 'text-primary-600 dark:text-primary-400'
+						: 'text-theme-muted hover:text-theme'}"
+				>
+					<span class="flex items-center gap-2">
+						{tab.label}
+						{#if count !== null}
+							<span
+								class="rounded-full px-2 py-0.5 text-xs font-medium
+									{activeTab === tab.id
+									? 'bg-primary-500/20 text-primary-600 dark:text-primary-400'
+									: 'bg-theme-secondary text-theme-muted'}"
+							>
+								{count}
+							</span>
+						{/if}
+					</span>
+
+					{#if activeTab === tab.id}
+						<span class="absolute right-0 bottom-0 left-0 h-0.5 bg-primary-500"></span>
+					{/if}
+				</button>
+			{/each}
+		</nav>
+	</div>
+</div>
diff --git a/src/lib/components/session/SessionTasksTab.svelte b/src/lib/components/session/SessionTasksTab.svelte
new file mode 100644
index 0000000..91f1afa
--- /dev/null
+++ b/src/lib/components/session/SessionTasksTab.svelte
@@ -0,0 +1,579 @@
+<script lang="ts">
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+	import type { SvelteSet as SvelteSetType } from 'svelte/reactivity';
+	import type {
+		SessionType,
+		ExtendedTask,
+		AreaWithCompletions,
+		AreaWithTasks,
+		ServiceArea,
+		ProjectArea
+	} from './types';
+	import { frequencyColors, formatFrequency, formatDateTime } from './types';
+
+	interface Props {
+		sessionType: SessionType;
+		isActive: boolean;
+		hasScope: boolean;
+		selectedTaskIds: SvelteSetType<string>;
+		completedTasksByArea: AreaWithCompletions[];
+		readyToSubmitByArea: AreaWithTasks[];
+		availableTasksCount: number;
+		tasks: ExtendedTask[];
+		completedTaskIds: SvelteSetType<string>;
+		areas: (ServiceArea | ProjectArea)[];
+		isSubmitting?: boolean;
+		submittingTaskId?: string | null;
+		removingTaskId?: string | null;
+		getTeamMemberName: (id: string | null | undefined) => string;
+		onToggleTask: (taskUuid: string) => void;
+		onSubmitTask: (taskUuid: string) => void;
+		onRemoveTask: (taskUuid: string) => void;
+		onRemoveCompletedTask: (taskUuid: string) => void;
+		onSubmitAllTasks: () => void;
+		onClearSelection: () => void;
+	}
+
+	let {
+		sessionType,
+		isActive,
+		hasScope,
+		selectedTaskIds,
+		completedTasksByArea,
+		readyToSubmitByArea,
+		availableTasksCount,
+		tasks,
+		completedTaskIds,
+		areas,
+		isSubmitting = false,
+		submittingTaskId = null,
+		removingTaskId = null,
+		getTeamMemberName,
+		onToggleTask,
+		onSubmitTask,
+		onRemoveTask,
+		onRemoveCompletedTask,
+		onSubmitAllTasks,
+		onClearSelection
+	}: Props = $props();
+
+	// Expanded state for sections
+	let expandedAreas = new SvelteSet<string>();
+	let expandedCompletedAreas = new SvelteSet<string>();
+	let expandedReadyAreas = new SvelteSet<string>();
+	let completedExpanded = $state(true);
+	let availableExpanded = $state(true);
+
+	function toggleAreaExpanded(areaId: string) {
+		if (expandedAreas.has(areaId)) {
+			expandedAreas.delete(areaId);
+		} else {
+			expandedAreas.add(areaId);
+		}
+	}
+
+	function toggleCompletedAreaExpanded(areaId: string) {
+		if (expandedCompletedAreas.has(areaId)) {
+			expandedCompletedAreas.delete(areaId);
+		} else {
+			expandedCompletedAreas.add(areaId);
+		}
+	}
+
+	function toggleReadyAreaExpanded(areaId: string) {
+		if (expandedReadyAreas.has(areaId)) {
+			expandedReadyAreas.delete(areaId);
+		} else {
+			expandedReadyAreas.add(areaId);
+		}
+	}
+
+	// Get available tasks (not selected, not completed)
+	let availableTasks = $derived(
+		tasks.filter((t) => !completedTaskIds.has(t.uuid) && !selectedTaskIds.has(t.uuid))
+	);
+
+	// Group available tasks by area
+	let availableTasksByArea = $derived(() => {
+		const grouped = new SvelteMap<string, ExtendedTask[]>();
+		for (const task of availableTasks) {
+			const existing = grouped.get(task.areaId) || [];
+			existing.push(task);
+			grouped.set(task.areaId, existing);
+		}
+		return Array.from(grouped.entries()).map(([areaId, areaTasks]) => {
+			const area = areas.find((a) => a.id === areaId);
+			return { area, tasks: areaTasks };
+		});
+	});
+
+	// Color classes based on session type
+	let colorClasses = $derived(
+		sessionType === 'service'
+			? {
+					primary: 'text-secondary-600 dark:text-secondary-400',
+					bg: 'bg-secondary-500/10',
+					border: 'border-secondary-500/30',
+					button: 'bg-secondary-500 hover:bg-secondary-600 text-white'
+				}
+			: {
+					primary: 'text-accent-600 dark:text-accent-400',
+					bg: 'bg-accent-500/10',
+					border: 'border-accent-500/30',
+					button: 'bg-accent-500 hover:bg-accent-600 text-white'
+				}
+	);
+</script>
+
+{#if !hasScope}
+	<div class="empty-state">
+		<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.5"
+				d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+			/>
+		</svg>
+		<h2 class="empty-state-title">No Scope Assigned</h2>
+		<p class="empty-state-text">This {sessionType} doesn't have a scope of work assigned.</p>
+	</div>
+{:else}
+	<div class="space-y-6">
+		<!-- Ready to Submit Section -->
+		{#if selectedTaskIds.size > 0}
+			<div class="rounded-xl border-2 {colorClasses.border} {colorClasses.bg} p-4">
+				<div class="mb-4 flex items-center justify-between">
+					<h3 class="font-semibold {colorClasses.primary}">
+						Ready to Submit ({selectedTaskIds.size})
+					</h3>
+					<div class="flex items-center gap-2">
+						<button
+							type="button"
+							onclick={onClearSelection}
+							class="text-sm text-theme-muted hover:text-theme"
+						>
+							Clear all
+						</button>
+						<button
+							type="button"
+							onclick={onSubmitAllTasks}
+							disabled={isSubmitting}
+							class="rounded-lg px-4 py-2 text-sm font-medium {colorClasses.button} disabled:opacity-50"
+						>
+							{isSubmitting ? 'Submitting...' : 'Submit All'}
+						</button>
+					</div>
+				</div>
+
+				<div class="space-y-3">
+					{#each readyToSubmitByArea as { area, tasks: areaTasks } (area?.id ?? 'unknown')}
+						{#if area}
+							<div>
+								<button
+									type="button"
+									onclick={() => toggleReadyAreaExpanded(area.id)}
+									class="flex w-full items-center justify-between py-1 text-left"
+								>
+									<span class="text-sm font-medium {colorClasses.primary}">{area.name}</span>
+									<span class="flex items-center gap-2">
+										<span class="text-xs text-theme-muted">{areaTasks.length} tasks</span>
+										<svg
+											class="h-4 w-4 text-theme-muted transition-transform {expandedReadyAreas.has(
+												area.id
+											)
+												? 'rotate-180'
+												: ''}"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</span>
+								</button>
+
+								{#if expandedReadyAreas.has(area.id)}
+									<div class="mt-2 space-y-2 border-l-2 pl-2 {colorClasses.border}">
+										{#each areaTasks as task (task.uuid)}
+											<div class="flex items-start gap-3 rounded-lg bg-white p-2 dark:bg-gray-800">
+												<div class="min-w-0 flex-1">
+													<p class="text-sm text-theme">
+														{task.checklistDescription || task.description}
+													</p>
+													<div class="mt-1 flex items-center gap-2">
+														{#if sessionType === 'service' && 'frequency' in task && task.frequency}
+															<span
+																class="rounded px-1.5 py-0.5 text-xs font-medium {frequencyColors[
+																	task.frequency
+																] || 'bg-gray-100 text-gray-600'}"
+															>
+																{formatFrequency(task.frequency)}
+															</span>
+														{/if}
+														{#if task.estimatedMinutes}
+															<span class="text-xs text-theme-muted"
+																>{task.estimatedMinutes} min</span
+															>
+														{/if}
+													</div>
+												</div>
+												<div class="flex items-center gap-1">
+													<button
+														type="button"
+														onclick={() => onSubmitTask(task.uuid)}
+														disabled={submittingTaskId === task.uuid}
+														class="rounded p-1.5 {colorClasses.button} disabled:opacity-50"
+														title="Submit task"
+													>
+														{#if submittingTaskId === task.uuid}
+															<svg
+																class="h-4 w-4 animate-spin"
+																viewBox="0 0 24 24"
+																style="fill: none"
+															>
+																<circle
+																	class="opacity-25"
+																	cx="12"
+																	cy="12"
+																	r="10"
+																	stroke="currentColor"
+																	stroke-width="4"
+																></circle>
+																<path
+																	class="opacity-75"
+																	fill="currentColor"
+																	d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+																></path>
+															</svg>
+														{:else}
+															<svg
+																class="h-4 w-4"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M5 13l4 4L19 7"
+																/>
+															</svg>
+														{/if}
+													</button>
+													<button
+														type="button"
+														onclick={() => onRemoveTask(task.uuid)}
+														class="rounded p-1.5 text-theme-muted hover:bg-error-50 hover:text-error-500 dark:hover:bg-error-900/20"
+														title="Remove from selection"
+													>
+														<svg
+															class="h-4 w-4"
+															style="fill: none"
+															stroke="currentColor"
+															viewBox="0 0 24 24"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M6 18L18 6M6 6l12 12"
+															/>
+														</svg>
+													</button>
+												</div>
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Completed Tasks Section -->
+		{#if completedTasksByArea.length > 0}
+			<div class="card-padded">
+				<button
+					type="button"
+					onclick={() => (completedExpanded = !completedExpanded)}
+					class="flex w-full items-center justify-between"
+				>
+					<span class="font-semibold text-theme">
+						Completed Tasks ({completedTasksByArea.reduce(
+							(sum, a) => sum + a.completions.length,
+							0
+						)})
+					</span>
+					<svg
+						class="h-5 w-5 text-theme-muted transition-transform {completedExpanded
+							? 'rotate-180'
+							: ''}"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</button>
+
+				{#if completedExpanded}
+					<div class="mt-4 space-y-3">
+						{#each completedTasksByArea as { area, completions } (area.id)}
+							<div>
+								<button
+									type="button"
+									onclick={() => toggleCompletedAreaExpanded(area.id)}
+									class="flex w-full items-center justify-between py-1 text-left"
+								>
+									<span class="text-sm font-medium text-success">{area.name}</span>
+									<span class="flex items-center gap-2">
+										<span class="text-xs text-theme-muted">{completions.length} tasks</span>
+										<svg
+											class="h-4 w-4 text-theme-muted transition-transform {expandedCompletedAreas.has(
+												area.id
+											)
+												? 'rotate-180'
+												: ''}"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</span>
+								</button>
+
+								{#if expandedCompletedAreas.has(area.id)}
+									<div class="mt-2 space-y-2 border-l-2 border-success-500/30 pl-2">
+										{#each completions as completion (completion.id)}
+											{@const task = tasks.find((t) => t.uuid === completion.taskId)}
+											<div
+												class="flex items-start gap-3 rounded-lg border border-success bg-success p-3"
+											>
+												<svg
+													class="mt-0.5 h-5 w-5 flex-shrink-0 text-success-500"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M5 13l4 4L19 7"
+													/>
+												</svg>
+												<div class="min-w-0 flex-1">
+													<p class="text-sm text-theme">
+														{#if task}
+															{task.checklistDescription || task.description}
+														{:else}
+															Task
+														{/if}
+													</p>
+													{#if task && sessionType === 'service' && 'frequency' in task && task.frequency}
+														<div class="mt-1">
+															<span
+																class="rounded px-1.5 py-0.5 text-xs font-medium {frequencyColors[
+																	task.frequency
+																] || 'bg-gray-100 text-gray-600'}"
+															>
+																{formatFrequency(task.frequency)}
+															</span>
+														</div>
+													{/if}
+													<p class="mt-1 text-xs text-theme-muted">
+														{getTeamMemberName(completion.completedById)} &middot; {formatDateTime(
+															completion.completedAt
+														)}
+													</p>
+												</div>
+												{#if isActive}
+													<button
+														type="button"
+														onclick={() => onRemoveCompletedTask(completion.taskId)}
+														disabled={removingTaskId === completion.taskId}
+														class="rounded p-1.5 text-theme-muted hover:bg-error-50 hover:text-error-500 disabled:opacity-50 dark:hover:bg-error-900/20"
+														title="Remove completion"
+													>
+														{#if removingTaskId === completion.taskId}
+															<svg
+																class="h-4 w-4 animate-spin"
+																viewBox="0 0 24 24"
+																style="fill: none"
+															>
+																<circle
+																	class="opacity-25"
+																	cx="12"
+																	cy="12"
+																	r="10"
+																	stroke="currentColor"
+																	stroke-width="4"
+																></circle>
+																<path
+																	class="opacity-75"
+																	fill="currentColor"
+																	d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+																></path>
+															</svg>
+														{:else}
+															<svg
+																class="h-4 w-4"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+																/>
+															</svg>
+														{/if}
+													</button>
+												{/if}
+											</div>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Available Tasks Section -->
+		{#if isActive && availableTasksCount > 0}
+			<div class="card-padded">
+				<button
+					type="button"
+					onclick={() => (availableExpanded = !availableExpanded)}
+					class="flex w-full items-center justify-between"
+				>
+					<span class="font-semibold text-theme">
+						Available Tasks ({availableTasksCount})
+					</span>
+					<svg
+						class="h-5 w-5 text-theme-muted transition-transform {availableExpanded
+							? 'rotate-180'
+							: ''}"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
+						/>
+					</svg>
+				</button>
+
+				{#if availableExpanded}
+					<div class="mt-4 space-y-4">
+						{#each availableTasksByArea() as { area, tasks: areaTasks } (area?.id ?? 'unknown')}
+							{#if area}
+								<div>
+									<button
+										type="button"
+										onclick={() => toggleAreaExpanded(area.id)}
+										class="flex w-full items-center justify-between text-left"
+									>
+										<span class="text-sm font-medium {colorClasses.primary}">{area.name}</span>
+										<span class="flex items-center gap-2">
+											<span class="text-xs text-theme-muted">{areaTasks.length} tasks</span>
+											<svg
+												class="h-4 w-4 text-theme-muted transition-transform {expandedAreas.has(
+													area.id
+												)
+													? 'rotate-180'
+													: ''}"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 9l-7 7-7-7"
+												/>
+											</svg>
+										</span>
+									</button>
+
+									{#if expandedAreas.has(area.id)}
+										<div class="mt-2 space-y-2 border-l-2 pl-2 {colorClasses.border}">
+											{#each areaTasks as task (task.uuid)}
+												<div
+													class="flex w-full items-start gap-3 rounded-lg bg-gray-50 p-3 dark:bg-gray-800/50"
+												>
+													<div class="min-w-0 flex-1">
+														<p class="text-sm text-theme">
+															{task.checklistDescription || task.description}
+														</p>
+														<div class="mt-1 flex items-center gap-2">
+															{#if sessionType === 'service' && 'frequency' in task && task.frequency}
+																<span
+																	class="rounded px-1.5 py-0.5 text-xs font-medium {frequencyColors[
+																		task.frequency
+																	] || 'bg-gray-100 text-gray-600'}"
+																>
+																	{formatFrequency(task.frequency)}
+																</span>
+															{/if}
+															{#if task.estimatedMinutes}
+																<span class="text-xs text-theme-muted"
+																	>{task.estimatedMinutes} min</span
+																>
+															{/if}
+														</div>
+													</div>
+													<button
+														type="button"
+														onclick={() => onToggleTask(task.uuid)}
+														class="rounded-lg px-3 py-1.5 text-xs font-medium {colorClasses.button}"
+													>
+														Add
+													</button>
+												</div>
+											{/each}
+										</div>
+									{/if}
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{:else if !isActive}
+			<div class="card-padded">
+				<p class="py-4 text-center text-sm text-theme-muted">
+					This session is closed. Tasks cannot be added or modified.
+				</p>
+			</div>
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/components/session/StartSessionButton.svelte b/src/lib/components/session/StartSessionButton.svelte
new file mode 100644
index 0000000..ef9f595
--- /dev/null
+++ b/src/lib/components/session/StartSessionButton.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Props {
+		isLoading: boolean;
+		backLabel: string;
+		onStart: () => void;
+		onBack: () => void;
+	}
+
+	let { isLoading, backLabel, onStart, onBack }: Props = $props();
+</script>
+
+<div class="space-y-3">
+	<button
+		type="button"
+		onclick={onStart}
+		disabled={isLoading}
+		class="btn-primary w-full disabled:opacity-50"
+	>
+		{#if isLoading}
+			<span class="flex items-center justify-center gap-2">
+				<IconSpinner class="h-4 w-4" />
+				Starting Session...
+			</span>
+		{:else}
+			Start Work Session
+		{/if}
+	</button>
+	<button type="button" onclick={onBack} class="btn-ghost w-full text-center">
+		{backLabel}
+	</button>
+</div>
diff --git a/src/lib/components/session/index.ts b/src/lib/components/session/index.ts
new file mode 100644
index 0000000..966e97d
--- /dev/null
+++ b/src/lib/components/session/index.ts
@@ -0,0 +1,13 @@
+// Session components barrel export
+export { default as SessionHeader } from './SessionHeader.svelte';
+export { default as SessionTabs } from './SessionTabs.svelte';
+export { default as SessionSummaryTab } from './SessionSummaryTab.svelte';
+export { default as SessionTasksTab } from './SessionTasksTab.svelte';
+export { default as SessionMediaTab } from './SessionMediaTab.svelte';
+export { default as SessionNotesTab } from './SessionNotesTab.svelte';
+export { default as SessionSectionHeader } from './SessionSectionHeader.svelte';
+export { default as SessionContent } from './SessionContent.svelte';
+export { default as StartSessionButton } from './StartSessionButton.svelte';
+
+// Types and utilities
+export * from './types';
diff --git a/src/lib/components/session/types.ts b/src/lib/components/session/types.ts
new file mode 100644
index 0000000..7421d08
--- /dev/null
+++ b/src/lib/components/session/types.ts
@@ -0,0 +1,176 @@
+// Session component shared types
+import type {
+	ServiceSession$result,
+	ProjectSession$result,
+	Scope$result,
+	ProjectScope$result
+} from '$houdini';
+
+// Session type discriminator
+export type SessionType = 'service' | 'project';
+
+// Tab type
+export type SessionTab = 'summary' | 'tasks' | 'media' | 'notes';
+
+// Service session types
+export type ServiceSession = NonNullable<ServiceSession$result['serviceSession']>;
+export type ServiceSessionPhoto = ServiceSession['photos'][number];
+export type ServiceSessionVideo = ServiceSession['videos'][number];
+export type ServiceSessionNote = ServiceSession['notes'][number];
+export type ServiceSessionCompletedTask = ServiceSession['completedTasks'][number];
+
+// Project session types
+export type ProjectSession = NonNullable<ProjectSession$result['projectSession']>;
+export type ProjectSessionPhoto = ProjectSession['photos'][number];
+export type ProjectSessionVideo = ProjectSession['videos'][number];
+export type ProjectSessionNote = ProjectSession['notes'][number];
+export type ProjectSessionCompletedTask = ProjectSession['completedTasks'][number];
+
+// Union types for components that handle both
+export type SessionPhoto = ServiceSessionPhoto | ProjectSessionPhoto;
+export type SessionVideo = ServiceSessionVideo | ProjectSessionVideo;
+export type SessionNote = ServiceSessionNote | ProjectSessionNote;
+export type SessionCompletedTask = ServiceSessionCompletedTask | ProjectSessionCompletedTask;
+
+// Scope types
+export type ServiceScope = NonNullable<Scope$result['scope']>;
+export type ServiceArea = ServiceScope['areas'][number];
+export type ServiceTask = ServiceArea['tasks'][number];
+
+export type ProjectScope = NonNullable<ProjectScope$result['projectScope']>;
+export type ProjectArea = ProjectScope['projectAreas'][number];
+export type ProjectTask = ProjectArea['projectTasks'][number];
+
+// Extended task type with additional fields for both types
+export type ExtendedServiceTask = ServiceTask & {
+	uuid: string;
+	areaId: string;
+	areaName: string;
+};
+
+export type ExtendedProjectTask = ProjectTask & {
+	uuid: string;
+	areaId: string;
+	areaName: string;
+};
+
+export type ExtendedTask = ExtendedServiceTask | ExtendedProjectTask;
+
+// Area with completions (for completed tasks section)
+export interface ServiceAreaWithCompletions {
+	area: ServiceArea;
+	completions: ServiceSessionCompletedTask[];
+}
+
+export interface ProjectAreaWithCompletions {
+	area: ProjectArea;
+	completions: ProjectSessionCompletedTask[];
+}
+
+export type AreaWithCompletions = ServiceAreaWithCompletions | ProjectAreaWithCompletions;
+
+// Area with tasks (for ready to submit section)
+export interface ServiceAreaWithTasks {
+	area: ServiceArea;
+	tasks: ExtendedServiceTask[];
+}
+
+export interface ProjectAreaWithTasks {
+	area: ProjectArea;
+	tasks: ExtendedProjectTask[];
+}
+
+export type AreaWithTasks = ServiceAreaWithTasks | ProjectAreaWithTasks;
+
+// Props interfaces for components
+export interface SessionTabsCounts {
+	tasks: number;
+	photos: number;
+	videos: number;
+	notes: number;
+}
+
+// Helper function to format error messages
+export function getErrorMessage(errors: { message: string }[] | null | undefined): string {
+	return errors?.map((e) => e.message).join(', ') ?? '';
+}
+
+// Frequency badge colors - matches TaskFrequencyChoices enum from backend (lowercase)
+export const frequencyColors: Record<string, string> = {
+	daily: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+	weekly: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+	monthly: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+	quarterly: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
+	triannual: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+	annual: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+	as_needed: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
+};
+
+// Format frequency for display
+export function formatFrequency(frequency: string | null | undefined): string {
+	if (!frequency) return '';
+	return frequency.replace('_', ' ').toLowerCase();
+}
+
+// Format date/time
+export function formatDateTime(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+	const date = new Date(dateStr);
+	return date.toLocaleString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit'
+	});
+}
+
+export function formatDate(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+	const date = new Date(dateStr);
+	return date.toLocaleDateString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric'
+	});
+}
+
+export function formatTime(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+	const date = new Date(dateStr);
+	return date.toLocaleTimeString('en-US', {
+		hour: 'numeric',
+		minute: '2-digit'
+	});
+}
+
+// Format duration
+export function formatDuration(seconds: number | null | undefined): string {
+	if (!seconds) return '0m';
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	return `${minutes}m`;
+}
+
+// API base URL for authenticated media requests
+export const API_BASE_URL = 'https://api.example.com';
+
+// Helper to get authenticated image URL by fetching the image and creating an object URL
+export async function getAuthenticatedImageUrl(url: string): Promise<string> {
+	try {
+		// Add /v1 prefix for Oathkeeper routing if URL starts with /api/
+		const apiPath = url.startsWith('/api/') ? `/v1${url}` : url;
+		const fullUrl = `${API_BASE_URL}${apiPath}`;
+		const response = await fetch(fullUrl, {
+			credentials: 'include'
+		});
+		const blob = await response.blob();
+		return URL.createObjectURL(blob);
+	} catch (err) {
+		console.error('Failed to fetch authenticated image:', err);
+		return url; // Fallback to original URL
+	}
+}
diff --git a/src/lib/components/shared/AddressForm.svelte b/src/lib/components/shared/AddressForm.svelte
new file mode 100644
index 0000000..4ac5391
--- /dev/null
+++ b/src/lib/components/shared/AddressForm.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+	import {
+		CreateCustomerAddressStore,
+		UpdateCustomerAddressStore,
+		CreateAccountAddressStore,
+		UpdateAccountAddressStore
+	} from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Address {
+		id: string;
+		name?: string | null;
+		streetAddress: string;
+		city: string;
+		state: string;
+		zipCode: string;
+		addressType?: string | null;
+		isPrimary: boolean;
+		isActive: boolean;
+		notes?: string | null;
+	}
+
+	interface Props {
+		entityType: 'customer' | 'account';
+		entityId: string;
+		address?: Address;
+		showActiveToggle?: boolean;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let {
+		entityType,
+		entityId,
+		address,
+		showActiveToggle = entityType === 'account',
+		onSuccess,
+		onCancel
+	}: Props = $props();
+
+	let isEdit = $derived(!!address);
+	let submitting = $state(false);
+	let error = $state('');
+
+	// Account-specific fields
+	let name = $state(address?.name ?? '');
+	let notes = $state(address?.notes ?? '');
+
+	// Shared fields
+	let streetAddress = $state(address?.streetAddress ?? '');
+	let city = $state(address?.city ?? '');
+	let stateValue = $state(address?.state ?? '');
+	let zipCode = $state(address?.zipCode ?? '');
+	let isPrimary = $state(address?.isPrimary ?? false);
+	let isActive = $state(address?.isActive ?? true);
+
+	// Customer-specific fields
+	let addressType = $state(address?.addressType ?? 'BILLING');
+
+	// Mutation stores
+	const createCustomerStore = new CreateCustomerAddressStore();
+	const updateCustomerStore = new UpdateCustomerAddressStore();
+	const createAccountStore = new CreateAccountAddressStore();
+	const updateAccountStore = new UpdateAccountAddressStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!streetAddress || !city || !stateValue || !zipCode) {
+				error = 'Please fill in all required address fields';
+				return;
+			}
+
+			if (entityType === 'customer') {
+				if (isEdit && address) {
+					const res = await updateCustomerStore.mutate({
+						input: {
+							id: address.id,
+							streetAddress,
+							city,
+							state: stateValue,
+							zipCode,
+							addressType,
+							isPrimary
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				} else {
+					const res = await createCustomerStore.mutate({
+						input: {
+							customerId: entityId,
+							streetAddress,
+							city,
+							state: stateValue,
+							zipCode,
+							addressType,
+							isPrimary,
+							isActive: true
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				}
+			} else {
+				// Account
+				if (isEdit && address) {
+					const res = await updateAccountStore.mutate({
+						input: {
+							id: address.id,
+							name,
+							streetAddress,
+							city,
+							state: stateValue,
+							zipCode,
+							isPrimary,
+							isActive,
+							notes
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				} else {
+					const res = await createAccountStore.mutate({
+						input: {
+							accountId: entityId,
+							name,
+							streetAddress,
+							city,
+							state: stateValue,
+							zipCode,
+							isPrimary,
+							isActive,
+							notes
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save address';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="form-fields" onsubmit={handleSubmit}>
+		{#if entityType === 'account'}
+			<div>
+				<label for="name" class="form-label">Location Name</label>
+				<input
+					id="name"
+					type="text"
+					bind:value={name}
+					disabled={submitting}
+					placeholder="e.g., Main Office, Warehouse"
+					class="input-base"
+				/>
+			</div>
+		{/if}
+
+		<div>
+			<label for="streetAddress" class="form-label">
+				Street Address <span class="required-indicator">*</span>
+			</label>
+			<input
+				id="streetAddress"
+				type="text"
+				bind:value={streetAddress}
+				disabled={submitting}
+				placeholder="123 Main St"
+				class="input-base"
+			/>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="city" class="form-label">
+					City <span class="required-indicator">*</span>
+				</label>
+				<input
+					id="city"
+					type="text"
+					bind:value={city}
+					disabled={submitting}
+					placeholder="City"
+					class="input-base"
+				/>
+			</div>
+
+			<div>
+				<label for="state" class="form-label">
+					State <span class="required-indicator">*</span>
+				</label>
+				<input
+					id="state"
+					type="text"
+					bind:value={stateValue}
+					disabled={submitting}
+					placeholder="State"
+					class="input-base"
+				/>
+			</div>
+		</div>
+
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="zipCode" class="form-label">
+					ZIP Code <span class="required-indicator">*</span>
+				</label>
+				<input
+					id="zipCode"
+					type="text"
+					bind:value={zipCode}
+					disabled={submitting}
+					placeholder="12345"
+					class="input-base"
+				/>
+			</div>
+
+			{#if entityType === 'customer'}
+				<div>
+					<label for="addressType" class="form-label">Address Type</label>
+					<select
+						id="addressType"
+						bind:value={addressType}
+						disabled={submitting}
+						class="select-base"
+					>
+						<option value="BILLING">Billing</option>
+						<option value="MAILING">Mailing</option>
+						<option value="SERVICE">Service</option>
+					</select>
+				</div>
+			{/if}
+		</div>
+
+		{#if entityType === 'account'}
+			<div>
+				<label for="notes" class="form-label">Notes</label>
+				<textarea
+					id="notes"
+					bind:value={notes}
+					disabled={submitting}
+					rows="3"
+					placeholder="Additional notes..."
+					class="textarea-base"
+				></textarea>
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-6">
+			<label class="flex items-center gap-2">
+				<input
+					type="checkbox"
+					bind:checked={isPrimary}
+					disabled={submitting}
+					class="checkbox-base"
+				/>
+				<span class="checkbox-label">Primary Address</span>
+			</label>
+
+			{#if showActiveToggle}
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={isActive}
+						disabled={submitting}
+						class="checkbox-base"
+					/>
+					<span class="checkbox-label">Active</span>
+				</label>
+			{/if}
+		</div>
+
+		<div class="form-actions">
+			<button type="submit" disabled={submitting} class="btn-submit">
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Adding...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Address'}
+				{/if}
+			</button>
+			<button type="button" onclick={handleCancel} disabled={submitting} class="btn-cancel">
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/shared/ContactForm.svelte b/src/lib/components/shared/ContactForm.svelte
new file mode 100644
index 0000000..f5fe3a2
--- /dev/null
+++ b/src/lib/components/shared/ContactForm.svelte
@@ -0,0 +1,272 @@
+<script lang="ts">
+	import {
+		CreateCustomerContactStore,
+		UpdateCustomerContactStore,
+		CreateAccountContactStore,
+		UpdateAccountContactStore
+	} from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Contact {
+		id: string;
+		firstName: string;
+		lastName: string;
+		email: string | null;
+		phone: string | null;
+		notes: string | null;
+		isPrimary: boolean;
+		isActive: boolean;
+	}
+
+	interface Props {
+		entityType: 'customer' | 'account';
+		entityId: string;
+		contact?: Contact;
+		showActiveToggle?: boolean;
+		onSuccess?: () => void;
+		onCancel?: () => void;
+	}
+
+	let {
+		entityType,
+		entityId,
+		contact,
+		showActiveToggle = entityType === 'account',
+		onSuccess,
+		onCancel
+	}: Props = $props();
+
+	let isEdit = $derived(!!contact);
+	let submitting = $state(false);
+	let error = $state('');
+
+	let firstName = $state(contact?.firstName ?? '');
+	let lastName = $state(contact?.lastName ?? '');
+	let email = $state(contact?.email ?? '');
+	let phone = $state(contact?.phone ?? '');
+	let notes = $state(contact?.notes ?? '');
+	let isPrimary = $state(contact?.isPrimary ?? false);
+	let isActive = $state(contact?.isActive ?? true);
+
+	// Mutation stores
+	const createCustomerStore = new CreateCustomerContactStore();
+	const updateCustomerStore = new UpdateCustomerContactStore();
+	const createAccountStore = new CreateAccountContactStore();
+	const updateAccountStore = new UpdateAccountContactStore();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		submitting = true;
+		error = '';
+
+		try {
+			if (!firstName || !lastName) {
+				error = 'Please provide first and last name';
+				return;
+			}
+
+			if (entityType === 'customer') {
+				if (isEdit && contact) {
+					const res = await updateCustomerStore.mutate({
+						input: {
+							id: contact.id,
+							firstName,
+							lastName,
+							email: email || null,
+							phone: phone || null,
+							notes: notes || null,
+							isPrimary
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				} else {
+					const res = await createCustomerStore.mutate({
+						input: {
+							customerId: entityId,
+							firstName,
+							lastName,
+							email,
+							phone,
+							notes,
+							isPrimary,
+							isActive: true
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				}
+			} else {
+				// Account
+				if (isEdit && contact) {
+					const res = await updateAccountStore.mutate({
+						input: {
+							id: contact.id,
+							firstName,
+							lastName,
+							email,
+							phone,
+							isPrimary,
+							isActive,
+							notes
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				} else {
+					const res = await createAccountStore.mutate({
+						input: {
+							accountId: entityId,
+							firstName,
+							lastName,
+							email,
+							phone,
+							isPrimary,
+							isActive,
+							notes
+						}
+					});
+					if (res.errors?.length) {
+						error = res.errors.map((e) => e.message).join(', ');
+						return;
+					}
+				}
+			}
+
+			offCanvas.closeRight();
+			onSuccess?.();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save contact';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	function handleCancel() {
+		offCanvas.closeRight();
+		onCancel?.();
+	}
+</script>
+
+<div class="space-y-6">
+	{#if error}
+		<div class="alert-error">
+			{error}
+		</div>
+	{/if}
+
+	<form class="form-fields" onsubmit={handleSubmit}>
+		<div class="grid grid-cols-2 gap-4">
+			<div>
+				<label for="firstName" class="form-label">
+					First Name <span class="required-indicator">*</span>
+				</label>
+				<input
+					id="firstName"
+					type="text"
+					bind:value={firstName}
+					disabled={submitting}
+					placeholder="First name"
+					class="input-base"
+				/>
+			</div>
+
+			<div>
+				<label for="lastName" class="form-label">
+					Last Name <span class="required-indicator">*</span>
+				</label>
+				<input
+					id="lastName"
+					type="text"
+					bind:value={lastName}
+					disabled={submitting}
+					placeholder="Last name"
+					class="input-base"
+				/>
+			</div>
+		</div>
+
+		<div>
+			<label for="email" class="form-label">Email</label>
+			<input
+				id="email"
+				type="email"
+				bind:value={email}
+				disabled={submitting}
+				placeholder="email@example.com"
+				class="input-base"
+			/>
+		</div>
+
+		<div>
+			<label for="phone" class="form-label">Phone</label>
+			<input
+				id="phone"
+				type="tel"
+				bind:value={phone}
+				disabled={submitting}
+				placeholder="(555) 123-4567"
+				class="input-base"
+			/>
+		</div>
+
+		<div>
+			<label for="notes" class="form-label">Notes</label>
+			<textarea
+				id="notes"
+				bind:value={notes}
+				disabled={submitting}
+				rows="3"
+				placeholder="Additional notes..."
+				class="textarea-base"
+			></textarea>
+		</div>
+
+		<div class="flex items-center gap-6">
+			<label class="flex items-center gap-2">
+				<input
+					type="checkbox"
+					bind:checked={isPrimary}
+					disabled={submitting}
+					class="checkbox-base"
+				/>
+				<span class="checkbox-label">Primary Contact</span>
+			</label>
+
+			{#if showActiveToggle}
+				<label class="flex items-center gap-2">
+					<input
+						type="checkbox"
+						bind:checked={isActive}
+						disabled={submitting}
+						class="checkbox-base"
+					/>
+					<span class="checkbox-label">Active</span>
+				</label>
+			{/if}
+		</div>
+
+		<div class="form-actions">
+			<button type="submit" disabled={submitting} class="btn-submit">
+				{#if submitting}
+					<span class="flex items-center justify-center gap-2">
+						<IconSpinner class="h-4 w-4" />
+						<span>{isEdit ? 'Saving...' : 'Adding...'}</span>
+					</span>
+				{:else}
+					{isEdit ? 'Save Changes' : 'Add Contact'}
+				{/if}
+			</button>
+			<button type="button" onclick={handleCancel} disabled={submitting} class="btn-cancel">
+				Cancel
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/lib/components/shared/SelectionModal.svelte b/src/lib/components/shared/SelectionModal.svelte
new file mode 100644
index 0000000..c6af219
--- /dev/null
+++ b/src/lib/components/shared/SelectionModal.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		subtitle: string;
+		itemName: string;
+		itemNamePlural?: string;
+		loading?: boolean;
+		saving?: boolean;
+		error?: string;
+		selectedCount: number;
+		hasItems: boolean;
+		emptyMessage?: string;
+		showTotal?: boolean;
+		selectedTotal?: number;
+		colorScheme?: 'primary' | 'secondary' | 'accent';
+		onSave: () => void;
+		onClose: () => void;
+		selectAll?: () => void;
+		selectNone?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		subtitle,
+		itemName,
+		itemNamePlural,
+		loading = false,
+		saving = false,
+		error = '',
+		selectedCount,
+		hasItems,
+		emptyMessage = 'No items available.',
+		showTotal = false,
+		selectedTotal = 0,
+		colorScheme = 'primary',
+		onSave,
+		onClose,
+		selectAll,
+		selectNone,
+		children
+	}: Props = $props();
+
+	let plural = $derived(itemNamePlural ?? `${itemName}s`);
+
+	function formatCurrency(value: number): string {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(value);
+	}
+
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			handleClose();
+		}
+	}
+
+	// Color scheme classes
+	let colorClasses = $derived({
+		selectAll:
+			colorScheme === 'primary'
+				? 'text-primary-600 dark:text-primary-400'
+				: colorScheme === 'secondary'
+					? 'text-secondary-600 dark:text-secondary-400'
+					: 'text-accent-600 dark:text-accent-400',
+		totalBg:
+			colorScheme === 'primary'
+				? 'bg-primary-500/10'
+				: colorScheme === 'secondary'
+					? 'bg-secondary-500/10'
+					: 'bg-accent-500/10',
+		totalText:
+			colorScheme === 'primary'
+				? 'text-primary-600 dark:text-primary-400'
+				: colorScheme === 'secondary'
+					? 'text-secondary-600 dark:text-secondary-400'
+					: 'text-accent-600 dark:text-accent-400'
+	});
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		transition:fade={{ duration: 150 }}
+		onmousedown={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && handleClose()}
+	>
+		<div
+			class="max-h-[90vh] w-full max-w-lg overflow-hidden rounded-xl bg-theme-card shadow-xl"
+			transition:scale={{ duration: 150, start: 0.95 }}
+		>
+			<!-- Header -->
+			<div class="border-b border-theme px-6 py-4">
+				<h2 class="text-lg font-semibold text-theme">{title}</h2>
+				<p class="mt-1 text-sm text-theme-muted">{subtitle}</p>
+			</div>
+
+			<!-- Content -->
+			<div class="max-h-[60vh] overflow-y-auto p-6">
+				{#if loading}
+					<div class="flex items-center justify-center py-8">
+						<svg
+							class="h-8 w-8 animate-spin text-primary-500"
+							style="fill: none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				{:else if !hasItems}
+					<p class="py-8 text-center text-sm text-theme-muted italic">
+						{emptyMessage}
+					</p>
+				{:else}
+					<!-- Select All / None -->
+					{#if selectAll && selectNone}
+						<div class="mb-4 flex items-center gap-4">
+							<button
+								onclick={selectAll}
+								class="text-sm font-medium hover:underline {colorClasses.selectAll}"
+							>
+								Select All
+							</button>
+							<button
+								onclick={selectNone}
+								class="text-sm font-medium text-theme-muted hover:underline"
+							>
+								Select None
+							</button>
+							<span class="ml-auto text-sm text-theme-muted">
+								{selectedCount} selected
+							</span>
+						</div>
+					{/if}
+
+					<div class="space-y-2">
+						{@render children()}
+					</div>
+
+					<!-- Selected Total -->
+					{#if showTotal && selectedCount > 0}
+						<div class="mt-4 rounded-lg p-3 {colorClasses.totalBg}">
+							<div class="flex items-center justify-between">
+								<span class="text-sm font-medium {colorClasses.totalText}"> Selected Total: </span>
+								<span class="text-lg font-bold {colorClasses.totalText}">
+									{formatCurrency(selectedTotal)}
+								</span>
+							</div>
+						</div>
+					{/if}
+				{/if}
+
+				{#if error}
+					<div class="mt-4 rounded-lg bg-error-500/10 p-3">
+						<p class="text-sm text-error-600 dark:text-error-400">{error}</p>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Footer -->
+			<div class="flex items-center justify-end gap-3 border-t border-theme px-6 py-4">
+				<button onclick={handleClose} class="btn-ghost" disabled={saving}> Cancel </button>
+				<button onclick={onSave} class="btn-primary" disabled={saving || selectedCount === 0}>
+					{#if saving}
+						Adding...
+					{:else}
+						Add {selectedCount}
+						{selectedCount === 1 ? itemName : plural}
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/shared/TabFilter.svelte b/src/lib/components/shared/TabFilter.svelte
new file mode 100644
index 0000000..808bc2a
--- /dev/null
+++ b/src/lib/components/shared/TabFilter.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+
+	interface Tab {
+		id: string;
+		label: string;
+		count?: number;
+	}
+
+	interface Props {
+		tabs: Tab[];
+		paramName?: string;
+		class?: string;
+	}
+
+	let { tabs, paramName = 'tab', class: className = '' }: Props = $props();
+
+	let currentTab = $derived(page.url.searchParams.get(paramName) ?? tabs[0]?.id ?? '');
+
+	function selectTab(tabId: string) {
+		const url = new URL(page.url);
+		if (tabId === tabs[0]?.id) {
+			url.searchParams.delete(paramName);
+		} else {
+			url.searchParams.set(paramName, tabId);
+		}
+		goto(url.toString(), { replaceState: true, noScroll: true });
+	}
+</script>
+
+<div class="flex gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/10 {className}">
+	{#each tabs as tab (tab.id)}
+		<button
+			onclick={() => selectTab(tab.id)}
+			class="flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-150
+				{currentTab === tab.id
+				? 'bg-theme-card text-theme shadow-sm'
+				: 'text-theme-secondary hover:text-theme'}"
+		>
+			{tab.label}
+			{#if tab.count !== undefined && tab.count > 0}
+				<span
+					class="flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold
+					{currentTab === tab.id
+						? 'bg-primary-500 text-white'
+						: 'bg-black/10 text-theme-secondary dark:bg-white/20'}"
+				>
+					{tab.count > 99 ? '99+' : tab.count}
+				</span>
+			{/if}
+		</button>
+	{/each}
+</div>
diff --git a/src/lib/components/shared/UnreadBadge.svelte b/src/lib/components/shared/UnreadBadge.svelte
new file mode 100644
index 0000000..0fb1f94
--- /dev/null
+++ b/src/lib/components/shared/UnreadBadge.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	interface Props {
+		count: number;
+		class?: string;
+	}
+
+	let { count, class: className = '' }: Props = $props();
+
+	let displayCount = $derived(count > 99 ? '99+' : count.toString());
+	let showBadge = $derived(count > 0);
+</script>
+
+{#if showBadge}
+	<span
+		class="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1 text-xs font-semibold text-white {className}"
+	>
+		{displayCount}
+	</span>
+{/if}
diff --git a/src/lib/components/team/MonthSelector.svelte b/src/lib/components/team/MonthSelector.svelte
new file mode 100644
index 0000000..1c0741d
--- /dev/null
+++ b/src/lib/components/team/MonthSelector.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { navigating, page } from '$app/state';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+
+	interface Props {
+		value: string; // YYYY-MM format
+	}
+
+	let { value }: Props = $props();
+
+	let isPickerOpen = $state(false);
+	let isLoading = $derived(navigating.to !== null);
+
+	// Parse current value
+	let currentYear = $derived(parseInt(value.split('-')[0]));
+	let currentMonth = $derived(parseInt(value.split('-')[1]));
+
+	// Format for display
+	let displayText = $derived(() => {
+		const date = new Date(currentYear, currentMonth - 1);
+		return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+	});
+
+	// Generate picker options (12 months: 6 before, current, 5 after)
+	let pickerMonths = $derived(() => {
+		const months: { value: string; label: string }[] = [];
+		const today = new Date();
+
+		for (let i = -6; i <= 5; i++) {
+			const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+			const year = date.getFullYear();
+			const month = (date.getMonth() + 1).toString().padStart(2, '0');
+			months.push({
+				value: `${year}-${month}`,
+				label: date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+			});
+		}
+
+		return months;
+	});
+
+	function navigateMonth(delta: number) {
+		const date = new Date(currentYear, currentMonth - 1 + delta, 1);
+		const year = date.getFullYear();
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		updateMonth(`${year}-${month}`);
+	}
+
+	function updateMonth(newMonth: string) {
+		const url = new URL(page.url);
+		url.searchParams.set('month', newMonth);
+		goto(url.toString(), { replaceState: true, noScroll: true });
+		isPickerOpen = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			isPickerOpen = false;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="relative inline-flex items-center gap-1">
+	<!-- Previous Month Button -->
+	<button
+		type="button"
+		onclick={() => navigateMonth(-1)}
+		class="rounded-lg p-2 text-theme-secondary transition-colors hover:bg-black/5 active:bg-black/10 disabled:opacity-50 dark:hover:bg-white/10 dark:active:bg-white/15"
+		aria-label="Previous month"
+		disabled={isLoading}
+	>
+		<svg
+			class="h-5 w-5"
+			style="fill: none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+		</svg>
+	</button>
+
+	<!-- Month Display / Picker Toggle -->
+	<button
+		type="button"
+		onclick={() => (isPickerOpen = !isPickerOpen)}
+		class="min-w-[160px] rounded-lg px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15"
+		aria-expanded={isPickerOpen}
+		aria-haspopup="true"
+		disabled={isLoading}
+	>
+		{#if isLoading}
+			<span class="flex items-center justify-center gap-2">
+				<IconSpinner class="h-4 w-4" />
+				<span>Loading...</span>
+			</span>
+		{:else}
+			{displayText()}
+		{/if}
+	</button>
+
+	<!-- Next Month Button -->
+	<button
+		type="button"
+		onclick={() => navigateMonth(1)}
+		class="rounded-lg p-2 text-theme-secondary transition-colors hover:bg-black/5 active:bg-black/10 disabled:opacity-50 dark:hover:bg-white/10 dark:active:bg-white/15"
+		aria-label="Next month"
+		disabled={isLoading}
+	>
+		<svg
+			class="h-5 w-5"
+			style="fill: none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+		</svg>
+	</button>
+
+	<!-- Dropdown Picker -->
+	{#if isPickerOpen}
+		<div
+			class="absolute top-full left-1/2 z-50 mt-2 min-w-[280px] -translate-x-1/2 rounded-lg border-theme bg-theme-card p-2 shadow-theme-lg"
+			role="listbox"
+		>
+			<div class="grid grid-cols-3 gap-1">
+				{#each pickerMonths() as month (month.value)}
+					<button
+						type="button"
+						onclick={() => updateMonth(month.value)}
+						class="rounded-md px-3 py-2 text-sm transition-colors
+							{month.value === value
+							? 'bg-primary-600 text-white'
+							: 'text-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+						role="option"
+						aria-selected={month.value === value}
+					>
+						{month.label}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- Click outside to close -->
+{#if isPickerOpen}
+	<button
+		type="button"
+		class="fixed inset-0 z-40"
+		onclick={() => (isPickerOpen = false)}
+		aria-label="Close month picker"
+	></button>
+{/if}
diff --git a/src/lib/components/team/StatusTabs.svelte b/src/lib/components/team/StatusTabs.svelte
new file mode 100644
index 0000000..92d754d
--- /dev/null
+++ b/src/lib/components/team/StatusTabs.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	interface Props {
+		current: string;
+		counts?: {
+			scheduled: number;
+			inProgress: number;
+			completed: number;
+		};
+		compact?: boolean;
+	}
+
+	let { current, counts, compact = false }: Props = $props();
+
+	const tabs = [
+		{ id: 'scheduled', label: 'Scheduled', countKey: 'scheduled' as const, color: 'primary' },
+		{ id: 'in_progress', label: 'In Progress', countKey: 'inProgress' as const, color: 'accent' },
+		{ id: 'completed', label: 'Completed', countKey: 'completed' as const, color: 'secondary' }
+	] as const;
+
+	// Color classes for active tabs
+	const activeColorClasses: Record<string, string> = {
+		primary: 'bg-primary-500/15 text-primary-600 dark:text-primary-400',
+		secondary: 'bg-secondary-500/15 text-secondary-600 dark:text-secondary-400',
+		accent: 'bg-accent-500/15 text-accent-600 dark:text-accent-400'
+	};
+
+	const badgeColorClasses: Record<string, string> = {
+		primary: 'bg-primary-500/20 text-primary-600 dark:text-primary-400',
+		secondary: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400',
+		accent: 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
+	};
+
+	let currentIndex = $derived(tabs.findIndex((t) => t.id === current));
+	let currentTab = $derived(tabs[currentIndex]);
+	let currentCount = $derived(counts?.[currentTab.countKey]);
+
+	function selectTab(tabId: string) {
+		const url = new URL(page.url);
+		url.searchParams.set('status', tabId);
+		goto(url.toString(), { replaceState: true, noScroll: true });
+	}
+
+	function navigateTab(delta: number) {
+		const newIndex = (currentIndex + delta + tabs.length) % tabs.length;
+		selectTab(tabs[newIndex].id);
+	}
+</script>
+
+{#if compact}
+	<!-- Compact mobile view: < Status > -->
+	<div
+		class="flex items-center justify-center gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/5"
+		role="tablist"
+	>
+		<button
+			type="button"
+			onclick={() => navigateTab(-1)}
+			class="rounded-md interactive p-2 text-theme-secondary"
+			aria-label="Previous status"
+		>
+			<svg
+				class="h-4 w-4"
+				style="fill: none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+
+		<div
+			class="flex-1 rounded-md px-4 py-2 text-center text-sm font-medium {activeColorClasses[
+				currentTab.color
+			]}"
+			role="tab"
+			aria-selected="true"
+		>
+			{currentTab.label}
+			{#if currentCount !== undefined}
+				<span
+					class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs {badgeColorClasses[currentTab.color]}"
+				>
+					{currentCount}
+				</span>
+			{/if}
+		</div>
+
+		<button
+			type="button"
+			onclick={() => navigateTab(1)}
+			class="rounded-md interactive p-2 text-theme-secondary"
+			aria-label="Next status"
+		>
+			<svg
+				class="h-4 w-4"
+				style="fill: none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+{:else}
+	<!-- Full tabs view -->
+	<div class="flex gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/5" role="tablist">
+		{#each tabs as tab (tab.id)}
+			{@const isActive = current === tab.id}
+			{@const count = counts?.[tab.countKey]}
+			<button
+				type="button"
+				onclick={() => selectTab(tab.id)}
+				class="flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors
+					{isActive
+					? activeColorClasses[tab.color]
+					: 'text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/5'}"
+				role="tab"
+				aria-selected={isActive}
+				aria-controls="{tab.id}-panel"
+			>
+				{tab.label}
+				{#if count !== undefined}
+					<span
+						class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs
+							{isActive ? badgeColorClasses[tab.color] : 'bg-black/5 dark:bg-white/5'}"
+					>
+						{count}
+					</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+{/if}
diff --git a/src/lib/components/team/TeamPageHeader.svelte b/src/lib/components/team/TeamPageHeader.svelte
new file mode 100644
index 0000000..95ebbaf
--- /dev/null
+++ b/src/lib/components/team/TeamPageHeader.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import { goto, beforeNavigate } from '$app/navigation';
+
+	interface Props {
+		title: string;
+		subtitle?: string;
+		subtitleSnippet?: Snippet<[{ toggleMenu: () => void }]>;
+		colorScheme?: 'primary' | 'secondary' | 'accent' | 'accent2';
+		showBackButton?: boolean;
+		backHref?: string;
+		showNavMenu?: boolean;
+		invalidateOnBack?: boolean;
+	}
+
+	let {
+		title,
+		subtitle,
+		subtitleSnippet,
+		colorScheme = 'primary',
+		showBackButton = true,
+		backHref = '/team',
+		showNavMenu = false,
+		invalidateOnBack = false
+	}: Props = $props();
+
+	function handleBack(event: MouseEvent) {
+		if (invalidateOnBack) {
+			event.preventDefault();
+			goto(backHref, { invalidateAll: true });
+		}
+	}
+
+	let menuOpen = $state(false);
+	let isNavigatingBack = $state(false);
+
+	// Track when we're navigating to the back URL
+	beforeNavigate(({ to }) => {
+		if (to?.url.pathname === backHref) {
+			isNavigatingBack = true;
+		}
+	});
+
+	function toggleMenu() {
+		menuOpen = !menuOpen;
+	}
+
+	const colorClasses: Record<string, string> = {
+		primary: 'text-primary-600 dark:text-primary-400',
+		secondary: 'text-secondary-600 dark:text-secondary-400',
+		accent: 'text-accent-600 dark:text-accent-400',
+		accent2: 'text-accent2-600 dark:text-accent2-400'
+	};
+
+	const navItems = [
+		{
+			label: 'View Accounts',
+			href: '/team/accounts',
+			color: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'My Services',
+			href: '/team/services',
+			color: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{ label: 'My Projects', href: '/team/projects', color: 'text-accent-600 dark:text-accent-400' },
+		{ label: 'My Reports', href: '/team/reports', color: 'text-accent2-600 dark:text-accent2-400' }
+	];
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.nav-menu-container') && !target.closest('.menu-trigger')) {
+			menuOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			menuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
+
+<div class="mb-6">
+	{#if showBackButton}
+		<!-- 3-column grid: back button | content | spacer for centering -->
+		<div class="grid grid-cols-[auto_1fr_auto] items-start gap-4">
+			<a
+				href={backHref}
+				onclick={handleBack}
+				class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+				aria-label="Go back"
+			>
+				{#if isNavigatingBack}
+					<svg
+						class="h-5 w-5 animate-spin {colorClasses[colorScheme]}"
+						style="fill: none"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{:else}
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				{/if}
+			</a>
+			<div>
+				<div class="flex items-center gap-2">
+					<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+					{#if showNavMenu}
+						<div class="nav-menu-container relative">
+							<button
+								type="button"
+								onclick={() => (menuOpen = !menuOpen)}
+								class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+								aria-label="Navigation menu"
+								aria-expanded={menuOpen}
+							>
+								<svg
+									class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</button>
+
+							{#if menuOpen}
+								<div
+									class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+								>
+									{#each navItems as item (item.href)}
+										<a
+											href={item.href}
+											class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+											item.href
+												? 'font-semibold'
+												: ''}"
+											onclick={() => (menuOpen = false)}
+										>
+											{item.label}
+										</a>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+				{#if subtitleSnippet}
+					<p class="page-subtitle">
+						{@render subtitleSnippet({ toggleMenu })}
+					</p>
+				{:else if subtitle}
+					<p class="page-subtitle">{subtitle}</p>
+				{/if}
+			</div>
+			<!-- Spacer to balance the back button and center the content -->
+			<div class="w-7"></div>
+		</div>
+	{:else}
+		<!-- No back button - simple layout -->
+		<div class="flex items-center gap-2">
+			<h1 class="page-title {colorClasses[colorScheme]}">{title}</h1>
+			{#if showNavMenu}
+				<div class="nav-menu-container relative">
+					<button
+						type="button"
+						onclick={() => (menuOpen = !menuOpen)}
+						class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Navigation menu"
+						aria-expanded={menuOpen}
+					>
+						<svg
+							class="h-5 w-5 transition-transform {menuOpen ? 'rotate-90' : ''}"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+
+					{#if menuOpen}
+						<div
+							class="fixed z-50 mt-2 min-w-48 rounded-lg border border-theme bg-theme-card py-2 shadow-theme-lg"
+						>
+							{#each navItems as item (item.href)}
+								<a
+									href={item.href}
+									class="block interactive px-4 py-2 text-sm {item.color} {page.url.pathname ===
+									item.href
+										? 'font-semibold'
+										: ''}"
+									onclick={() => (menuOpen = false)}
+								>
+									{item.label}
+								</a>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if subtitleSnippet}
+			<p class="page-subtitle">
+				{@render subtitleSnippet({ toggleMenu })}
+			</p>
+		{:else if subtitle}
+			<p class="page-subtitle">{subtitle}</p>
+		{/if}
+	{/if}
+</div>
diff --git a/src/lib/components/team/WorkListLayout.svelte b/src/lib/components/team/WorkListLayout.svelte
new file mode 100644
index 0000000..e6e138d
--- /dev/null
+++ b/src/lib/components/team/WorkListLayout.svelte
@@ -0,0 +1,131 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import { navigating } from '$app/state';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from './TeamPageHeader.svelte';
+	import MonthSelector from './MonthSelector.svelte';
+	import StatusTabs from './StatusTabs.svelte';
+
+	interface Props {
+		title: string;
+		subtitle: string;
+		items: T[];
+		currentStatus: string;
+		currentMonth: string;
+		counts?: {
+			scheduled: number;
+			inProgress: number;
+			completed: number;
+		};
+		item: Snippet<[T]>;
+		emptyIcon?: Snippet;
+		emptyTitle?: string;
+		emptyText?: string;
+		colorScheme?: 'primary' | 'secondary' | 'accent' | 'accent2';
+	}
+
+	let {
+		title,
+		subtitle,
+		items,
+		currentStatus,
+		currentMonth,
+		counts,
+		item,
+		emptyIcon,
+		emptyTitle = 'No items found',
+		emptyText = 'There are no items matching your current filters.',
+		colorScheme = 'primary'
+	}: Props = $props();
+
+	let hasItems = $derived(items.length > 0);
+	let isLoading = $derived(navigating.to !== null);
+</script>
+
+<svelte:head>
+	<title>{title} - Team - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<TeamPageHeader {title} {subtitle} {colorScheme} />
+
+		<!-- Filters Row -->
+		<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<MonthSelector value={currentMonth} />
+			<div class="sm:hidden">
+				<StatusTabs current={currentStatus} {counts} compact />
+			</div>
+		</div>
+
+		<!-- Desktop Tabs -->
+		<div class="mb-6 hidden sm:block">
+			<StatusTabs current={currentStatus} {counts} />
+		</div>
+
+		<!-- Content -->
+		<div role="tabpanel" id="{currentStatus}-panel" class="relative">
+			{#if isLoading}
+				<!-- Loading Overlay -->
+				<div
+					class="bg-theme/50 absolute inset-0 z-10 flex min-h-[200px] items-start justify-center pt-12 backdrop-blur-sm"
+				>
+					<div class="flex flex-col items-center gap-3">
+						<svg
+							class="h-8 w-8 animate-spin text-theme-secondary"
+							style="fill: none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+						<span class="text-sm text-theme-secondary">Loading...</span>
+					</div>
+				</div>
+			{/if}
+
+			{#if hasItems}
+				<div class="space-y-3">
+					{#each items as itemData, index (index)}
+						{@render item(itemData)}
+					{/each}
+				</div>
+			{:else if !isLoading}
+				<!-- Empty State (only show when not loading) -->
+				<div class="empty-state">
+					{#if emptyIcon}
+						{@render emptyIcon()}
+					{:else}
+						<svg
+							class="empty-state-icon"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+							/>
+						</svg>
+					{/if}
+					<h2 class="empty-state-title">{emptyTitle}</h2>
+					<p class="empty-state-text">{emptyText}</p>
+				</div>
+			{/if}
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/lib/data/eventTypes.ts b/src/lib/data/eventTypes.ts
new file mode 100644
index 0000000..6908424
--- /dev/null
+++ b/src/lib/data/eventTypes.ts
@@ -0,0 +1,286 @@
+export interface EventType {
+	value: string;
+	label: string;
+}
+
+export interface EventTypeCategory {
+	name: string;
+	label: string;
+	types: EventType[];
+}
+
+export const EVENT_TYPE_CATEGORIES: EventTypeCategory[] = [
+	{
+		name: 'customer',
+		label: 'Customer',
+		types: [
+			{ value: 'CUSTOMER_CREATED', label: 'Customer Created' },
+			{ value: 'CUSTOMER_UPDATED', label: 'Customer Updated' },
+			{ value: 'CUSTOMER_DELETED', label: 'Customer Deleted' },
+			{ value: 'CUSTOMER_STATUS_CHANGED', label: 'Customer Status Changed' },
+			{ value: 'CUSTOMER_ADDRESS_CREATED', label: 'Customer Address Created' },
+			{ value: 'CUSTOMER_ADDRESS_UPDATED', label: 'Customer Address Updated' },
+			{ value: 'CUSTOMER_ADDRESS_DELETED', label: 'Customer Address Deleted' },
+			{ value: 'CUSTOMER_CONTACT_CREATED', label: 'Customer Contact Created' },
+			{ value: 'CUSTOMER_CONTACT_UPDATED', label: 'Customer Contact Updated' },
+			{ value: 'CUSTOMER_CONTACT_DELETED', label: 'Customer Contact Deleted' }
+		]
+	},
+	{
+		name: 'account',
+		label: 'Account',
+		types: [
+			{ value: 'ACCOUNT_CREATED', label: 'Account Created' },
+			{ value: 'ACCOUNT_UPDATED', label: 'Account Updated' },
+			{ value: 'ACCOUNT_DELETED', label: 'Account Deleted' },
+			{ value: 'ACCOUNT_STATUS_CHANGED', label: 'Account Status Changed' },
+			{ value: 'ACCOUNT_ADDRESS_CREATED', label: 'Account Address Created' },
+			{ value: 'ACCOUNT_ADDRESS_UPDATED', label: 'Account Address Updated' },
+			{ value: 'ACCOUNT_ADDRESS_DELETED', label: 'Account Address Deleted' },
+			{ value: 'ACCOUNT_CONTACT_CREATED', label: 'Account Contact Created' },
+			{ value: 'ACCOUNT_CONTACT_UPDATED', label: 'Account Contact Updated' },
+			{ value: 'ACCOUNT_CONTACT_DELETED', label: 'Account Contact Deleted' }
+		]
+	},
+	{
+		name: 'service',
+		label: 'Service',
+		types: [
+			{ value: 'SERVICE_CREATED', label: 'Service Created' },
+			{ value: 'SERVICE_UPDATED', label: 'Service Updated' },
+			{ value: 'SERVICE_DELETED', label: 'Service Deleted' },
+			{ value: 'SERVICE_STATUS_CHANGED', label: 'Service Status Changed' },
+			{ value: 'SERVICE_COMPLETED', label: 'Service Completed' },
+			{ value: 'SERVICE_CANCELLED', label: 'Service Cancelled' },
+			{ value: 'SERVICE_DISPATCHED', label: 'Service Dispatched' },
+			{ value: 'SERVICE_TEAM_ASSIGNED', label: 'Team Assigned to Service' },
+			{ value: 'SERVICE_TEAM_UNASSIGNED', label: 'Team Unassigned from Service' },
+			{ value: 'SERVICES_BULK_GENERATED', label: 'Services Bulk Generated' }
+		]
+	},
+	{
+		name: 'service_session',
+		label: 'Service Session',
+		types: [
+			{ value: 'SERVICE_SESSION_OPENED', label: 'Service Session Opened' },
+			{ value: 'SERVICE_SESSION_CLOSED', label: 'Service Session Closed' },
+			{ value: 'SERVICE_SESSION_REVERTED', label: 'Service Session Reverted' },
+			{ value: 'SERVICE_TASK_COMPLETED', label: 'Service Task Completed' },
+			{ value: 'SERVICE_TASK_UNCOMPLETED', label: 'Service Task Uncompleted' }
+		]
+	},
+	{
+		name: 'schedule',
+		label: 'Schedule',
+		types: [
+			{ value: 'SCHEDULE_CREATED', label: 'Schedule Created' },
+			{ value: 'SCHEDULE_UPDATED', label: 'Schedule Updated' },
+			{ value: 'SCHEDULE_DELETED', label: 'Schedule Deleted' },
+			{ value: 'SCHEDULE_FREQUENCY_CHANGED', label: 'Schedule Frequency Changed' }
+		]
+	},
+	{
+		name: 'project',
+		label: 'Project',
+		types: [
+			{ value: 'PROJECT_CREATED', label: 'Project Created' },
+			{ value: 'PROJECT_UPDATED', label: 'Project Updated' },
+			{ value: 'PROJECT_STATUS_CHANGED', label: 'Project Status Changed' },
+			{ value: 'PROJECT_COMPLETED', label: 'Project Completed' },
+			{ value: 'PROJECT_CANCELLED', label: 'Project Cancelled' },
+			{ value: 'PROJECT_DISPATCHED', label: 'Project Dispatched' }
+		]
+	},
+	{
+		name: 'project_session',
+		label: 'Project Session',
+		types: [
+			{ value: 'PROJECT_SESSION_OPENED', label: 'Project Session Opened' },
+			{ value: 'PROJECT_SESSION_CLOSED', label: 'Project Session Closed' },
+			{ value: 'PROJECT_SESSION_REVERTED', label: 'Project Session Reverted' },
+			{ value: 'PROJECT_TASK_COMPLETED', label: 'Project Task Completed' },
+			{ value: 'PROJECT_TASK_UNCOMPLETED', label: 'Project Task Uncompleted' }
+		]
+	},
+	{
+		name: 'project_scope',
+		label: 'Project Scope',
+		types: [
+			{ value: 'PROJECT_SCOPE_CREATED', label: 'Project Scope Created' },
+			{ value: 'PROJECT_SCOPE_UPDATED', label: 'Project Scope Updated' },
+			{ value: 'PROJECT_SCOPE_DELETED', label: 'Project Scope Deleted' },
+			{ value: 'PROJECT_SCOPE_CATEGORY_CREATED', label: 'Project Scope Category Created' },
+			{ value: 'PROJECT_SCOPE_CATEGORY_UPDATED', label: 'Project Scope Category Updated' },
+			{ value: 'PROJECT_SCOPE_CATEGORY_DELETED', label: 'Project Scope Category Deleted' },
+			{ value: 'PROJECT_SCOPE_TASK_CREATED', label: 'Project Scope Task Created' },
+			{ value: 'PROJECT_SCOPE_TASK_UPDATED', label: 'Project Scope Task Updated' },
+			{ value: 'PROJECT_SCOPE_TASK_DELETED', label: 'Project Scope Task Deleted' },
+			{ value: 'PROJECT_SCOPE_TEMPLATE_INSTANTIATED', label: 'Project Scope Template Instantiated' }
+		]
+	},
+	{
+		name: 'scope',
+		label: 'Scope',
+		types: [
+			{ value: 'SCOPE_CREATED', label: 'Scope Created' },
+			{ value: 'SCOPE_UPDATED', label: 'Scope Updated' },
+			{ value: 'SCOPE_DELETED', label: 'Scope Deleted' },
+			{ value: 'AREA_CREATED', label: 'Area Created' },
+			{ value: 'AREA_UPDATED', label: 'Area Updated' },
+			{ value: 'AREA_DELETED', label: 'Area Deleted' },
+			{ value: 'TASK_CREATED', label: 'Task Created' },
+			{ value: 'TASK_UPDATED', label: 'Task Updated' },
+			{ value: 'TASK_DELETED', label: 'Task Deleted' },
+			{ value: 'TASK_COMPLETION_RECORDED', label: 'Task Completion Recorded' }
+		]
+	},
+	{
+		name: 'scope_template',
+		label: 'Scope Template',
+		types: [
+			{ value: 'SCOPE_TEMPLATE_CREATED', label: 'Scope Template Created' },
+			{ value: 'SCOPE_TEMPLATE_UPDATED', label: 'Scope Template Updated' },
+			{ value: 'SCOPE_TEMPLATE_DELETED', label: 'Scope Template Deleted' },
+			{ value: 'SCOPE_TEMPLATE_INSTANTIATED', label: 'Scope Template Instantiated' },
+			{ value: 'AREA_TEMPLATE_CREATED', label: 'Area Template Created' },
+			{ value: 'AREA_TEMPLATE_UPDATED', label: 'Area Template Updated' },
+			{ value: 'AREA_TEMPLATE_DELETED', label: 'Area Template Deleted' },
+			{ value: 'TASK_TEMPLATE_CREATED', label: 'Task Template Created' },
+			{ value: 'TASK_TEMPLATE_UPDATED', label: 'Task Template Updated' },
+			{ value: 'TASK_TEMPLATE_DELETED', label: 'Task Template Deleted' }
+		]
+	},
+	{
+		name: 'team_profile',
+		label: 'Team Profile',
+		types: [
+			{ value: 'TEAM_PROFILE_CREATED', label: 'Team Profile Created' },
+			{ value: 'TEAM_PROFILE_UPDATED', label: 'Team Profile Updated' },
+			{ value: 'TEAM_PROFILE_DELETED', label: 'Team Profile Deleted' },
+			{ value: 'TEAM_PROFILE_ROLE_CHANGED', label: 'Team Profile Role Changed' }
+		]
+	},
+	{
+		name: 'customer_profile',
+		label: 'Customer Profile',
+		types: [
+			{ value: 'CUSTOMER_PROFILE_CREATED', label: 'Customer Profile Created' },
+			{ value: 'CUSTOMER_PROFILE_UPDATED', label: 'Customer Profile Updated' },
+			{ value: 'CUSTOMER_PROFILE_DELETED', label: 'Customer Profile Deleted' },
+			{ value: 'CUSTOMER_PROFILE_ACCESS_GRANTED', label: 'Customer Profile Access Granted' },
+			{ value: 'CUSTOMER_PROFILE_ACCESS_REVOKED', label: 'Customer Profile Access Revoked' }
+		]
+	},
+	{
+		name: 'punchlist',
+		label: 'Punchlist',
+		types: [
+			{ value: 'ACCOUNT_PUNCHLIST_CREATED', label: 'Account Punchlist Created' },
+			{ value: 'ACCOUNT_PUNCHLIST_UPDATED', label: 'Account Punchlist Updated' },
+			{ value: 'ACCOUNT_PUNCHLIST_DELETED', label: 'Account Punchlist Deleted' },
+			{ value: 'PROJECT_PUNCHLIST_CREATED', label: 'Project Punchlist Created' },
+			{ value: 'PROJECT_PUNCHLIST_UPDATED', label: 'Project Punchlist Updated' },
+			{ value: 'PROJECT_PUNCHLIST_DELETED', label: 'Project Punchlist Deleted' },
+			{ value: 'PUNCHLIST_STATUS_CHANGED', label: 'Punchlist Status Changed' },
+			{ value: 'PUNCHLIST_PRIORITY_CHANGED', label: 'Punchlist Priority Changed' }
+		]
+	},
+	{
+		name: 'media',
+		label: 'Session Media',
+		types: [
+			{ value: 'SESSION_IMAGE_UPLOADED', label: 'Session Image Uploaded' },
+			{ value: 'SESSION_IMAGE_UPDATED', label: 'Session Image Updated' },
+			{ value: 'SESSION_IMAGE_DELETED', label: 'Session Image Deleted' },
+			{ value: 'SESSION_VIDEO_UPLOADED', label: 'Session Video Uploaded' },
+			{ value: 'SESSION_VIDEO_UPDATED', label: 'Session Video Updated' },
+			{ value: 'SESSION_VIDEO_DELETED', label: 'Session Video Deleted' },
+			{ value: 'SESSION_MEDIA_INTERNAL_FLAGGED', label: 'Session Media Flagged as Internal' }
+		]
+	},
+	{
+		name: 'notes',
+		label: 'Session Notes',
+		types: [
+			{ value: 'SESSION_NOTE_CREATED', label: 'Session Note Created' },
+			{ value: 'SESSION_NOTE_UPDATED', label: 'Session Note Updated' },
+			{ value: 'SESSION_NOTE_DELETED', label: 'Session Note Deleted' }
+		]
+	},
+	{
+		name: 'report',
+		label: 'Report',
+		types: [
+			{ value: 'REPORT_CREATED', label: 'Report Created' },
+			{ value: 'REPORT_SUBMITTED', label: 'Report Submitted' },
+			{ value: 'REPORT_APPROVED', label: 'Report Approved' }
+		]
+	},
+	{
+		name: 'invoice',
+		label: 'Invoice',
+		types: [
+			{ value: 'INVOICE_GENERATED', label: 'Invoice Generated' },
+			{ value: 'INVOICE_SENT', label: 'Invoice Sent' },
+			{ value: 'INVOICE_PAID', label: 'Invoice Paid' },
+			{ value: 'INVOICE_OVERDUE', label: 'Invoice Overdue' },
+			{ value: 'INVOICE_CANCELLED', label: 'Invoice Cancelled' }
+		]
+	},
+	{
+		name: 'labor_revenue',
+		label: 'Labor & Revenue',
+		types: [
+			{ value: 'LABOR_RATE_CREATED', label: 'Labor Rate Created' },
+			{ value: 'LABOR_RATE_UPDATED', label: 'Labor Rate Updated' },
+			{ value: 'LABOR_RATE_DELETED', label: 'Labor Rate Deleted' },
+			{ value: 'REVENUE_RATE_CREATED', label: 'Revenue Rate Created' },
+			{ value: 'REVENUE_RATE_UPDATED', label: 'Revenue Rate Updated' },
+			{ value: 'REVENUE_RATE_DELETED', label: 'Revenue Rate Deleted' }
+		]
+	},
+	{
+		name: 'messaging',
+		label: 'Messaging',
+		types: [
+			{ value: 'CONVERSATION_CREATED', label: 'Conversation Created' },
+			{ value: 'CONVERSATION_ARCHIVED', label: 'Conversation Archived' },
+			{ value: 'CONVERSATION_PARTICIPANT_ADDED', label: 'Participant Added to Conversation' },
+			{ value: 'CONVERSATION_PARTICIPANT_REMOVED', label: 'Participant Removed from Conversation' },
+			{ value: 'MESSAGE_SENT', label: 'Message Sent' },
+			{ value: 'MESSAGE_RECEIVED', label: 'Message Received' },
+			{ value: 'MESSAGE_READ', label: 'Message Read' },
+			{ value: 'MESSAGE_DELETED', label: 'Message Deleted' }
+		]
+	},
+	{
+		name: 'monitoring',
+		label: 'Monitoring',
+		types: [
+			{ value: 'MONITORING_COMMAND_EXECUTED', label: 'Monitoring Command Executed' },
+			{ value: 'MONITORING_INCOMPLETE_WORK_REMINDER', label: 'Incomplete Work Reminder' },
+			{ value: 'MONITORING_NIGHTLY_ASSIGNMENTS', label: 'Nightly Assignments' }
+		]
+	}
+];
+
+// Flat list of all event types for validation
+export const ALL_EVENT_TYPES = EVENT_TYPE_CATEGORIES.flatMap((cat) =>
+	cat.types.map((t) => t.value)
+);
+
+// Lookup map for quick label retrieval
+export const EVENT_TYPE_LABELS: Record<string, string> = Object.fromEntries(
+	EVENT_TYPE_CATEGORIES.flatMap((cat) => cat.types.map((t) => [t.value, t.label]))
+);
+
+// Get label for an event type
+export function getEventTypeLabel(eventType: string): string {
+	return (
+		EVENT_TYPE_LABELS[eventType] ||
+		eventType
+			.replace(/_/g, ' ')
+			.toLowerCase()
+			.replace(/\b\w/g, (c) => c.toUpperCase())
+	);
+}
diff --git a/src/lib/data/notificationMetadata.ts b/src/lib/data/notificationMetadata.ts
new file mode 100644
index 0000000..eb5cdf6
--- /dev/null
+++ b/src/lib/data/notificationMetadata.ts
@@ -0,0 +1,121 @@
+// Notification template metadata field definitions
+// Based on backend metadata enrichment per event domain
+
+export interface MetadataField {
+	name: string;
+	description: string;
+}
+
+export interface MetadataDomain {
+	name: string;
+	label: string;
+	fields: MetadataField[];
+	eventPrefixes: string[];
+}
+
+export const METADATA_DOMAINS: MetadataDomain[] = [
+	{
+		name: 'service',
+		label: 'Service',
+		eventPrefixes: ['SERVICE_'],
+		fields: [
+			{ name: 'date', description: 'Service date (e.g., 2025-01-15)' },
+			{ name: 'account_name', description: 'Account name' },
+			{ name: 'customer_name', description: 'Parent customer name' },
+			{ name: 'address', description: 'Street and city' },
+			{ name: 'service_id', description: 'Service UUID (session events only)' }
+		]
+	},
+	{
+		name: 'project',
+		label: 'Project',
+		eventPrefixes: ['PROJECT_'],
+		fields: [
+			{ name: 'project_name', description: 'Project name' },
+			{ name: 'date', description: 'Project date' },
+			{ name: 'account_name', description: 'Account name (or customer name if direct)' },
+			{ name: 'customer_name', description: 'Parent customer name' },
+			{ name: 'address', description: 'Project location' },
+			{ name: 'project_id', description: 'Project UUID (session/punchlist events)' }
+		]
+	},
+	{
+		name: 'account',
+		label: 'Account',
+		eventPrefixes: ['ACCOUNT_'],
+		fields: [
+			{ name: 'account_name', description: 'Account name' },
+			{ name: 'customer_name', description: 'Parent customer name' },
+			{ name: 'account_id', description: 'Account UUID (address/contact/punchlist events)' },
+			{ name: 'address', description: 'Address street and city (address events only)' }
+		]
+	},
+	{
+		name: 'customer',
+		label: 'Customer',
+		eventPrefixes: ['CUSTOMER_'],
+		fields: [
+			{ name: 'customer_name', description: 'Customer name' },
+			{ name: 'customer_id', description: 'Customer UUID (address/contact events)' },
+			{ name: 'address', description: 'Address street and city (address events only)' }
+		]
+	},
+	{
+		name: 'schedule',
+		label: 'Schedule',
+		eventPrefixes: ['SCHEDULE_'],
+		fields: [
+			{ name: 'account_name', description: 'Account name' },
+			{ name: 'customer_name', description: 'Parent customer name' }
+		]
+	},
+	{
+		name: 'scope',
+		label: 'Scope',
+		eventPrefixes: ['SCOPE_', 'AREA_', 'TASK_'],
+		fields: [
+			{ name: 'account_name', description: 'Account name' },
+			{ name: 'customer_name', description: 'Parent customer name' }
+		]
+	},
+	{
+		name: 'punchlist',
+		label: 'Punchlist',
+		eventPrefixes: ['PUNCHLIST_'],
+		fields: [
+			{ name: 'account_name', description: 'Account name' },
+			{ name: 'customer_name', description: 'Parent customer name' },
+			{ name: 'project_name', description: 'Project name (project punchlists only)' }
+		]
+	}
+];
+
+// Universal fields available for all events
+export const UNIVERSAL_FIELDS: MetadataField[] = [
+	{ name: 'event_type', description: 'The type of event (e.g., SERVICE_COMPLETED)' },
+	{ name: 'entity_type', description: 'The type of entity (e.g., Service, Project)' },
+	{ name: 'entity_id', description: 'The ID of the related entity' },
+	{ name: 'timestamp', description: 'When the event occurred' }
+];
+
+/**
+ * Get the relevant metadata domains based on selected event types
+ */
+export function getActiveDomainsForEvents(eventTypes: string[]): MetadataDomain[] {
+	if (!eventTypes || eventTypes.length === 0) {
+		return [];
+	}
+
+	const activeDomains = new Set<MetadataDomain>();
+
+	for (const eventType of eventTypes) {
+		for (const domain of METADATA_DOMAINS) {
+			if (domain.eventPrefixes.some((prefix) => eventType.startsWith(prefix))) {
+				activeDomains.add(domain);
+				break;
+			}
+		}
+	}
+
+	return Array.from(activeDomains);
+}
diff --git a/src/lib/graphql/client.ts b/src/lib/graphql/client.ts
new file mode 100644
index 0000000..4a1208c
--- /dev/null
+++ b/src/lib/graphql/client.ts
@@ -0,0 +1,29 @@
+import { HoudiniClient, fetch as houdiniFetch } from '$houdini';
+
+const API_URL = 'https://api.example.com/v1/graphql/';
+
+export default new HoudiniClient({
+	url: API_URL,
+	plugins: [
+		houdiniFetch(async ({ fetch, text, variables, metadata }) => {
+			const headers: Record<string, string> = {
+				'Content-Type': 'application/json'
+			};
+
+			// Server-side: forward cookie from metadata
+			const cookie = (metadata as { cookie?: string } | undefined)?.cookie;
+			if (cookie) {
+				headers['Cookie'] = cookie;
+			}
+
+			const res = await fetch(API_URL, {
+				method: 'POST',
+				headers,
+				credentials: 'include', // Client-side: include cookies automatically
+				body: JSON.stringify({ query: text, variables })
+			});
+
+			return await res.json();
+		})
+	]
+});
diff --git a/src/lib/graphql/mutations/accounts/CreateAccount.graphql b/src/lib/graphql/mutations/accounts/CreateAccount.graphql
new file mode 100644
index 0000000..2f38107
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/CreateAccount.graphql
@@ -0,0 +1,42 @@
+mutation CreateAccount($input: AccountInput!) {
+	createAccount(input: $input) {
+		id
+		customerId
+		name
+		startDate
+		endDate
+		status
+		isActive
+		primaryAddress {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			isActive
+			isPrimary
+			notes
+		}
+		addresses {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			isActive
+			isPrimary
+			notes
+		}
+		contacts {
+			id
+			firstName
+			lastName
+			fullName
+			email
+			phone
+			isActive
+			isPrimary
+			notes
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/CreateAccountAddress.graphql b/src/lib/graphql/mutations/accounts/CreateAccountAddress.graphql
new file mode 100644
index 0000000..a3ac273
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/CreateAccountAddress.graphql
@@ -0,0 +1,13 @@
+mutation CreateAccountAddress($input: AccountAddressInput!) {
+	createAccountAddress(input: $input) {
+		id
+		streetAddress
+		name
+		city
+		state
+		zipCode
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/CreateAccountContact.graphql b/src/lib/graphql/mutations/accounts/CreateAccountContact.graphql
new file mode 100644
index 0000000..1f9eb5a
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/CreateAccountContact.graphql
@@ -0,0 +1,13 @@
+mutation CreateAccountContact($input: AccountContactInput!) {
+	createAccountContact(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/CreateLabor.graphql b/src/lib/graphql/mutations/accounts/CreateLabor.graphql
new file mode 100644
index 0000000..1837705
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/CreateLabor.graphql
@@ -0,0 +1,8 @@
+mutation CreateLabor($input: LaborInput!) {
+	createLabor(input: $input) {
+		id
+		amount
+		startDate
+		endDate
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/CreateRevenue.graphql b/src/lib/graphql/mutations/accounts/CreateRevenue.graphql
new file mode 100644
index 0000000..3470db6
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/CreateRevenue.graphql
@@ -0,0 +1,9 @@
+mutation CreateRevenue($input: RevenueInput!) {
+	createRevenue(input: $input) {
+		id
+		amount
+		startDate
+		endDate
+		waveServiceId
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/DeleteAccount.graphql b/src/lib/graphql/mutations/accounts/DeleteAccount.graphql
new file mode 100644
index 0000000..ee354ac
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/DeleteAccount.graphql
@@ -0,0 +1,3 @@
+mutation DeleteAccount($id: ID!) {
+	deleteAccount(id: $id)
+}
diff --git a/src/lib/graphql/mutations/accounts/DeleteAccountAddress.graphql b/src/lib/graphql/mutations/accounts/DeleteAccountAddress.graphql
new file mode 100644
index 0000000..4bf5f53
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/DeleteAccountAddress.graphql
@@ -0,0 +1,3 @@
+mutation DeleteAccountAddress($id: ID!) {
+	deleteAccountAddress(id: $id)
+}
diff --git a/src/lib/graphql/mutations/accounts/DeleteAccountContact.graphql b/src/lib/graphql/mutations/accounts/DeleteAccountContact.graphql
new file mode 100644
index 0000000..89c9f26
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/DeleteAccountContact.graphql
@@ -0,0 +1,3 @@
+mutation DeleteAccountContact($id: ID!) {
+	deleteAccountContact(id: $id)
+}
diff --git a/src/lib/graphql/mutations/accounts/DeleteLabor.graphql b/src/lib/graphql/mutations/accounts/DeleteLabor.graphql
new file mode 100644
index 0000000..f6e6e28
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/DeleteLabor.graphql
@@ -0,0 +1,3 @@
+mutation DeleteLabor($id: ID!) {
+	deleteLabor(id: $id)
+}
diff --git a/src/lib/graphql/mutations/accounts/DeleteRevenue.graphql b/src/lib/graphql/mutations/accounts/DeleteRevenue.graphql
new file mode 100644
index 0000000..c054151
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/DeleteRevenue.graphql
@@ -0,0 +1,3 @@
+mutation DeleteRevenue($id: ID!) {
+	deleteRevenue(id: $id)
+}
diff --git a/src/lib/graphql/mutations/accounts/UpdateAccount.graphql b/src/lib/graphql/mutations/accounts/UpdateAccount.graphql
new file mode 100644
index 0000000..5347de9
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/UpdateAccount.graphql
@@ -0,0 +1,11 @@
+mutation UpdateAccount($input: AccountUpdateInput!) {
+	updateAccount(input: $input) {
+		id
+		customerId
+		name
+		startDate
+		endDate
+		status
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/UpdateAccountAddress.graphql b/src/lib/graphql/mutations/accounts/UpdateAccountAddress.graphql
new file mode 100644
index 0000000..b10120c
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/UpdateAccountAddress.graphql
@@ -0,0 +1,13 @@
+mutation UpdateAccountAddress($input: AccountAddressUpdateInput!) {
+	updateAccountAddress(input: $input) {
+		id
+		streetAddress
+		name
+		city
+		state
+		zipCode
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/UpdateAccountContact.graphql b/src/lib/graphql/mutations/accounts/UpdateAccountContact.graphql
new file mode 100644
index 0000000..ccef8ca
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/UpdateAccountContact.graphql
@@ -0,0 +1,13 @@
+mutation UpdateAccountContact($input: AccountContactUpdateInput!) {
+	updateAccountContact(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/UpdateLabor.graphql b/src/lib/graphql/mutations/accounts/UpdateLabor.graphql
new file mode 100644
index 0000000..fc0f2f7
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/UpdateLabor.graphql
@@ -0,0 +1,8 @@
+mutation UpdateLabor($input: LaborUpdateInput!) {
+	updateLabor(input: $input) {
+		id
+		amount
+		startDate
+		endDate
+	}
+}
diff --git a/src/lib/graphql/mutations/accounts/UpdateRevenue.graphql b/src/lib/graphql/mutations/accounts/UpdateRevenue.graphql
new file mode 100644
index 0000000..b951f2d
--- /dev/null
+++ b/src/lib/graphql/mutations/accounts/UpdateRevenue.graphql
@@ -0,0 +1,9 @@
+mutation UpdateRevenue($input: RevenueUpdateInput!) {
+	updateRevenue(input: $input) {
+		id
+		amount
+		startDate
+		endDate
+		waveServiceId
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/CreateCustomer.graphql b/src/lib/graphql/mutations/customers/CreateCustomer.graphql
new file mode 100644
index 0000000..080e119
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/CreateCustomer.graphql
@@ -0,0 +1,33 @@
+mutation CreateCustomer($input: CustomerInput!) {
+	createCustomer(input: $input) {
+		id
+		name
+		billingEmail
+		billingTerms
+		startDate
+		endDate
+		status
+		isActive
+		addresses {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			addressType
+			isActive
+			isPrimary
+		}
+		contacts {
+			id
+			firstName
+			lastName
+			fullName
+			email
+			phone
+			isActive
+			isPrimary
+			notes
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/CreateCustomerAddress.graphql b/src/lib/graphql/mutations/customers/CreateCustomerAddress.graphql
new file mode 100644
index 0000000..f88727d
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/CreateCustomerAddress.graphql
@@ -0,0 +1,12 @@
+mutation CreateCustomerAddress($input: CustomerAddressInput!) {
+	createCustomerAddress(input: $input) {
+		id
+		streetAddress
+		city
+		state
+		zipCode
+		addressType
+		isActive
+		isPrimary
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/CreateCustomerContact.graphql b/src/lib/graphql/mutations/customers/CreateCustomerContact.graphql
new file mode 100644
index 0000000..2e6d564
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/CreateCustomerContact.graphql
@@ -0,0 +1,13 @@
+mutation CreateCustomerContact($input: CustomerContactInput!) {
+	createCustomerContact(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/DeleteCustomer.graphql b/src/lib/graphql/mutations/customers/DeleteCustomer.graphql
new file mode 100644
index 0000000..7ff0221
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/DeleteCustomer.graphql
@@ -0,0 +1,3 @@
+mutation DeleteCustomer($id: ID!) {
+	deleteCustomer(id: $id)
+}
diff --git a/src/lib/graphql/mutations/customers/DeleteCustomerAddress.graphql b/src/lib/graphql/mutations/customers/DeleteCustomerAddress.graphql
new file mode 100644
index 0000000..775764f
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/DeleteCustomerAddress.graphql
@@ -0,0 +1,3 @@
+mutation DeleteCustomerAddress($id: ID!) {
+	deleteCustomerAddress(id: $id)
+}
diff --git a/src/lib/graphql/mutations/customers/DeleteCustomerContact.graphql b/src/lib/graphql/mutations/customers/DeleteCustomerContact.graphql
new file mode 100644
index 0000000..1ffdab1
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/DeleteCustomerContact.graphql
@@ -0,0 +1,3 @@
+mutation DeleteCustomerContact($id: ID!) {
+	deleteCustomerContact(id: $id)
+}
diff --git a/src/lib/graphql/mutations/customers/UpdateCustomer.graphql b/src/lib/graphql/mutations/customers/UpdateCustomer.graphql
new file mode 100644
index 0000000..25f522b
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/UpdateCustomer.graphql
@@ -0,0 +1,13 @@
+mutation UpdateCustomer($input: CustomerUpdateInput!) {
+	updateCustomer(input: $input) {
+		id
+		name
+		billingEmail
+		billingTerms
+		startDate
+		endDate
+		status
+		isActive
+		waveCustomerId
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/UpdateCustomerAddress.graphql b/src/lib/graphql/mutations/customers/UpdateCustomerAddress.graphql
new file mode 100644
index 0000000..d981fb9
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/UpdateCustomerAddress.graphql
@@ -0,0 +1,12 @@
+mutation UpdateCustomerAddress($input: CustomerAddressUpdateInput!) {
+	updateCustomerAddress(input: $input) {
+		id
+		streetAddress
+		city
+		state
+		zipCode
+		addressType
+		isActive
+		isPrimary
+	}
+}
diff --git a/src/lib/graphql/mutations/customers/UpdateCustomerContact.graphql b/src/lib/graphql/mutations/customers/UpdateCustomerContact.graphql
new file mode 100644
index 0000000..7f62397
--- /dev/null
+++ b/src/lib/graphql/mutations/customers/UpdateCustomerContact.graphql
@@ -0,0 +1,13 @@
+mutation UpdateCustomerContact($input: CustomerContactUpdateInput!) {
+	updateCustomerContact(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		isActive
+		isPrimary
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/invoice/CreateInvoice.graphql b/src/lib/graphql/mutations/invoice/CreateInvoice.graphql
new file mode 100644
index 0000000..6332005
--- /dev/null
+++ b/src/lib/graphql/mutations/invoice/CreateInvoice.graphql
@@ -0,0 +1,10 @@
+mutation CreateInvoice($input: InvoiceInput!) {
+	createInvoice(input: $input) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+	}
+}
diff --git a/src/lib/graphql/mutations/invoice/DeleteInvoice.graphql b/src/lib/graphql/mutations/invoice/DeleteInvoice.graphql
new file mode 100644
index 0000000..47076a3
--- /dev/null
+++ b/src/lib/graphql/mutations/invoice/DeleteInvoice.graphql
@@ -0,0 +1,3 @@
+mutation DeleteInvoice($id: ID!) {
+	deleteInvoice(id: $id)
+}
diff --git a/src/lib/graphql/mutations/invoice/UpdateInvoice.graphql b/src/lib/graphql/mutations/invoice/UpdateInvoice.graphql
new file mode 100644
index 0000000..b03610f
--- /dev/null
+++ b/src/lib/graphql/mutations/invoice/UpdateInvoice.graphql
@@ -0,0 +1,11 @@
+mutation UpdateInvoice($input: InvoiceUpdateInput!) {
+	updateInvoice(input: $input) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+		waveInvoiceId
+	}
+}
diff --git a/src/lib/graphql/mutations/messages/ArchiveConversation.graphql b/src/lib/graphql/mutations/messages/ArchiveConversation.graphql
new file mode 100644
index 0000000..823d12c
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/ArchiveConversation.graphql
@@ -0,0 +1,6 @@
+mutation ArchiveConversation($input: ArchiveConversationInput!) {
+	archiveConversation(input: $input) {
+		id
+		isArchived
+	}
+}
diff --git a/src/lib/graphql/mutations/messages/CreateConversation.graphql b/src/lib/graphql/mutations/messages/CreateConversation.graphql
new file mode 100644
index 0000000..7fdfe41
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/CreateConversation.graphql
@@ -0,0 +1,38 @@
+mutation CreateConversation($input: ConversationInput!) {
+	createConversation(input: $input) {
+		id
+		subject
+		conversationType
+		lastMessageAt
+		isArchived
+		metadata
+		createdAt
+		createdBy {
+			teamProfile {
+				id
+				fullName
+			}
+			customerProfile {
+				id
+				fullName
+			}
+		}
+		entity {
+			entityType
+			entityId
+		}
+		participants {
+			id
+			participant {
+				teamProfile {
+					id
+					fullName
+				}
+				customerProfile {
+					id
+					fullName
+				}
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/messages/DeleteConversation.graphql b/src/lib/graphql/mutations/messages/DeleteConversation.graphql
new file mode 100644
index 0000000..bc6eccf
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/DeleteConversation.graphql
@@ -0,0 +1,3 @@
+mutation DeleteConversation($id: ID!) {
+	deleteConversation(id: $id)
+}
diff --git a/src/lib/graphql/mutations/messages/DeleteMessage.graphql b/src/lib/graphql/mutations/messages/DeleteMessage.graphql
new file mode 100644
index 0000000..a8537cc
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/DeleteMessage.graphql
@@ -0,0 +1,3 @@
+mutation DeleteMessage($id: ID!) {
+	deleteMessage(id: $id)
+}
diff --git a/src/lib/graphql/mutations/messages/MarkConversationAsRead.graphql b/src/lib/graphql/mutations/messages/MarkConversationAsRead.graphql
new file mode 100644
index 0000000..18c4d6a
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/MarkConversationAsRead.graphql
@@ -0,0 +1,6 @@
+mutation MarkConversationAsRead($input: MarkAsReadInput!) {
+	markConversationAsRead(input: $input) {
+		id
+		unreadCount
+	}
+}
diff --git a/src/lib/graphql/mutations/messages/MuteConversation.graphql b/src/lib/graphql/mutations/messages/MuteConversation.graphql
new file mode 100644
index 0000000..e66cfd2
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/MuteConversation.graphql
@@ -0,0 +1,5 @@
+mutation MuteConversation($input: MuteConversationInput!) {
+	muteConversation(input: $input) {
+		id
+	}
+}
diff --git a/src/lib/graphql/mutations/messages/SendMessage.graphql b/src/lib/graphql/mutations/messages/SendMessage.graphql
new file mode 100644
index 0000000..480f4f3
--- /dev/null
+++ b/src/lib/graphql/mutations/messages/SendMessage.graphql
@@ -0,0 +1,26 @@
+mutation SendMessage($input: MessageInput!) {
+	sendMessage(input: $input) {
+		id
+		body
+		isSystemMessage
+		attachments
+		metadata
+		createdAt
+		updatedAt
+		canDelete
+		sender {
+			teamProfile {
+				id
+				fullName
+			}
+			customerProfile {
+				id
+				fullName
+			}
+		}
+		replyTo {
+			id
+			body
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/notifications/CreateNotificationRule.graphql b/src/lib/graphql/mutations/notifications/CreateNotificationRule.graphql
new file mode 100644
index 0000000..5900864
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/CreateNotificationRule.graphql
@@ -0,0 +1,16 @@
+mutation CreateNotificationRule($input: NotificationRuleInput!) {
+	createNotificationRule(input: $input) {
+		id
+		name
+		description
+		eventTypes
+		channels
+		targetRoles
+		targetTeamProfileIds
+		targetCustomerProfileIds
+		isActive
+		templateSubject
+		templateBody
+		conditions
+	}
+}
diff --git a/src/lib/graphql/mutations/notifications/DeleteNotification.graphql b/src/lib/graphql/mutations/notifications/DeleteNotification.graphql
new file mode 100644
index 0000000..d43ba75
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/DeleteNotification.graphql
@@ -0,0 +1,3 @@
+mutation DeleteNotification($id: ID!) {
+	deleteNotification(id: $id)
+}
diff --git a/src/lib/graphql/mutations/notifications/DeleteNotificationRule.graphql b/src/lib/graphql/mutations/notifications/DeleteNotificationRule.graphql
new file mode 100644
index 0000000..294a08d
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/DeleteNotificationRule.graphql
@@ -0,0 +1,3 @@
+mutation DeleteNotificationRule($id: ID!) {
+	deleteNotificationRule(id: $id)
+}
diff --git a/src/lib/graphql/mutations/notifications/MarkAllNotificationsAsRead.graphql b/src/lib/graphql/mutations/notifications/MarkAllNotificationsAsRead.graphql
new file mode 100644
index 0000000..2c20a1d
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/MarkAllNotificationsAsRead.graphql
@@ -0,0 +1,3 @@
+mutation MarkAllNotificationsAsRead {
+	markAllNotificationsAsRead
+}
diff --git a/src/lib/graphql/mutations/notifications/MarkNotificationAsRead.graphql b/src/lib/graphql/mutations/notifications/MarkNotificationAsRead.graphql
new file mode 100644
index 0000000..ede9567
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/MarkNotificationAsRead.graphql
@@ -0,0 +1,7 @@
+mutation MarkNotificationAsRead($id: ID!) {
+	markNotificationAsRead(id: $id) {
+		id
+		isRead
+		readAt
+	}
+}
diff --git a/src/lib/graphql/mutations/notifications/UpdateNotificationRule.graphql b/src/lib/graphql/mutations/notifications/UpdateNotificationRule.graphql
new file mode 100644
index 0000000..35860ec
--- /dev/null
+++ b/src/lib/graphql/mutations/notifications/UpdateNotificationRule.graphql
@@ -0,0 +1,16 @@
+mutation UpdateNotificationRule($input: NotificationRuleUpdateInput!) {
+	updateNotificationRule(input: $input) {
+		id
+		name
+		description
+		eventTypes
+		channels
+		targetRoles
+		targetTeamProfileIds
+		targetCustomerProfileIds
+		isActive
+		templateSubject
+		templateBody
+		conditions
+	}
+}
diff --git a/src/lib/graphql/mutations/profiles/CreateCustomerProfile.graphql b/src/lib/graphql/mutations/profiles/CreateCustomerProfile.graphql
new file mode 100644
index 0000000..d231fa3
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/CreateCustomerProfile.graphql
@@ -0,0 +1,16 @@
+mutation CreateCustomerProfile($input: CustomerProfileInput!) {
+	createCustomerProfile(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		customers {
+			id
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/profiles/CreateTeamProfile.graphql b/src/lib/graphql/mutations/profiles/CreateTeamProfile.graphql
new file mode 100644
index 0000000..abd8090
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/CreateTeamProfile.graphql
@@ -0,0 +1,13 @@
+mutation CreateTeamProfile($input: TeamProfileInput!) {
+	createTeamProfile(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		role
+	}
+}
diff --git a/src/lib/graphql/mutations/profiles/DeleteCustomerProfile.graphql b/src/lib/graphql/mutations/profiles/DeleteCustomerProfile.graphql
new file mode 100644
index 0000000..0dff2f7
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/DeleteCustomerProfile.graphql
@@ -0,0 +1,3 @@
+mutation DeleteCustomerProfile($id: ID!) {
+	deleteCustomerProfile(id: $id)
+}
diff --git a/src/lib/graphql/mutations/profiles/DeleteTeamProfile.graphql b/src/lib/graphql/mutations/profiles/DeleteTeamProfile.graphql
new file mode 100644
index 0000000..5d43297
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/DeleteTeamProfile.graphql
@@ -0,0 +1,3 @@
+mutation DeleteTeamProfile($id: ID!) {
+	deleteTeamProfile(id: $id)
+}
diff --git a/src/lib/graphql/mutations/profiles/UpdateCustomerProfile.graphql b/src/lib/graphql/mutations/profiles/UpdateCustomerProfile.graphql
new file mode 100644
index 0000000..c5ef495
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/UpdateCustomerProfile.graphql
@@ -0,0 +1,16 @@
+mutation UpdateCustomerProfile($input: CustomerProfileUpdateInput!) {
+	updateCustomerProfile(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		customers {
+			id
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/profiles/UpdateTeamProfile.graphql b/src/lib/graphql/mutations/profiles/UpdateTeamProfile.graphql
new file mode 100644
index 0000000..46443f3
--- /dev/null
+++ b/src/lib/graphql/mutations/profiles/UpdateTeamProfile.graphql
@@ -0,0 +1,13 @@
+mutation UpdateTeamProfile($input: TeamProfileUpdateInput!) {
+	updateTeamProfile(input: $input) {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		role
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/CreateProjectScope.graphql b/src/lib/graphql/mutations/projectScopes/CreateProjectScope.graphql
new file mode 100644
index 0000000..c77ca47
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/CreateProjectScope.graphql
@@ -0,0 +1,23 @@
+mutation CreateProjectScope($input: ProjectScopeInput!) {
+	createProjectScope(input: $input) {
+		id
+		projectId
+		name
+		description
+		isActive
+		projectAreas {
+			id
+			name
+			order
+			scopeId
+			projectTasks {
+				id
+				categoryId
+				description
+				checklistDescription
+				estimatedMinutes
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/CreateProjectScopeCategory.graphql b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeCategory.graphql
new file mode 100644
index 0000000..1bbba82
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeCategory.graphql
@@ -0,0 +1,16 @@
+mutation CreateProjectScopeCategory($input: ProjectScopeCategoryInput!) {
+	createProjectScopeCategory(input: $input) {
+		id
+		name
+		order
+		scopeId
+		projectTasks {
+			id
+			categoryId
+			description
+			checklistDescription
+			estimatedMinutes
+			order
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/CreateProjectScopeFromTemplate.graphql b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeFromTemplate.graphql
new file mode 100644
index 0000000..ebfcb5f
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeFromTemplate.graphql
@@ -0,0 +1,23 @@
+mutation CreateProjectScopeFromTemplate($input: CreateProjectScopeFromTemplateInput!) {
+	createProjectScopeFromTemplate(input: $input) {
+		id
+		projectId
+		name
+		description
+		isActive
+		projectAreas {
+			id
+			name
+			order
+			scopeId
+			projectTasks {
+				id
+				categoryId
+				description
+				checklistDescription
+				estimatedMinutes
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/CreateProjectScopeTask.graphql b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeTask.graphql
new file mode 100644
index 0000000..e3f82b0
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/CreateProjectScopeTask.graphql
@@ -0,0 +1,10 @@
+mutation CreateProjectScopeTask($input: ProjectScopeTaskInput!) {
+	createProjectScopeTask(input: $input) {
+		id
+		categoryId
+		description
+		checklistDescription
+		estimatedMinutes
+		order
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/DeleteProjectScope.graphql b/src/lib/graphql/mutations/projectScopes/DeleteProjectScope.graphql
new file mode 100644
index 0000000..f7bdb4d
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/DeleteProjectScope.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectScope($id: ID!) {
+	deleteProjectScope(id: $id)
+}
diff --git a/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeCategory.graphql b/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeCategory.graphql
new file mode 100644
index 0000000..e4aa6c7
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeCategory.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectScopeCategory($id: ID!) {
+	deleteProjectScopeCategory(id: $id)
+}
diff --git a/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeTask.graphql b/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeTask.graphql
new file mode 100644
index 0000000..502a7c8
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/DeleteProjectScopeTask.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectScopeTask($id: ID!) {
+	deleteProjectScopeTask(id: $id)
+}
diff --git a/src/lib/graphql/mutations/projectScopes/UpdateProjectScope.graphql b/src/lib/graphql/mutations/projectScopes/UpdateProjectScope.graphql
new file mode 100644
index 0000000..5bf8085
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/UpdateProjectScope.graphql
@@ -0,0 +1,23 @@
+mutation UpdateProjectScope($input: ProjectScopeUpdateInput!) {
+	updateProjectScope(input: $input) {
+		id
+		projectId
+		name
+		description
+		isActive
+		projectAreas {
+			id
+			name
+			order
+			scopeId
+			projectTasks {
+				id
+				categoryId
+				description
+				checklistDescription
+				estimatedMinutes
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeCategory.graphql b/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeCategory.graphql
new file mode 100644
index 0000000..718bb05
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeCategory.graphql
@@ -0,0 +1,16 @@
+mutation UpdateProjectScopeCategory($input: ProjectScopeCategoryUpdateInput!) {
+	updateProjectScopeCategory(input: $input) {
+		id
+		name
+		order
+		scopeId
+		projectTasks {
+			id
+			categoryId
+			description
+			checklistDescription
+			estimatedMinutes
+			order
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeTask.graphql b/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeTask.graphql
new file mode 100644
index 0000000..1901fe9
--- /dev/null
+++ b/src/lib/graphql/mutations/projectScopes/UpdateProjectScopeTask.graphql
@@ -0,0 +1,10 @@
+mutation UpdateProjectScopeTask($input: ProjectScopeTaskUpdateInput!) {
+	updateProjectScopeTask(input: $input) {
+		id
+		categoryId
+		description
+		checklistDescription
+		estimatedMinutes
+		order
+	}
+}
diff --git a/src/lib/graphql/mutations/projects/CreateProject.graphql b/src/lib/graphql/mutations/projects/CreateProject.graphql
new file mode 100644
index 0000000..703d894
--- /dev/null
+++ b/src/lib/graphql/mutations/projects/CreateProject.graphql
@@ -0,0 +1,22 @@
+mutation CreateProject($input: ProjectInput!) {
+	createProject(input: $input) {
+		id
+		name
+		date
+		status
+		amount
+		labor
+		customerId
+		accountAddressId
+		city
+		state
+		streetAddress
+		zipCode
+		notes
+		scopeId
+		waveServiceId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/projects/DeleteProject.graphql b/src/lib/graphql/mutations/projects/DeleteProject.graphql
new file mode 100644
index 0000000..475f020
--- /dev/null
+++ b/src/lib/graphql/mutations/projects/DeleteProject.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProject($id: ID!) {
+	deleteProject(id: $id)
+}
diff --git a/src/lib/graphql/mutations/projects/UpdateProject.graphql b/src/lib/graphql/mutations/projects/UpdateProject.graphql
new file mode 100644
index 0000000..4a70ab0
--- /dev/null
+++ b/src/lib/graphql/mutations/projects/UpdateProject.graphql
@@ -0,0 +1,23 @@
+mutation UpdateProject($input: ProjectUpdateInput!) {
+	updateProject(input: $input) {
+		id
+		name
+		date
+		status
+		amount
+		labor
+		customerId
+		accountAddressId
+		city
+		state
+		streetAddress
+		zipCode
+		notes
+		scopeId
+		calendarEventId
+		waveServiceId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/report/CreateReport.graphql b/src/lib/graphql/mutations/report/CreateReport.graphql
new file mode 100644
index 0000000..db6f0c3
--- /dev/null
+++ b/src/lib/graphql/mutations/report/CreateReport.graphql
@@ -0,0 +1,10 @@
+mutation CreateReport($input: ReportInput!) {
+	createReport(input: $input) {
+		id
+		date
+		teamMemberId
+		servicesLaborTotal
+		projectsLaborTotal
+		totalLaborValue
+	}
+}
diff --git a/src/lib/graphql/mutations/report/DeleteReport.graphql b/src/lib/graphql/mutations/report/DeleteReport.graphql
new file mode 100644
index 0000000..9d979dd
--- /dev/null
+++ b/src/lib/graphql/mutations/report/DeleteReport.graphql
@@ -0,0 +1,3 @@
+mutation DeleteReport($id: ID!) {
+	deleteReport(id: $id)
+}
diff --git a/src/lib/graphql/mutations/report/UpdateReport.graphql b/src/lib/graphql/mutations/report/UpdateReport.graphql
new file mode 100644
index 0000000..3cc77ed
--- /dev/null
+++ b/src/lib/graphql/mutations/report/UpdateReport.graphql
@@ -0,0 +1,10 @@
+mutation UpdateReport($input: ReportUpdateInput!) {
+	updateReport(input: $input) {
+		id
+		date
+		teamMemberId
+		servicesLaborTotal
+		projectsLaborTotal
+		totalLaborValue
+	}
+}
diff --git a/src/lib/graphql/mutations/schedule/CreateSchedule.graphql b/src/lib/graphql/mutations/schedule/CreateSchedule.graphql
new file mode 100644
index 0000000..88bade6
--- /dev/null
+++ b/src/lib/graphql/mutations/schedule/CreateSchedule.graphql
@@ -0,0 +1,17 @@
+mutation CreateSchedule($input: ScheduleInput!) {
+	createSchedule(input: $input) {
+		id
+		name
+		startDate
+		endDate
+		mondayService
+		tuesdayService
+		wednesdayService
+		thursdayService
+		fridayService
+		saturdayService
+		sundayService
+		weekendService
+		scheduleException
+	}
+}
diff --git a/src/lib/graphql/mutations/schedule/DeleteSchedule.graphql b/src/lib/graphql/mutations/schedule/DeleteSchedule.graphql
new file mode 100644
index 0000000..38715a9
--- /dev/null
+++ b/src/lib/graphql/mutations/schedule/DeleteSchedule.graphql
@@ -0,0 +1,3 @@
+mutation DeleteSchedule($id: ID!) {
+	deleteSchedule(id: $id)
+}
diff --git a/src/lib/graphql/mutations/schedule/UpdateSchedule.graphql b/src/lib/graphql/mutations/schedule/UpdateSchedule.graphql
new file mode 100644
index 0000000..f608e11
--- /dev/null
+++ b/src/lib/graphql/mutations/schedule/UpdateSchedule.graphql
@@ -0,0 +1,18 @@
+mutation UpdateSchedule($input: ScheduleUpdateInput!) {
+	updateSchedule(input: $input) {
+		id
+		name
+		startDate
+		endDate
+		mondayService
+		tuesdayService
+		wednesdayService
+		thursdayService
+		fridayService
+		saturdayService
+		sundayService
+		weekendService
+		scheduleException
+		accountAddressId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateAreaTemplate.graphql
new file mode 100644
index 0000000..bea2064
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateAreaTemplate.graphql
@@ -0,0 +1,8 @@
+mutation CreateAreaTemplate($input: AreaTemplateInput!) {
+	createAreaTemplate(input: $input) {
+		id
+		name
+		order
+		scopeTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateProjectAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateProjectAreaTemplate.graphql
new file mode 100644
index 0000000..539f1ec
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateProjectAreaTemplate.graphql
@@ -0,0 +1,8 @@
+mutation CreateProjectAreaTemplate($input: ProjectAreaTemplateInput!) {
+	createProjectAreaTemplate(input: $input) {
+		id
+		name
+		order
+		scopeTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplate.graphql
new file mode 100644
index 0000000..e944d89
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplate.graphql
@@ -0,0 +1,8 @@
+mutation CreateProjectScopeTemplate($input: ProjectScopeTemplateInput!) {
+	createProjectScopeTemplate(input: $input) {
+		id
+		name
+		description
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplateFromJson.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplateFromJson.graphql
new file mode 100644
index 0000000..50207e8
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateProjectScopeTemplateFromJson.graphql
@@ -0,0 +1,20 @@
+mutation CreateProjectScopeTemplateFromJson($payload: JSON!, $replace: Boolean = false) {
+	createProjectScopeTemplateFromJson(payload: $payload, replace: $replace) {
+		id
+		name
+		description
+		isActive
+		categoryTemplates {
+			id
+			name
+			order
+			taskTemplates {
+				id
+				description
+				checklistDescription
+				order
+				estimatedMinutes
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateProjectTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateProjectTaskTemplate.graphql
new file mode 100644
index 0000000..9672955
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateProjectTaskTemplate.graphql
@@ -0,0 +1,10 @@
+mutation CreateProjectTaskTemplate($input: ProjectTaskTemplateInput!) {
+	createProjectTaskTemplate(input: $input) {
+		id
+		description
+		checklistDescription
+		order
+		estimatedMinutes
+		areaTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplate.graphql
new file mode 100644
index 0000000..2aa4d10
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplate.graphql
@@ -0,0 +1,8 @@
+mutation CreateScopeTemplate($input: ScopeTemplateInput!) {
+	createScopeTemplate(input: $input) {
+		id
+		name
+		description
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplateFromJson.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplateFromJson.graphql
new file mode 100644
index 0000000..34ac7c1
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateScopeTemplateFromJson.graphql
@@ -0,0 +1,22 @@
+mutation CreateScopeTemplateFromJson($payload: JSON!, $replace: Boolean = false) {
+	createScopeTemplateFromJson(payload: $payload, replace: $replace) {
+		id
+		name
+		description
+		isActive
+		areaTemplates {
+			id
+			name
+			order
+			taskTemplates {
+				id
+				description
+				checklistDescription
+				frequency
+				isConditional
+				order
+				estimatedMinutes
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/CreateTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/CreateTaskTemplate.graphql
new file mode 100644
index 0000000..ab8ff33
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/CreateTaskTemplate.graphql
@@ -0,0 +1,12 @@
+mutation CreateTaskTemplate($input: TaskTemplateInput!) {
+	createTaskTemplate(input: $input) {
+		id
+		description
+		checklistDescription
+		frequency
+		isConditional
+		order
+		estimatedMinutes
+		areaTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteAreaTemplate.graphql
new file mode 100644
index 0000000..a405c63
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteAreaTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteAreaTemplate($id: ID!) {
+	deleteAreaTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteProjectAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectAreaTemplate.graphql
new file mode 100644
index 0000000..907d0dc
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectAreaTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectAreaTemplate($id: ID!) {
+	deleteProjectAreaTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteProjectScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectScopeTemplate.graphql
new file mode 100644
index 0000000..74d8193
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectScopeTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectScopeTemplate($id: ID!) {
+	deleteProjectScopeTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteProjectTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectTaskTemplate.graphql
new file mode 100644
index 0000000..cb1263b
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteProjectTaskTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteProjectTaskTemplate($id: ID!) {
+	deleteProjectTaskTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteScopeTemplate.graphql
new file mode 100644
index 0000000..b2f341e
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteScopeTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteScopeTemplate($id: ID!) {
+	deleteScopeTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/DeleteTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/DeleteTaskTemplate.graphql
new file mode 100644
index 0000000..42ca12a
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/DeleteTaskTemplate.graphql
@@ -0,0 +1,3 @@
+mutation DeleteTaskTemplate($id: ID!) {
+	deleteTaskTemplate(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateAreaTemplate.graphql
new file mode 100644
index 0000000..d31d66e
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateAreaTemplate.graphql
@@ -0,0 +1,8 @@
+mutation UpdateAreaTemplate($input: AreaTemplateUpdateInput!) {
+	updateAreaTemplate(input: $input) {
+		id
+		name
+		order
+		scopeTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateProjectAreaTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectAreaTemplate.graphql
new file mode 100644
index 0000000..7b49480
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectAreaTemplate.graphql
@@ -0,0 +1,7 @@
+mutation UpdateProjectAreaTemplate($input: ProjectAreaTemplateUpdateInput!) {
+	updateProjectAreaTemplate(input: $input) {
+		id
+		name
+		order
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateProjectScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectScopeTemplate.graphql
new file mode 100644
index 0000000..301f6d4
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectScopeTemplate.graphql
@@ -0,0 +1,8 @@
+mutation UpdateProjectScopeTemplate($input: ProjectScopeTemplateUpdateInput!) {
+	updateProjectScopeTemplate(input: $input) {
+		id
+		name
+		description
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateProjectTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectTaskTemplate.graphql
new file mode 100644
index 0000000..3c3b0d0
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateProjectTaskTemplate.graphql
@@ -0,0 +1,10 @@
+mutation UpdateProjectTaskTemplate($input: ProjectTaskTemplateUpdateInput!) {
+	updateProjectTaskTemplate(input: $input) {
+		id
+		description
+		checklistDescription
+		order
+		estimatedMinutes
+		areaTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateScopeTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateScopeTemplate.graphql
new file mode 100644
index 0000000..003b617
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateScopeTemplate.graphql
@@ -0,0 +1,8 @@
+mutation UpdateScopeTemplate($input: ScopeTemplateUpdateInput!) {
+	updateScopeTemplate(input: $input) {
+		id
+		name
+		description
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/scopeTemplates/UpdateTaskTemplate.graphql b/src/lib/graphql/mutations/scopeTemplates/UpdateTaskTemplate.graphql
new file mode 100644
index 0000000..8faeef5
--- /dev/null
+++ b/src/lib/graphql/mutations/scopeTemplates/UpdateTaskTemplate.graphql
@@ -0,0 +1,12 @@
+mutation UpdateTaskTemplate($input: TaskTemplateUpdateInput!) {
+	updateTaskTemplate(input: $input) {
+		id
+		description
+		checklistDescription
+		frequency
+		isConditional
+		order
+		estimatedMinutes
+		areaTemplateId
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/CreateArea.graphql b/src/lib/graphql/mutations/scopes/CreateArea.graphql
new file mode 100644
index 0000000..c88cfb5
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/CreateArea.graphql
@@ -0,0 +1,16 @@
+mutation CreateArea($input: AreaInput!) {
+	createArea(input: $input) {
+		id
+		name
+		order
+		scopeId
+		tasks {
+			id
+			description
+			checklistDescription
+			frequency
+			isConditional
+			order
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/CreateScope.graphql b/src/lib/graphql/mutations/scopes/CreateScope.graphql
new file mode 100644
index 0000000..2d515c0
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/CreateScope.graphql
@@ -0,0 +1,23 @@
+mutation CreateScope($input: ScopeInput!) {
+	createScope(input: $input) {
+		id
+		accountId
+		accountAddressId
+		name
+		description
+		isActive
+		areas {
+			id
+			name
+			order
+			tasks {
+				id
+				description
+				checklistDescription
+				frequency
+				isConditional
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/CreateScopeFromTemplate.graphql b/src/lib/graphql/mutations/scopes/CreateScopeFromTemplate.graphql
new file mode 100644
index 0000000..16780e1
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/CreateScopeFromTemplate.graphql
@@ -0,0 +1,23 @@
+mutation CreateScopeFromTemplate($input: CreateScopeFromTemplateInput!) {
+	createScopeFromTemplate(input: $input) {
+		id
+		accountId
+		accountAddressId
+		name
+		description
+		isActive
+		areas {
+			id
+			name
+			order
+			tasks {
+				id
+				description
+				checklistDescription
+				frequency
+				isConditional
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/CreateTask.graphql b/src/lib/graphql/mutations/scopes/CreateTask.graphql
new file mode 100644
index 0000000..e47b8f6
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/CreateTask.graphql
@@ -0,0 +1,12 @@
+mutation CreateTask($input: TaskInput!) {
+	createTask(input: $input) {
+		id
+		areaId
+		description
+		checklistDescription
+		estimatedMinutes
+		frequency
+		isConditional
+		order
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/DeleteArea.graphql b/src/lib/graphql/mutations/scopes/DeleteArea.graphql
new file mode 100644
index 0000000..1023f75
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/DeleteArea.graphql
@@ -0,0 +1,3 @@
+mutation DeleteArea($id: ID!) {
+	deleteArea(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopes/DeleteScope.graphql b/src/lib/graphql/mutations/scopes/DeleteScope.graphql
new file mode 100644
index 0000000..ea7fe59
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/DeleteScope.graphql
@@ -0,0 +1,3 @@
+mutation DeleteScope($id: ID!) {
+	deleteScope(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopes/DeleteTask.graphql b/src/lib/graphql/mutations/scopes/DeleteTask.graphql
new file mode 100644
index 0000000..36c3328
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/DeleteTask.graphql
@@ -0,0 +1,3 @@
+mutation DeleteTask($id: ID!) {
+	deleteTask(id: $id)
+}
diff --git a/src/lib/graphql/mutations/scopes/UpdateArea.graphql b/src/lib/graphql/mutations/scopes/UpdateArea.graphql
new file mode 100644
index 0000000..8e1b284
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/UpdateArea.graphql
@@ -0,0 +1,16 @@
+mutation UpdateArea($input: AreaUpdateInput!) {
+	updateArea(input: $input) {
+		id
+		name
+		order
+		scopeId
+		tasks {
+			id
+			description
+			checklistDescription
+			frequency
+			isConditional
+			order
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/UpdateScope.graphql b/src/lib/graphql/mutations/scopes/UpdateScope.graphql
new file mode 100644
index 0000000..54150a5
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/UpdateScope.graphql
@@ -0,0 +1,23 @@
+mutation UpdateScope($input: ScopeUpdateInput!) {
+	updateScope(input: $input) {
+		id
+		accountId
+		accountAddressId
+		name
+		description
+		isActive
+		areas {
+			id
+			name
+			order
+			tasks {
+				id
+				description
+				checklistDescription
+				frequency
+				isConditional
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/scopes/UpdateTask.graphql b/src/lib/graphql/mutations/scopes/UpdateTask.graphql
new file mode 100644
index 0000000..4ed2d39
--- /dev/null
+++ b/src/lib/graphql/mutations/scopes/UpdateTask.graphql
@@ -0,0 +1,12 @@
+mutation UpdateTask($input: TaskUpdateInput!) {
+	updateTask(input: $input) {
+		id
+		areaId
+		description
+		checklistDescription
+		estimatedMinutes
+		frequency
+		isConditional
+		order
+	}
+}
diff --git a/src/lib/graphql/mutations/services/CreateService.graphql b/src/lib/graphql/mutations/services/CreateService.graphql
new file mode 100644
index 0000000..1e32a7c
--- /dev/null
+++ b/src/lib/graphql/mutations/services/CreateService.graphql
@@ -0,0 +1,13 @@
+mutation CreateService($input: ServiceInput!) {
+	createService(input: $input) {
+		id
+		accountId
+		accountAddressId
+		date
+		status
+		notes
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/services/DeleteService.graphql b/src/lib/graphql/mutations/services/DeleteService.graphql
new file mode 100644
index 0000000..e3d5d77
--- /dev/null
+++ b/src/lib/graphql/mutations/services/DeleteService.graphql
@@ -0,0 +1,3 @@
+mutation DeleteService($id: ID!) {
+	deleteService(id: $id)
+}
diff --git a/src/lib/graphql/mutations/services/GenerateServicesByMonth.graphql b/src/lib/graphql/mutations/services/GenerateServicesByMonth.graphql
new file mode 100644
index 0000000..bebc287
--- /dev/null
+++ b/src/lib/graphql/mutations/services/GenerateServicesByMonth.graphql
@@ -0,0 +1,9 @@
+mutation GenerateServicesByMonth($input: ServiceGenerationInput!) {
+	generateServicesByMonth(input: $input) {
+		id
+		accountAddressId
+		date
+		status
+		notes
+	}
+}
diff --git a/src/lib/graphql/mutations/services/UpdateService.graphql b/src/lib/graphql/mutations/services/UpdateService.graphql
new file mode 100644
index 0000000..2f89139
--- /dev/null
+++ b/src/lib/graphql/mutations/services/UpdateService.graphql
@@ -0,0 +1,12 @@
+mutation UpdateService($input: ServiceUpdateInput!) {
+	updateService(input: $input) {
+		id
+		date
+		status
+		notes
+		calendarEventId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/CloseProjectSession.graphql b/src/lib/graphql/mutations/sessions/CloseProjectSession.graphql
new file mode 100644
index 0000000..d3ef3cc
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/CloseProjectSession.graphql
@@ -0,0 +1,23 @@
+mutation CloseProjectSession($input: ProjectSessionCloseInput!) {
+	closeProjectSession(input: $input) {
+		id
+		projectId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			projectId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/CloseServiceSession.graphql b/src/lib/graphql/mutations/sessions/CloseServiceSession.graphql
new file mode 100644
index 0000000..c259a5d
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/CloseServiceSession.graphql
@@ -0,0 +1,25 @@
+mutation CloseServiceSession($input: CloseServiceSessionInput!) {
+	closeServiceSession(input: $input) {
+		id
+		serviceId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			serviceId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+			month
+			year
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/OpenProjectSession.graphql b/src/lib/graphql/mutations/sessions/OpenProjectSession.graphql
new file mode 100644
index 0000000..ebd90f2
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/OpenProjectSession.graphql
@@ -0,0 +1,10 @@
+mutation OpenProjectSession($input: ProjectSessionStartInput!) {
+	openProjectSession(input: $input) {
+		id
+		projectId
+		scopeId
+		customerId
+		start
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/OpenServiceSession.graphql b/src/lib/graphql/mutations/sessions/OpenServiceSession.graphql
new file mode 100644
index 0000000..44cb4f9
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/OpenServiceSession.graphql
@@ -0,0 +1,10 @@
+mutation OpenServiceSession($input: OpenServiceSessionInput!) {
+	openServiceSession(input: $input) {
+		id
+		serviceId
+		scopeId
+		customerId
+		start
+		isActive
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/RevertProjectSession.graphql b/src/lib/graphql/mutations/sessions/RevertProjectSession.graphql
new file mode 100644
index 0000000..6cd6736
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/RevertProjectSession.graphql
@@ -0,0 +1,3 @@
+mutation RevertProjectSession($input: ProjectSessionRevertInput!) {
+	revertProjectSession(input: $input)
+}
diff --git a/src/lib/graphql/mutations/sessions/RevertServiceSession.graphql b/src/lib/graphql/mutations/sessions/RevertServiceSession.graphql
new file mode 100644
index 0000000..049b9a0
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/RevertServiceSession.graphql
@@ -0,0 +1,3 @@
+mutation RevertServiceSession($input: RevertServiceSessionInput!) {
+	revertServiceSession(input: $input)
+}
diff --git a/src/lib/graphql/mutations/sessions/media/RemoveProjectPhoto.graphql b/src/lib/graphql/mutations/sessions/media/RemoveProjectPhoto.graphql
new file mode 100644
index 0000000..09feb53
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/RemoveProjectPhoto.graphql
@@ -0,0 +1,3 @@
+mutation RemoveProjectPhoto($id: ID!) {
+	deleteProjectSessionImage(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/media/RemoveProjectVideo.graphql b/src/lib/graphql/mutations/sessions/media/RemoveProjectVideo.graphql
new file mode 100644
index 0000000..cb27942
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/RemoveProjectVideo.graphql
@@ -0,0 +1,3 @@
+mutation RemoveProjectVideo($id: ID!) {
+	deleteProjectSessionVideo(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/media/RemoveServicePhoto.graphql b/src/lib/graphql/mutations/sessions/media/RemoveServicePhoto.graphql
new file mode 100644
index 0000000..fcb61d6
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/RemoveServicePhoto.graphql
@@ -0,0 +1,3 @@
+mutation RemoveServicePhoto($id: ID!) {
+	deleteServiceSessionImage(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/media/RemoveServiceVideo.graphql b/src/lib/graphql/mutations/sessions/media/RemoveServiceVideo.graphql
new file mode 100644
index 0000000..f2947fb
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/RemoveServiceVideo.graphql
@@ -0,0 +1,3 @@
+mutation RemoveServiceVideo($id: ID!) {
+	deleteServiceSessionVideo(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/media/UpdateProjectPhoto.graphql b/src/lib/graphql/mutations/sessions/media/UpdateProjectPhoto.graphql
new file mode 100644
index 0000000..9488514
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/UpdateProjectPhoto.graphql
@@ -0,0 +1,8 @@
+mutation UpdateProjectPhoto($input: ProjectSessionImageUpdateInput!) {
+	updateProjectSessionImage(input: $input) {
+		id
+		title
+		notes
+		internal
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/media/UpdateProjectVideo.graphql b/src/lib/graphql/mutations/sessions/media/UpdateProjectVideo.graphql
new file mode 100644
index 0000000..9b419f6
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/UpdateProjectVideo.graphql
@@ -0,0 +1,8 @@
+mutation UpdateProjectVideo($input: ProjectSessionVideoUpdateInput!) {
+	updateProjectSessionVideo(input: $input) {
+		id
+		title
+		notes
+		internal
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/media/UpdateServicePhoto.graphql b/src/lib/graphql/mutations/sessions/media/UpdateServicePhoto.graphql
new file mode 100644
index 0000000..7b624f3
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/UpdateServicePhoto.graphql
@@ -0,0 +1,8 @@
+mutation UpdateServicePhoto($input: ServiceSessionImageUpdateInput!) {
+	updateServiceSessionImage(input: $input) {
+		id
+		title
+		notes
+		internal
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/media/UpdateServiceVideo.graphql b/src/lib/graphql/mutations/sessions/media/UpdateServiceVideo.graphql
new file mode 100644
index 0000000..8886d77
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/media/UpdateServiceVideo.graphql
@@ -0,0 +1,8 @@
+mutation UpdateServiceVideo($input: ServiceSessionVideoUpdateInput!) {
+	updateServiceSessionVideo(input: $input) {
+		id
+		title
+		notes
+		internal
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/CreateProjectNote.graphql b/src/lib/graphql/mutations/sessions/notes/CreateProjectNote.graphql
new file mode 100644
index 0000000..2bef26a
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/CreateProjectNote.graphql
@@ -0,0 +1,11 @@
+mutation CreateProjectNote($input: ProjectSessionNoteInput!) {
+	createProjectSessionNote(input: $input) {
+		id
+		sessionId
+		content
+		authorId
+		internal
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/CreateServiceNote.graphql b/src/lib/graphql/mutations/sessions/notes/CreateServiceNote.graphql
new file mode 100644
index 0000000..a4c65f5
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/CreateServiceNote.graphql
@@ -0,0 +1,11 @@
+mutation CreateServiceNote($input: ServiceSessionNoteInput!) {
+	createServiceSessionNote(input: $input) {
+		id
+		sessionId
+		content
+		authorId
+		internal
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/RemoveProjectNote.graphql b/src/lib/graphql/mutations/sessions/notes/RemoveProjectNote.graphql
new file mode 100644
index 0000000..d62b158
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/RemoveProjectNote.graphql
@@ -0,0 +1,3 @@
+mutation RemoveProjectNote($id: ID!) {
+	deleteProjectSessionNote(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/RemoveServiceNote.graphql b/src/lib/graphql/mutations/sessions/notes/RemoveServiceNote.graphql
new file mode 100644
index 0000000..b0c9bc4
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/RemoveServiceNote.graphql
@@ -0,0 +1,3 @@
+mutation RemoveServiceNote($id: ID!) {
+	deleteServiceSessionNote(id: $id)
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/UpdateProjectNote.graphql b/src/lib/graphql/mutations/sessions/notes/UpdateProjectNote.graphql
new file mode 100644
index 0000000..0556b9d
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/UpdateProjectNote.graphql
@@ -0,0 +1,11 @@
+mutation UpdateProjectNote($input: ProjectSessionNoteUpdateInput!) {
+	updateProjectSessionNote(input: $input) {
+		id
+		sessionId
+		content
+		authorId
+		internal
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/notes/UpdateServiceNote.graphql b/src/lib/graphql/mutations/sessions/notes/UpdateServiceNote.graphql
new file mode 100644
index 0000000..0adcd82
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/notes/UpdateServiceNote.graphql
@@ -0,0 +1,11 @@
+mutation UpdateServiceNote($input: ServiceSessionNoteUpdateInput!) {
+	updateServiceSessionNote(input: $input) {
+		id
+		sessionId
+		content
+		authorId
+		internal
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/tasks/AddProjectTask.graphql b/src/lib/graphql/mutations/sessions/tasks/AddProjectTask.graphql
new file mode 100644
index 0000000..2ddc64f
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/tasks/AddProjectTask.graphql
@@ -0,0 +1,23 @@
+mutation AddProjectTask($projectId: ID!, $taskId: ID!, $notes: String) {
+	addProjectTaskCompletion(projectId: $projectId, taskId: $taskId, notes: $notes) {
+		id
+		projectId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			projectId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/tasks/AddServiceTask.graphql b/src/lib/graphql/mutations/sessions/tasks/AddServiceTask.graphql
new file mode 100644
index 0000000..c32782b
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/tasks/AddServiceTask.graphql
@@ -0,0 +1,25 @@
+mutation AddServiceTask($serviceId: ID!, $taskId: ID!, $notes: String) {
+	addTaskCompletion(serviceId: $serviceId, taskId: $taskId, notes: $notes) {
+		id
+		serviceId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			serviceId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+			month
+			year
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/tasks/RemoveProjectTask.graphql b/src/lib/graphql/mutations/sessions/tasks/RemoveProjectTask.graphql
new file mode 100644
index 0000000..f71ee3e
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/tasks/RemoveProjectTask.graphql
@@ -0,0 +1,23 @@
+mutation RemoveProjectTask($projectId: ID!, $taskId: ID!) {
+	removeProjectTaskCompletion(projectId: $projectId, taskId: $taskId) {
+		id
+		projectId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			projectId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+		}
+	}
+}
diff --git a/src/lib/graphql/mutations/sessions/tasks/RemoveServiceTask.graphql b/src/lib/graphql/mutations/sessions/tasks/RemoveServiceTask.graphql
new file mode 100644
index 0000000..b2dc8fa
--- /dev/null
+++ b/src/lib/graphql/mutations/sessions/tasks/RemoveServiceTask.graphql
@@ -0,0 +1,25 @@
+mutation RemoveServiceTask($serviceId: ID!, $taskId: ID!) {
+	removeTaskCompletion(serviceId: $serviceId, taskId: $taskId) {
+		id
+		serviceId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			serviceId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+			month
+			year
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/accounts/GetAccount.graphql b/src/lib/graphql/queries/accounts/GetAccount.graphql
new file mode 100644
index 0000000..6a5b0bb
--- /dev/null
+++ b/src/lib/graphql/queries/accounts/GetAccount.graphql
@@ -0,0 +1,97 @@
+query GetAccount($id: ID!) {
+	account(id: $id) {
+		id
+		customerId
+		name
+		startDate
+		endDate
+		status
+		isActive
+		revenues {
+			id
+			amount
+			startDate
+			endDate
+			waveServiceId
+		}
+		primaryAddress {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			isActive
+			isPrimary
+			notes
+		}
+		addresses {
+			id
+			streetAddress
+			name
+			city
+			state
+			zipCode
+			isActive
+			isPrimary
+			notes
+			schedules {
+				id
+				name
+				startDate
+				endDate
+				mondayService
+				tuesdayService
+				wednesdayService
+				thursdayService
+				fridayService
+				saturdayService
+				sundayService
+				weekendService
+				scheduleException
+			}
+			labors {
+				id
+				amount
+				startDate
+				endDate
+			}
+			scopes {
+				id
+				name
+				description
+				isActive
+				areas {
+					id
+					name
+					order
+					tasks {
+						id
+						description
+						checklistDescription
+						frequency
+						isConditional
+						order
+					}
+				}
+			}
+			services {
+				id
+				accountAddressId
+				status
+				date
+				notes
+			}
+		}
+		contacts {
+			id
+			firstName
+			lastName
+			fullName
+			email
+			phone
+			isActive
+			isPrimary
+			notes
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminEvent.graphql b/src/lib/graphql/queries/admin/AdminEvent.graphql
new file mode 100644
index 0000000..0b1108b
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminEvent.graphql
@@ -0,0 +1,13 @@
+query AdminEvent($id: ID!) {
+	event(id: $id) {
+		id
+		eventType
+		entityType
+		entityId
+		metadata
+		triggeredById
+		triggeredByType
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminEvents.graphql b/src/lib/graphql/queries/admin/AdminEvents.graphql
new file mode 100644
index 0000000..583359a
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminEvents.graphql
@@ -0,0 +1,12 @@
+query AdminEvents($limit: Int, $offset: Int) {
+	events(limit: $limit, offset: $offset) {
+		id
+		eventType
+		entityType
+		entityId
+		metadata
+		triggeredById
+		triggeredByType
+		createdAt
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminInvoices.graphql b/src/lib/graphql/queries/admin/AdminInvoices.graphql
new file mode 100644
index 0000000..362a4bf
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminInvoices.graphql
@@ -0,0 +1,11 @@
+query AdminInvoices($filters: InvoiceFilter) {
+	invoices(filters: $filters) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+		waveInvoiceId
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminNotificationRule.graphql b/src/lib/graphql/queries/admin/AdminNotificationRule.graphql
new file mode 100644
index 0000000..f772e8e
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminNotificationRule.graphql
@@ -0,0 +1,18 @@
+query AdminNotificationRule($id: ID!) {
+	notificationRule(id: $id) {
+		id
+		name
+		description
+		eventTypes
+		channels
+		targetRoles
+		targetTeamProfileIds
+		targetCustomerProfileIds
+		isActive
+		templateSubject
+		templateBody
+		conditions
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminNotificationRules.graphql b/src/lib/graphql/queries/admin/AdminNotificationRules.graphql
new file mode 100644
index 0000000..8b7c25c
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminNotificationRules.graphql
@@ -0,0 +1,18 @@
+query AdminNotificationRules($isActive: Boolean) {
+	notificationRules(isActive: $isActive) {
+		id
+		name
+		description
+		eventTypes
+		channels
+		targetRoles
+		targetTeamProfileIds
+		targetCustomerProfileIds
+		isActive
+		templateSubject
+		templateBody
+		conditions
+		createdAt
+		updatedAt
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminProfiles.graphql b/src/lib/graphql/queries/admin/AdminProfiles.graphql
new file mode 100644
index 0000000..17dacb4
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminProfiles.graphql
@@ -0,0 +1,27 @@
+query AdminProfiles {
+	teamProfiles {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		role
+	}
+	customerProfiles {
+		id
+		firstName
+		lastName
+		fullName
+		email
+		phone
+		status
+		notes
+		customers {
+			id
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminProjects.graphql b/src/lib/graphql/queries/admin/AdminProjects.graphql
new file mode 100644
index 0000000..be2a3e5
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminProjects.graphql
@@ -0,0 +1,22 @@
+query AdminProjects($filters: ProjectFilter) {
+	projects(filters: $filters) {
+		id
+		name
+		date
+		status
+		amount
+		labor
+		customerId
+		accountAddressId
+		city
+		state
+		streetAddress
+		zipCode
+		notes
+		calendarEventId
+		waveServiceId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminReports.graphql b/src/lib/graphql/queries/admin/AdminReports.graphql
new file mode 100644
index 0000000..32270b9
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminReports.graphql
@@ -0,0 +1,10 @@
+query AdminReports($filters: ReportFilter) {
+	reports(filters: $filters) {
+		id
+		date
+		teamMemberId
+		servicesLaborTotal
+		projectsLaborTotal
+		totalLaborValue
+	}
+}
diff --git a/src/lib/graphql/queries/admin/AdminServices.graphql b/src/lib/graphql/queries/admin/AdminServices.graphql
new file mode 100644
index 0000000..d1a275d
--- /dev/null
+++ b/src/lib/graphql/queries/admin/AdminServices.graphql
@@ -0,0 +1,14 @@
+query AdminServices($filters: ServiceFilter) {
+	services(filters: $filters) {
+		id
+		accountId
+		accountAddressId
+		date
+		status
+		notes
+		calendarEventId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/GetInvoice.graphql b/src/lib/graphql/queries/admin/GetInvoice.graphql
new file mode 100644
index 0000000..555b42f
--- /dev/null
+++ b/src/lib/graphql/queries/admin/GetInvoice.graphql
@@ -0,0 +1,28 @@
+query GetInvoice($id: ID!) {
+	invoice(id: $id) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+		waveInvoiceId
+		projects {
+			id
+			name
+			date
+			amount
+			customerId
+			accountAddressId
+			waveServiceId
+		}
+		revenues {
+			id
+			accountId
+			amount
+			startDate
+			endDate
+			waveServiceId
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/GetProject.graphql b/src/lib/graphql/queries/admin/GetProject.graphql
new file mode 100644
index 0000000..f07c1c1
--- /dev/null
+++ b/src/lib/graphql/queries/admin/GetProject.graphql
@@ -0,0 +1,23 @@
+query GetProject($id: ID!) {
+	project(id: $id) {
+		id
+		name
+		date
+		status
+		amount
+		labor
+		customerId
+		accountAddressId
+		city
+		state
+		streetAddress
+		zipCode
+		notes
+		scopeId
+		calendarEventId
+		waveServiceId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/GetReport.graphql b/src/lib/graphql/queries/admin/GetReport.graphql
new file mode 100644
index 0000000..10e1cc2
--- /dev/null
+++ b/src/lib/graphql/queries/admin/GetReport.graphql
@@ -0,0 +1,44 @@
+query GetReport($id: ID!) {
+	report(id: $id) {
+		id
+		date
+		teamMemberId
+		services {
+			id
+			date
+			accountAddressId
+		}
+		projects {
+			id
+			name
+			date
+			accountAddressId
+			customerId
+		}
+		servicesLaborTotal
+		projectsLaborTotal
+		totalLaborValue
+		laborBreakdown {
+			teamMemberId
+			teamMemberName
+			services {
+				serviceId
+				totalLaborRate
+				teamMemberCount
+				isTeamMemberAssigned
+				laborShare
+			}
+			projects {
+				projectId
+				projectName
+				totalLaborAmount
+				teamMemberCount
+				isTeamMemberAssigned
+				laborShare
+			}
+			servicesTotal
+			projectsTotal
+			grandTotal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/admin/GetService.graphql b/src/lib/graphql/queries/admin/GetService.graphql
new file mode 100644
index 0000000..ac2dcf2
--- /dev/null
+++ b/src/lib/graphql/queries/admin/GetService.graphql
@@ -0,0 +1,14 @@
+query GetService($id: ID!) {
+	service(id: $id) {
+		id
+		accountId
+		accountAddressId
+		date
+		status
+		notes
+		calendarEventId
+		teamMembers {
+			pk
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/customer/CustomerAccounts.graphql b/src/lib/graphql/queries/customer/CustomerAccounts.graphql
new file mode 100644
index 0000000..0e193d9
--- /dev/null
+++ b/src/lib/graphql/queries/customer/CustomerAccounts.graphql
@@ -0,0 +1,44 @@
+query CustomerAccounts($filters: AccountFilter) {
+	accounts(filters: $filters) {
+		id
+		name
+		customerId
+		primaryAddress {
+			id
+			name
+			streetAddress
+			city
+			state
+			zipCode
+		}
+		addresses {
+			id
+			name
+			streetAddress
+			city
+			state
+			zipCode
+			isPrimary
+			schedules {
+				id
+				name
+				mondayService
+				tuesdayService
+				wednesdayService
+				thursdayService
+				fridayService
+				saturdayService
+				sundayService
+				weekendService
+			}
+		}
+		contacts {
+			id
+			fullName
+			email
+			phone
+			isActive
+			isPrimary
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/customer/CustomerInvoices.graphql b/src/lib/graphql/queries/customer/CustomerInvoices.graphql
new file mode 100644
index 0000000..ec35552
--- /dev/null
+++ b/src/lib/graphql/queries/customer/CustomerInvoices.graphql
@@ -0,0 +1,10 @@
+query CustomerInvoices($filters: InvoiceFilter) {
+	invoices(filters: $filters) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+	}
+}
diff --git a/src/lib/graphql/queries/customer/CustomerProjects.graphql b/src/lib/graphql/queries/customer/CustomerProjects.graphql
new file mode 100644
index 0000000..7759ca6
--- /dev/null
+++ b/src/lib/graphql/queries/customer/CustomerProjects.graphql
@@ -0,0 +1,16 @@
+query CustomerProjects($filters: ProjectFilter) {
+	projects(filters: $filters) {
+		id
+		name
+		date
+		status
+		amount
+		customerId
+		accountAddressId
+		streetAddress
+		city
+		state
+		zipCode
+		notes
+	}
+}
diff --git a/src/lib/graphql/queries/customer/CustomerServices.graphql b/src/lib/graphql/queries/customer/CustomerServices.graphql
new file mode 100644
index 0000000..362a59a
--- /dev/null
+++ b/src/lib/graphql/queries/customer/CustomerServices.graphql
@@ -0,0 +1,10 @@
+query CustomerServices($filters: ServiceFilter) {
+	services(filters: $filters) {
+		id
+		accountId
+		accountAddressId
+		date
+		status
+		notes
+	}
+}
diff --git a/src/lib/graphql/queries/customer/GetCustomerInvoice.graphql b/src/lib/graphql/queries/customer/GetCustomerInvoice.graphql
new file mode 100644
index 0000000..e01a6ae
--- /dev/null
+++ b/src/lib/graphql/queries/customer/GetCustomerInvoice.graphql
@@ -0,0 +1,24 @@
+query GetCustomerInvoice($id: ID!) {
+	invoice(id: $id) {
+		id
+		date
+		customerId
+		status
+		datePaid
+		paymentType
+		projects {
+			id
+			name
+			date
+			amount
+			accountAddressId
+		}
+		revenues {
+			id
+			accountId
+			amount
+			startDate
+			endDate
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/customer/TeamProfiles.graphql b/src/lib/graphql/queries/customer/TeamProfiles.graphql
new file mode 100644
index 0000000..fb92997
--- /dev/null
+++ b/src/lib/graphql/queries/customer/TeamProfiles.graphql
@@ -0,0 +1,6 @@
+query TeamProfiles {
+	teamProfiles {
+		id
+		fullName
+	}
+}
diff --git a/src/lib/graphql/queries/customers/GetCustomer.graphql b/src/lib/graphql/queries/customers/GetCustomer.graphql
new file mode 100644
index 0000000..5a59bd5
--- /dev/null
+++ b/src/lib/graphql/queries/customers/GetCustomer.graphql
@@ -0,0 +1,38 @@
+query GetCustomer($id: ID!) {
+	customer(id: $id) {
+		id
+		name
+		billingEmail
+		billingTerms
+		startDate
+		endDate
+		status
+		isActive
+		waveCustomerId
+		addresses {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			addressType
+			isActive
+			isPrimary
+		}
+		contacts {
+			id
+			firstName
+			lastName
+			fullName
+			email
+			phone
+			isActive
+			isPrimary
+			notes
+		}
+		accounts {
+			id
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/dashboard/AdminDashboard.graphql b/src/lib/graphql/queries/dashboard/AdminDashboard.graphql
new file mode 100644
index 0000000..87a2083
--- /dev/null
+++ b/src/lib/graphql/queries/dashboard/AdminDashboard.graphql
@@ -0,0 +1,91 @@
+query AdminDashboard($month: String!, $invoiceStatus: String) {
+	adminDashboard(month: $month, invoiceStatus: $invoiceStatus) {
+		services {
+			id
+			accountId
+			accountAddressId
+			date
+			status
+			notes
+			calendarEventId
+			teamMembers {
+				pk
+			}
+		}
+		projects {
+			id
+			name
+			date
+			status
+			amount
+			labor
+			customerId
+			accountAddressId
+			city
+			state
+			streetAddress
+			zipCode
+			notes
+			calendarEventId
+			waveServiceId
+			teamMembers {
+				pk
+			}
+		}
+		invoices {
+			id
+			date
+			customerId
+			status
+			datePaid
+			paymentType
+			waveInvoiceId
+		}
+		reports {
+			id
+			date
+			teamMemberId
+			servicesLaborTotal
+			projectsLaborTotal
+			totalLaborValue
+		}
+		serviceScopeTemplates {
+			id
+			name
+			description
+			isActive
+			areaTemplates {
+				id
+				name
+				order
+				taskTemplates {
+					id
+					description
+					checklistDescription
+					frequency
+					isConditional
+					order
+					estimatedMinutes
+				}
+			}
+		}
+		projectScopeTemplates {
+			id
+			name
+			description
+			isActive
+			categoryTemplates {
+				id
+				name
+				order
+				taskTemplates {
+					id
+					description
+					checklistDescription
+					order
+					estimatedMinutes
+				}
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/dashboard/CustomerDashboard.graphql b/src/lib/graphql/queries/dashboard/CustomerDashboard.graphql
new file mode 100644
index 0000000..ecb80eb
--- /dev/null
+++ b/src/lib/graphql/queries/dashboard/CustomerDashboard.graphql
@@ -0,0 +1,42 @@
+query CustomerDashboard($customerId: ID!) {
+	customerDashboard(customerId: $customerId) {
+		services {
+			id
+			accountId
+			accountAddressId
+			date
+			status
+			notes
+			teamMembers {
+				pk
+			}
+		}
+		projects {
+			id
+			name
+			date
+			status
+			amount
+			customerId
+			accountAddressId
+			city
+			state
+			streetAddress
+			zipCode
+			notes
+			scopeId
+			teamMembers {
+				pk
+			}
+		}
+		invoices {
+			id
+			date
+			customerId
+			status
+			datePaid
+			paymentType
+			waveInvoiceId
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/dashboard/TeamDashboard.graphql b/src/lib/graphql/queries/dashboard/TeamDashboard.graphql
new file mode 100644
index 0000000..f3a3c7a
--- /dev/null
+++ b/src/lib/graphql/queries/dashboard/TeamDashboard.graphql
@@ -0,0 +1,44 @@
+query TeamDashboard($teamProfileId: ID!, $month: String!) {
+	teamDashboard(teamProfileId: $teamProfileId, month: $month) {
+		services {
+			id
+			accountId
+			accountAddressId
+			date
+			status
+			notes
+			calendarEventId
+			teamMembers {
+				pk
+			}
+		}
+		projects {
+			id
+			name
+			date
+			status
+			amount
+			labor
+			customerId
+			accountAddressId
+			city
+			state
+			streetAddress
+			zipCode
+			notes
+			calendarEventId
+			scopeId
+			teamMembers {
+				pk
+			}
+		}
+		reports {
+			id
+			date
+			teamMemberId
+			servicesLaborTotal
+			projectsLaborTotal
+			totalLaborValue
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/layout/Accounts.graphql b/src/lib/graphql/queries/layout/Accounts.graphql
new file mode 100644
index 0000000..557a7ea
--- /dev/null
+++ b/src/lib/graphql/queries/layout/Accounts.graphql
@@ -0,0 +1,74 @@
+query Accounts($filters: AccountFilter) {
+	accounts(filters: $filters) {
+		id
+		name
+		customerId
+		primaryAddress {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+			isActive
+		}
+		addresses {
+			id
+			name
+			notes
+			streetAddress
+			city
+			state
+			zipCode
+			isActive
+			isPrimary
+			schedules {
+				id
+				name
+				startDate
+				endDate
+				mondayService
+				tuesdayService
+				wednesdayService
+				thursdayService
+				fridayService
+				saturdayService
+				sundayService
+				weekendService
+				scheduleException
+			}
+			scopes {
+				id
+				name
+				description
+				areas {
+					id
+					name
+					order
+					tasks {
+						id
+						description
+						checklistDescription
+						frequency
+						order
+					}
+				}
+				isActive
+			}
+		}
+		contacts {
+			id
+			fullName
+			email
+			isActive
+			isPrimary
+			notes
+		}
+		revenues {
+			id
+			amount
+			startDate
+			endDate
+			waveServiceId
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/layout/AccountsBasic.graphql b/src/lib/graphql/queries/layout/AccountsBasic.graphql
new file mode 100644
index 0000000..69fc3e4
--- /dev/null
+++ b/src/lib/graphql/queries/layout/AccountsBasic.graphql
@@ -0,0 +1,22 @@
+query AccountsBasic($filters: AccountFilter) {
+	accounts(filters: $filters) {
+		id
+		name
+		customerId
+		primaryAddress {
+			id
+			streetAddress
+			city
+			state
+			zipCode
+		}
+		addresses {
+			id
+			name
+			streetAddress
+			city
+			state
+			zipCode
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/layout/Customers.graphql b/src/lib/graphql/queries/layout/Customers.graphql
new file mode 100644
index 0000000..8874940
--- /dev/null
+++ b/src/lib/graphql/queries/layout/Customers.graphql
@@ -0,0 +1,12 @@
+query Customers {
+	customers {
+		id
+		name
+		status
+		accounts {
+			id
+			name
+		}
+		waveCustomerId
+	}
+}
diff --git a/src/lib/graphql/queries/layout/Me.graphql b/src/lib/graphql/queries/layout/Me.graphql
new file mode 100644
index 0000000..5e8e6e9
--- /dev/null
+++ b/src/lib/graphql/queries/layout/Me.graphql
@@ -0,0 +1,24 @@
+query Me {
+	me {
+		__typename
+		... on TeamProfileType {
+			id
+			oryKratosId
+			fullName
+			email
+			phone
+			role
+		}
+		... on CustomerProfileType {
+			id
+			oryKratosId
+			fullName
+			email
+			phone
+			customers {
+				id
+				name
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/layout/Team.graphql b/src/lib/graphql/queries/layout/Team.graphql
new file mode 100644
index 0000000..64135f2
--- /dev/null
+++ b/src/lib/graphql/queries/layout/Team.graphql
@@ -0,0 +1,10 @@
+query Team {
+	teamProfiles {
+		id
+		role
+		fullName
+		lastName
+		email
+		status
+	}
+}
diff --git a/src/lib/graphql/queries/messages/GetConversation.graphql b/src/lib/graphql/queries/messages/GetConversation.graphql
new file mode 100644
index 0000000..04b79ee
--- /dev/null
+++ b/src/lib/graphql/queries/messages/GetConversation.graphql
@@ -0,0 +1,101 @@
+query GetConversation($id: ID!, $messageLimit: Int = 50, $messageOffset: Int = 0) {
+	conversation(id: $id) {
+		id
+		subject
+		conversationType
+		lastMessageAt
+		isArchived
+		metadata
+		createdAt
+		updatedAt
+		unreadCount
+		messageCount
+		canDelete
+		createdBy {
+			teamProfile {
+				id
+				fullName
+			}
+			customerProfile {
+				id
+				fullName
+			}
+		}
+		entity {
+			entityType
+			entityId
+			project {
+				id
+				name
+				date
+				customerId
+				accountAddressId
+			}
+			service {
+				id
+				date
+				accountAddressId
+			}
+			account {
+				id
+				name
+			}
+			customer {
+				id
+				name
+			}
+		}
+		participants {
+			id
+			unreadCount
+			isMuted
+			isArchived
+			lastReadAt
+			joinedAt
+			participant {
+				teamProfile {
+					id
+					fullName
+				}
+				customerProfile {
+					id
+					fullName
+				}
+			}
+		}
+		messages(limit: $messageLimit, offset: $messageOffset) {
+			id
+			body
+			isSystemMessage
+			attachments
+			metadata
+			createdAt
+			updatedAt
+			canDelete
+			sender {
+				teamProfile {
+					id
+					fullName
+				}
+				customerProfile {
+					id
+					fullName
+				}
+			}
+			replyTo {
+				id
+				body
+				sender {
+					teamProfile {
+						id
+						fullName
+					}
+					customerProfile {
+						id
+						fullName
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/messages/GetConversationsByEntity.graphql b/src/lib/graphql/queries/messages/GetConversationsByEntity.graphql
new file mode 100644
index 0000000..e54bae3
--- /dev/null
+++ b/src/lib/graphql/queries/messages/GetConversationsByEntity.graphql
@@ -0,0 +1,54 @@
+query GetConversationsByEntity(
+	$entityType: String!
+	$entityId: ID!
+	$first: Int
+	$after: String
+	$last: Int
+	$before: String
+) {
+	getConversationsByEntity(
+		entityType: $entityType
+		entityId: $entityId
+		first: $first
+		after: $after
+		last: $last
+		before: $before
+	) {
+		edges {
+			node {
+				id
+				subject
+				conversationType
+				lastMessageAt
+				isArchived
+				createdAt
+				unreadCount
+				participants {
+					id
+					participant {
+						teamProfile {
+							id
+							fullName
+						}
+						customerProfile {
+							id
+							fullName
+						}
+					}
+				}
+				messages(limit: 1, offset: 0) {
+					id
+					body
+					createdAt
+				}
+			}
+			cursor
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
+			hasPreviousPage
+			startCursor
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/messages/GetMyConversations.graphql b/src/lib/graphql/queries/messages/GetMyConversations.graphql
new file mode 100644
index 0000000..345bcd7
--- /dev/null
+++ b/src/lib/graphql/queries/messages/GetMyConversations.graphql
@@ -0,0 +1,102 @@
+query GetMyConversations(
+	$includeArchived: Boolean = false
+	$first: Int
+	$after: String
+	$last: Int
+	$before: String
+) {
+	getMyConversations(
+		includeArchived: $includeArchived
+		first: $first
+		after: $after
+		last: $last
+		before: $before
+	) {
+		edges {
+			node {
+				id
+				subject
+				conversationType
+				lastMessageAt
+				isArchived
+				metadata
+				createdAt
+				updatedAt
+				unreadCount
+				canDelete
+				createdBy {
+					teamProfile {
+						id
+						fullName
+					}
+					customerProfile {
+						id
+						fullName
+					}
+				}
+				entity {
+					entityType
+					entityId
+					project {
+						id
+						name
+						date
+						customerId
+						accountAddressId
+					}
+					service {
+						id
+						date
+						accountAddressId
+					}
+					account {
+						id
+						name
+					}
+					customer {
+						id
+						name
+					}
+				}
+				participants {
+					id
+					unreadCount
+					isMuted
+					isArchived
+					participant {
+						teamProfile {
+							id
+							fullName
+						}
+						customerProfile {
+							id
+							fullName
+						}
+					}
+				}
+				messages(limit: 1, offset: 0) {
+					id
+					body
+					createdAt
+					sender {
+						teamProfile {
+							id
+							fullName
+						}
+						customerProfile {
+							id
+							fullName
+						}
+					}
+				}
+			}
+			cursor
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
+			hasPreviousPage
+			startCursor
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/messages/GetUnreadMessageCount.graphql b/src/lib/graphql/queries/messages/GetUnreadMessageCount.graphql
new file mode 100644
index 0000000..28288a8
--- /dev/null
+++ b/src/lib/graphql/queries/messages/GetUnreadMessageCount.graphql
@@ -0,0 +1,3 @@
+query GetUnreadMessageCount {
+	unreadMessageCount
+}
diff --git a/src/lib/graphql/queries/notifications/GetMyNotifications.graphql b/src/lib/graphql/queries/notifications/GetMyNotifications.graphql
new file mode 100644
index 0000000..4cfaa52
--- /dev/null
+++ b/src/lib/graphql/queries/notifications/GetMyNotifications.graphql
@@ -0,0 +1,29 @@
+query GetMyNotifications($unreadOnly: Boolean = false, $limit: Int = 50, $offset: Int = 0) {
+	myNotifications(unreadOnly: $unreadOnly, limit: $limit, offset: $offset) {
+		id
+		status
+		subject
+		body
+		actionUrl
+		readAt
+		metadata
+		createdAt
+		updatedAt
+		isRead
+		recipientId
+		event {
+			id
+			eventType
+			entityType
+			entityId
+			metadata
+			createdAt
+			triggeredById
+			triggeredByType
+		}
+		rule {
+			id
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/notifications/GetNotification.graphql b/src/lib/graphql/queries/notifications/GetNotification.graphql
new file mode 100644
index 0000000..81e8470
--- /dev/null
+++ b/src/lib/graphql/queries/notifications/GetNotification.graphql
@@ -0,0 +1,30 @@
+query GetNotification($id: ID!) {
+	notification(id: $id) {
+		id
+		status
+		subject
+		body
+		actionUrl
+		readAt
+		metadata
+		createdAt
+		updatedAt
+		isRead
+		recipientId
+		event {
+			id
+			eventType
+			entityType
+			entityId
+			metadata
+			createdAt
+			triggeredById
+			triggeredByType
+		}
+		rule {
+			id
+			name
+			description
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/notifications/GetUnreadNotificationCount.graphql b/src/lib/graphql/queries/notifications/GetUnreadNotificationCount.graphql
new file mode 100644
index 0000000..a10f968
--- /dev/null
+++ b/src/lib/graphql/queries/notifications/GetUnreadNotificationCount.graphql
@@ -0,0 +1,3 @@
+query GetUnreadNotificationCount {
+	myUnreadNotificationCount
+}
diff --git a/src/lib/graphql/queries/scopeTemplates/GetProjectScopeTemplates.graphql b/src/lib/graphql/queries/scopeTemplates/GetProjectScopeTemplates.graphql
new file mode 100644
index 0000000..c9a9983
--- /dev/null
+++ b/src/lib/graphql/queries/scopeTemplates/GetProjectScopeTemplates.graphql
@@ -0,0 +1,20 @@
+query GetProjectScopeTemplates {
+	projectScopeTemplates {
+		id
+		name
+		description
+		isActive
+		categoryTemplates {
+			id
+			name
+			order
+			taskTemplates {
+				id
+				description
+				checklistDescription
+				order
+				estimatedMinutes
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/scopeTemplates/GetScopeTemplates.graphql b/src/lib/graphql/queries/scopeTemplates/GetScopeTemplates.graphql
new file mode 100644
index 0000000..bc0d8fe
--- /dev/null
+++ b/src/lib/graphql/queries/scopeTemplates/GetScopeTemplates.graphql
@@ -0,0 +1,22 @@
+query GetScopeTemplates {
+	scopeTemplates {
+		id
+		name
+		description
+		isActive
+		areaTemplates {
+			id
+			name
+			order
+			taskTemplates {
+				id
+				description
+				checklistDescription
+				frequency
+				isConditional
+				order
+				estimatedMinutes
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/scopes/ProjectScope.graphql b/src/lib/graphql/queries/scopes/ProjectScope.graphql
new file mode 100644
index 0000000..77d2cee
--- /dev/null
+++ b/src/lib/graphql/queries/scopes/ProjectScope.graphql
@@ -0,0 +1,23 @@
+query ProjectScope($id: ID!) {
+	projectScope(id: $id) {
+		id
+		projectId
+		name
+		description
+		isActive
+		projectAreas {
+			id
+			name
+			order
+			scopeId
+			projectTasks {
+				id
+				categoryId
+				description
+				checklistDescription
+				estimatedMinutes
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/scopes/Scope.graphql b/src/lib/graphql/queries/scopes/Scope.graphql
new file mode 100644
index 0000000..c0f28b2
--- /dev/null
+++ b/src/lib/graphql/queries/scopes/Scope.graphql
@@ -0,0 +1,26 @@
+query Scope($id: ID!) {
+	scope(id: $id) {
+		id
+		accountId
+		accountAddressId
+		name
+		description
+		isActive
+		areas {
+			id
+			name
+			order
+			scopeId
+			tasks {
+				id
+				areaId
+				description
+				checklistDescription
+				estimatedMinutes
+				frequency
+				isConditional
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/scopes/ScopeByAddress.graphql b/src/lib/graphql/queries/scopes/ScopeByAddress.graphql
new file mode 100644
index 0000000..1d177f6
--- /dev/null
+++ b/src/lib/graphql/queries/scopes/ScopeByAddress.graphql
@@ -0,0 +1,26 @@
+query ScopeByAddress($accountAddressId: UUID!) {
+	scopes(filters: { accountAddressId: $accountAddressId, isActive: true }) {
+		id
+		accountId
+		accountAddressId
+		name
+		description
+		isActive
+		areas {
+			id
+			name
+			order
+			scopeId
+			tasks {
+				id
+				areaId
+				description
+				checklistDescription
+				estimatedMinutes
+				frequency
+				isConditional
+				order
+			}
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ProjectSession.graphql b/src/lib/graphql/queries/sessions/ProjectSession.graphql
new file mode 100644
index 0000000..19a154e
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ProjectSession.graphql
@@ -0,0 +1,74 @@
+query ProjectSession($id: ID!) {
+	projectSession(id: $id) {
+		id
+		projectId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			projectId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+		}
+		photos {
+			id
+			projectSessionId
+			title
+			notes
+			createdAt
+			contentType
+			width
+			height
+			uploadedByTeamProfileId
+			internal
+			image {
+				url
+				name
+			}
+			thumbnail {
+				url
+				name
+			}
+		}
+		videos {
+			id
+			title
+			notes
+			internal
+			createdAt
+			contentType
+			width
+			height
+			durationSeconds
+			fileSizeBytes
+			uploadedByTeamProfileId
+			projectSessionId
+			video {
+				url
+				name
+			}
+			thumbnail {
+				url
+				name
+			}
+		}
+		notes {
+			id
+			sessionId
+			createdAt
+			updatedAt
+			content
+			authorId
+			internal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ProjectSessionByProject.graphql b/src/lib/graphql/queries/sessions/ProjectSessionByProject.graphql
new file mode 100644
index 0000000..f542d20
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ProjectSessionByProject.graphql
@@ -0,0 +1,32 @@
+query ProjectSessionByProject($projectId: UUID!) {
+	projectSessions(filters: { projectId: { exact: $projectId } }) {
+		id
+		projectId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			projectId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+		}
+		notes {
+			id
+			sessionId
+			createdAt
+			updatedAt
+			content
+			authorId
+			internal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ProjectSessionPhotos.graphql b/src/lib/graphql/queries/sessions/ProjectSessionPhotos.graphql
new file mode 100644
index 0000000..d62ba58
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ProjectSessionPhotos.graphql
@@ -0,0 +1,22 @@
+query ProjectSessionPhotos($sessionId: UUID!) {
+	projectSessionImages(filters: { projectSessionId: $sessionId }) {
+		id
+		projectSessionId
+		title
+		notes
+		createdAt
+		contentType
+		width
+		height
+		uploadedByTeamProfileId
+		internal
+		image {
+			url
+			name
+		}
+		thumbnail {
+			url
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ProjectSessionVideos.graphql b/src/lib/graphql/queries/sessions/ProjectSessionVideos.graphql
new file mode 100644
index 0000000..9f4cc32
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ProjectSessionVideos.graphql
@@ -0,0 +1,24 @@
+query ProjectSessionVideos($sessionId: UUID!) {
+	projectSessionVideos(filters: { projectSessionId: $sessionId }) {
+		id
+		title
+		notes
+		internal
+		createdAt
+		contentType
+		width
+		height
+		durationSeconds
+		fileSizeBytes
+		uploadedByTeamProfileId
+		projectSessionId
+		video {
+			url
+			name
+		}
+		thumbnail {
+			url
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ProjectSessions.graphql b/src/lib/graphql/queries/sessions/ProjectSessions.graphql
new file mode 100644
index 0000000..caea48d
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ProjectSessions.graphql
@@ -0,0 +1,8 @@
+query ProjectSessions($filters: ProjectSessionFilter) {
+	projectSessions(filters: $filters) {
+		id
+		projectId
+		start
+		end
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ServiceSession.graphql b/src/lib/graphql/queries/sessions/ServiceSession.graphql
new file mode 100644
index 0000000..68ff953
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ServiceSession.graphql
@@ -0,0 +1,76 @@
+query ServiceSession($id: ID!) {
+	serviceSession(id: $id) {
+		id
+		serviceId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			serviceId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+			month
+			year
+		}
+		photos {
+			id
+			serviceSessionId
+			title
+			notes
+			createdAt
+			contentType
+			width
+			height
+			uploadedByTeamProfileId
+			internal
+			image {
+				url
+				name
+			}
+			thumbnail {
+				url
+				name
+			}
+		}
+		videos {
+			id
+			title
+			notes
+			internal
+			createdAt
+			contentType
+			width
+			height
+			durationSeconds
+			fileSizeBytes
+			uploadedByTeamProfileId
+			serviceSessionId
+			video {
+				url
+				name
+			}
+			thumbnail {
+				url
+				name
+			}
+		}
+		notes {
+			id
+			sessionId
+			createdAt
+			updatedAt
+			content
+			authorId
+			internal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ServiceSessionByService.graphql b/src/lib/graphql/queries/sessions/ServiceSessionByService.graphql
new file mode 100644
index 0000000..dff937e
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ServiceSessionByService.graphql
@@ -0,0 +1,34 @@
+query ServiceSessionByService($serviceId: UUID!) {
+	serviceSessions(filters: { serviceId: { exact: $serviceId } }) {
+		id
+		serviceId
+		accountId
+		accountAddressId
+		customerId
+		scopeId
+		start
+		end
+		isActive
+		durationSeconds
+		completedTasks {
+			id
+			taskId
+			serviceId
+			completedAt
+			completedById
+			notes
+			accountAddressId
+			month
+			year
+		}
+		notes {
+			id
+			sessionId
+			createdAt
+			updatedAt
+			content
+			authorId
+			internal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ServiceSessionPhotos.graphql b/src/lib/graphql/queries/sessions/ServiceSessionPhotos.graphql
new file mode 100644
index 0000000..a61a528
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ServiceSessionPhotos.graphql
@@ -0,0 +1,22 @@
+query ServiceSessionPhotos($sessionId: UUID!) {
+	serviceSessionImages(filters: { serviceSessionId: $sessionId }) {
+		id
+		serviceSessionId
+		title
+		notes
+		createdAt
+		contentType
+		width
+		height
+		uploadedByTeamProfileId
+		internal
+		image {
+			url
+			name
+		}
+		thumbnail {
+			url
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ServiceSessionVideos.graphql b/src/lib/graphql/queries/sessions/ServiceSessionVideos.graphql
new file mode 100644
index 0000000..32892ed
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ServiceSessionVideos.graphql
@@ -0,0 +1,24 @@
+query ServiceSessionVideos($sessionId: UUID!) {
+	serviceSessionVideos(filters: { serviceSessionId: $sessionId }) {
+		id
+		title
+		notes
+		internal
+		createdAt
+		contentType
+		width
+		height
+		durationSeconds
+		fileSizeBytes
+		uploadedByTeamProfileId
+		serviceSessionId
+		video {
+			url
+			name
+		}
+		thumbnail {
+			url
+			name
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/sessions/ServiceSessions.graphql b/src/lib/graphql/queries/sessions/ServiceSessions.graphql
new file mode 100644
index 0000000..1ba2171
--- /dev/null
+++ b/src/lib/graphql/queries/sessions/ServiceSessions.graphql
@@ -0,0 +1,8 @@
+query ServiceSessions($filters: ServiceSessionFilter) {
+	serviceSessions(filters: $filters) {
+		id
+		serviceId
+		start
+		end
+	}
+}
diff --git a/src/lib/graphql/queries/team/GetTeamReport.graphql b/src/lib/graphql/queries/team/GetTeamReport.graphql
new file mode 100644
index 0000000..ad487d9
--- /dev/null
+++ b/src/lib/graphql/queries/team/GetTeamReport.graphql
@@ -0,0 +1,44 @@
+query GetTeamReport($id: ID!) {
+	report(id: $id) {
+		id
+		date
+		teamMemberId
+		services {
+			id
+			date
+			accountAddressId
+		}
+		projects {
+			id
+			name
+			date
+			accountAddressId
+			customerId
+		}
+		servicesLaborTotal
+		projectsLaborTotal
+		totalLaborValue
+		laborBreakdown {
+			teamMemberId
+			teamMemberName
+			services {
+				serviceId
+				totalLaborRate
+				teamMemberCount
+				isTeamMemberAssigned
+				laborShare
+			}
+			projects {
+				projectId
+				projectName
+				totalLaborAmount
+				teamMemberCount
+				isTeamMemberAssigned
+				laborShare
+			}
+			servicesTotal
+			projectsTotal
+			grandTotal
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/team/Projects.graphql b/src/lib/graphql/queries/team/Projects.graphql
new file mode 100644
index 0000000..2ba8f51
--- /dev/null
+++ b/src/lib/graphql/queries/team/Projects.graphql
@@ -0,0 +1,46 @@
+query ProjectsForTeam(
+	$teamProfileId: ID!
+	$first: Int
+	$after: String
+	$last: Int
+	$before: String
+	$filters: ProjectFilter
+	$ordering: DateOrdering
+) {
+	getProjectsByTeamMember(
+		teamProfileId: $teamProfileId
+		first: $first
+		after: $after
+		last: $last
+		before: $before
+		filters: $filters
+		ordering: $ordering
+	) {
+		edges {
+			node {
+				id
+				name
+				date
+				status
+				accountAddressId
+				customerId
+				scopeId
+				city
+				state
+				zipCode
+				streetAddress
+				notes
+				teamMembers {
+					pk
+				}
+			}
+			cursor
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
+			hasPreviousPage
+			startCursor
+		}
+	}
+}
diff --git a/src/lib/graphql/queries/team/Reports.graphql b/src/lib/graphql/queries/team/Reports.graphql
new file mode 100644
index 0000000..dc1faa5
--- /dev/null
+++ b/src/lib/graphql/queries/team/Reports.graphql
@@ -0,0 +1,10 @@
+query ReportsForTeam($filters: ReportFilter) {
+	reports(filters: $filters) {
+		id
+		date
+		teamMemberId
+		projectsLaborTotal
+		servicesLaborTotal
+		totalLaborValue
+	}
+}
diff --git a/src/lib/graphql/queries/team/Services.graphql b/src/lib/graphql/queries/team/Services.graphql
new file mode 100644
index 0000000..73388b6
--- /dev/null
+++ b/src/lib/graphql/queries/team/Services.graphql
@@ -0,0 +1,40 @@
+query ServicesForTeam(
+	$teamProfileId: ID!
+	$first: Int
+	$after: String
+	$last: Int
+	$before: String
+	$filters: ServiceFilter
+	$ordering: DateOrdering
+) {
+	getServicesByTeamMember(
+		teamProfileId: $teamProfileId
+		first: $first
+		after: $after
+		last: $last
+		before: $before
+		filters: $filters
+		ordering: $ordering
+	) {
+		edges {
+			node {
+				id
+				accountId
+				accountAddressId
+				date
+				status
+				notes
+				teamMembers {
+					pk
+				}
+			}
+			cursor
+		}
+		pageInfo {
+			hasNextPage
+			endCursor
+			hasPreviousPage
+			startCursor
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/.graphqlrc.yaml b/src/lib/graphql/wave/.graphqlrc.yaml
new file mode 100644
index 0000000..7f54965
--- /dev/null
+++ b/src/lib/graphql/wave/.graphqlrc.yaml
@@ -0,0 +1,2 @@
+schema: ./schema.graphql
+documents: ./**/*.gql
diff --git a/src/lib/graphql/wave/client.ts b/src/lib/graphql/wave/client.ts
new file mode 100644
index 0000000..4e44033
--- /dev/null
+++ b/src/lib/graphql/wave/client.ts
@@ -0,0 +1,17 @@
+import { createClient, cacheExchange, fetchExchange } from '@urql/svelte';
+
+/**
+ * Create a Wave client for server-side use with a provided access token.
+ * Use this in +page.server.ts or +server.ts files with WAVE_ACCESS_TOKEN from private env.
+ */
+export function createWaveServerClient(accessToken: string) {
+	return createClient({
+		url: 'https://gql.waveapps.com/graphql/public',
+		exchanges: [cacheExchange, fetchExchange],
+		fetchOptions: () => ({
+			headers: {
+				Authorization: `Bearer ${accessToken}`
+			}
+		})
+	});
+}
diff --git a/src/lib/graphql/wave/generated.ts b/src/lib/graphql/wave/generated.ts
new file mode 100644
index 0000000..fabb3ad
--- /dev/null
+++ b/src/lib/graphql/wave/generated.ts
@@ -0,0 +1,4659 @@
+import gql from 'graphql-tag';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never };
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: { input: string; output: string; }
+  String: { input: string; output: string; }
+  Boolean: { input: boolean; output: boolean; }
+  Int: { input: number; output: number; }
+  Float: { input: number; output: number; }
+  Date: { input: any; output: any; }
+  DateTime: { input: any; output: any; }
+  Decimal: { input: any; output: any; }
+  HexColorCode: { input: any; output: any; }
+  JSON: { input: any; output: any; }
+  URL: { input: any; output: any; }
+};
+
+/** A unique record for each type of asset, liability, equity, income and expense. Used as part of a Chart of Accounts. */
+export type Account = BusinessNode & Node & {
+  __typename?: 'Account';
+  /** The balance of the account as of the current date. */
+  balance?: Maybe<Scalars['Decimal']['output']>;
+  /** The balance of the account as of the current date in the business currency. */
+  balanceInBusinessCurrency?: Maybe<Scalars['Decimal']['output']>;
+  /** Business that the account belongs to. */
+  business: Business;
+  /** The classic primary key used internally at Wave. */
+  classicId?: Maybe<Scalars['String']['output']>;
+  /** Currency of the account. */
+  currency: Currency;
+  /** User defined description for the account. */
+  description?: Maybe<Scalars['String']['output']>;
+  /** User defined id for the account. */
+  displayId?: Maybe<Scalars['String']['output']>;
+  /** Unique identifier for the account. */
+  id: Scalars['ID']['output'];
+  /** Indicates whether the account is hidden from view by default. */
+  isArchived: Scalars['Boolean']['output'];
+  /** Name of the account. */
+  name: Scalars['String']['output'];
+  /** Credit or Debit. */
+  normalBalanceType: AccountNormalBalanceType;
+  /**
+   * Numerically increasing version, each representing a revision of account data.
+   * As soon as something modifies an account, its sequence is incremented.
+   */
+  sequence: Scalars['Int']['output'];
+  /** The account subtype classification based on type. */
+  subtype: AccountSubtype;
+  /** Account type. */
+  type: AccountType;
+};
+
+/** Input to the `accountArchive` mutation. */
+export type AccountArchiveInput = {
+  /** The unique identifier for the account. */
+  id: Scalars['ID']['input'];
+};
+
+/** Output of the accountArchive mutation. */
+export type AccountArchiveOutput = {
+  __typename?: 'AccountArchiveOutput';
+  /** Indicates whether the account was successfully archived. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Account connection. */
+export type AccountConnection = {
+  __typename?: 'AccountConnection';
+  /** List of accounts from the Chart of Accounts. */
+  edges: Array<AccountEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Input to the `accountCreate` mutation. */
+export type AccountCreateInput = {
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Currency of the account. Will default to business's currency. */
+  currency?: InputMaybe<CurrencyCode>;
+  /** User defined description for the account. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** User defined id for the account. */
+  displayId?: InputMaybe<Scalars['String']['input']>;
+  /** Name of the account. */
+  name: Scalars['String']['input'];
+  /** The account subtype classification. */
+  subtype: AccountSubtypeValue;
+};
+
+/** Output of the `accountCreate` mutation. */
+export type AccountCreateOutput = {
+  __typename?: 'AccountCreateOutput';
+  /** Account that was created. */
+  account?: Maybe<Account>;
+  /** Indicates whether the account was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Account edge. */
+export type AccountEdge = {
+  __typename?: 'AccountEdge';
+  /** An account from the Chart of Accounts. */
+  node?: Maybe<Account>;
+};
+
+/** Account balance type. */
+export enum AccountNormalBalanceType {
+  /** Credit */
+  Credit = 'CREDIT',
+  /** Debit */
+  Debit = 'DEBIT'
+}
+
+/** Input to the `accountPatch` mutation. */
+export type AccountPatchInput = {
+  /** User defined description for the account. Use null to unset the current value. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** User defined id for the account. Use null to unset the current value. */
+  displayId?: InputMaybe<Scalars['String']['input']>;
+  /** The unique identifier for the account. */
+  id: Scalars['ID']['input'];
+  /** Name of the account. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** The most recent reversion you are aware of. As soon as something modifies an account, its sequence is incremented. */
+  sequence: Scalars['Int']['input'];
+};
+
+/** Output of the accountPatch mutation. */
+export type AccountPatchOutput = {
+  __typename?: 'AccountPatchOutput';
+  /** Account that was patched. */
+  account?: Maybe<Account>;
+  /** Indicates whether the account was successfully patched. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Account subtype. */
+export type AccountSubtype = {
+  __typename?: 'AccountSubtype';
+  /** Indicates if accounts of this subtype can be archived. */
+  archivable: Scalars['Boolean']['output'];
+  /** Account subtype description. */
+  description?: Maybe<Scalars['String']['output']>;
+  /** Account subtype name. */
+  name: Scalars['String']['output'];
+  /** Indicates if accounts of this subtype is system created accounts. */
+  systemCreated: Scalars['Boolean']['output'];
+  /** Account type for the subtype. */
+  type: AccountType;
+  /** Account subtype value. */
+  value: AccountSubtypeValue;
+};
+
+/** Subtypes of accounts, as used in the Chart of Accounts. */
+export enum AccountSubtypeValue {
+  /** Cash & Bank */
+  CashAndBank = 'CASH_AND_BANK',
+  /** Cost of Goods Sold */
+  CostOfGoodsSold = 'COST_OF_GOODS_SOLD',
+  /** Credit Card */
+  CreditCard = 'CREDIT_CARD',
+  /** Customer Prepayments and Customer Credits */
+  CustomerPrepaymentsAndCredits = 'CUSTOMER_PREPAYMENTS_AND_CREDITS',
+  /** Depreciation and Amortization */
+  DepreciationAndAmortization = 'DEPRECIATION_AND_AMORTIZATION',
+  /** Discount */
+  Discounts = 'DISCOUNTS',
+  /** Due For Payroll */
+  DueForPayroll = 'DUE_FOR_PAYROLL',
+  /** Due to You and Other Business Owners */
+  DueToYouAndOtherOwners = 'DUE_TO_YOU_AND_OTHER_OWNERS',
+  /** Expense */
+  Expense = 'EXPENSE',
+  /** Gain on Foreign Exchange */
+  GainOnForeignExchange = 'GAIN_ON_FOREIGN_EXCHANGE',
+  /** Income */
+  Income = 'INCOME',
+  /** Inventory */
+  Inventory = 'INVENTORY',
+  /** Loan and Line of Credit */
+  Loans = 'LOANS',
+  /** Loss on Foreign Exchange */
+  LossOnForeignExchange = 'LOSS_ON_FOREIGN_EXCHANGE',
+  /** Money in Transit */
+  MoneyInTransit = 'MONEY_IN_TRANSIT',
+  /** Business Owner Contribution */
+  NonRetainedEarnings = 'NON_RETAINED_EARNINGS',
+  /** Other Short-Term Asset */
+  OtherCurrentAssets = 'OTHER_CURRENT_ASSETS',
+  /** Other Short-Term Liability */
+  OtherCurrentLiability = 'OTHER_CURRENT_LIABILITY',
+  /** Other Income */
+  OtherIncome = 'OTHER_INCOME',
+  /** Other Long-Term Asset */
+  OtherLongTermAssets = 'OTHER_LONG_TERM_ASSETS',
+  /** Other Long-Term Liability */
+  OtherLongTermLiability = 'OTHER_LONG_TERM_LIABILITY',
+  /** Payable */
+  Payable = 'PAYABLE',
+  /** System Payable Bill */
+  PayableBills = 'PAYABLE_BILLS',
+  /** System Payable Non-Bill */
+  PayableOther = 'PAYABLE_OTHER',
+  /** Payment Processing Fee */
+  PaymentProcessingFees = 'PAYMENT_PROCESSING_FEES',
+  /** Payroll Expense */
+  PayrollExpenses = 'PAYROLL_EXPENSES',
+  /** Property, Plant, Equipment */
+  PropertyPlantEquipment = 'PROPERTY_PLANT_EQUIPMENT',
+  /** Receivable */
+  Receivable = 'RECEIVABLE',
+  /** System Receivable Invoice */
+  ReceivableInvoices = 'RECEIVABLE_INVOICES',
+  /** System Receivable Non-Invoice */
+  ReceivableOther = 'RECEIVABLE_OTHER',
+  /** Retained Earnings: Profit and Business Owner Drawing */
+  RetainedEarnings = 'RETAINED_EARNINGS',
+  /** Sales Tax on Sales and Purchases */
+  SalesTax = 'SALES_TAX',
+  /** System Customer Credits */
+  SystemCustomerCredits = 'SYSTEM_CUSTOMER_CREDITS',
+  /** Transfers */
+  Transfers = 'TRANSFERS',
+  /** Uncategorized Expense */
+  UncategorizedExpense = 'UNCATEGORIZED_EXPENSE',
+  /** Uncategorized Income */
+  UncategorizedIncome = 'UNCATEGORIZED_INCOME',
+  /** Unknown Account */
+  UnknownAccount = 'UNKNOWN_ACCOUNT',
+  /** Vendor Prepayments and Vendor Credits */
+  VendorPrepaymentsAndCredits = 'VENDOR_PREPAYMENTS_AND_CREDITS'
+}
+
+/** Account type. */
+export type AccountType = {
+  __typename?: 'AccountType';
+  /** Account type name. */
+  name: Scalars['String']['output'];
+  /** Normal balance type of the account type */
+  normalBalanceType: AccountNormalBalanceType;
+  /** Account type value. */
+  value: AccountTypeValue;
+};
+
+/** Types of accounts, as used in the Chart of Accounts. */
+export enum AccountTypeValue {
+  /** Represents the different types of economic resources owned or controlled by an entity. */
+  Asset = 'ASSET',
+  /** Represents the residual equity of an entity. */
+  Equity = 'EQUITY',
+  /** Represents the business's expenditures. */
+  Expense = 'EXPENSE',
+  /** Represents the business's earnings. */
+  Income = 'INCOME',
+  /** Represents the different types of economic obligations of an entity. */
+  Liability = 'LIABILITY'
+}
+
+/** An address. */
+export type Address = {
+  __typename?: 'Address';
+  /** Address line 1 (Street address/PO Box/Company name). */
+  addressLine1?: Maybe<Scalars['String']['output']>;
+  /** Address line 2 (Apartment/Suite/Unit/Building). */
+  addressLine2?: Maybe<Scalars['String']['output']>;
+  /** City/District/Suburb/Town/Village. */
+  city?: Maybe<Scalars['String']['output']>;
+  /** Country. */
+  country?: Maybe<Country>;
+  /** Zip/Postal Code. */
+  postalCode?: Maybe<Scalars['String']['output']>;
+  /** State/County/Province/Region. */
+  province?: Maybe<Province>;
+};
+
+/** An address. */
+export type AddressInput = {
+  /** Address line 1 (Street address/PO Box/Company name). */
+  addressLine1?: InputMaybe<Scalars['String']['input']>;
+  /** Address line 2 (Apartment/Suite/Unit/Building). */
+  addressLine2?: InputMaybe<Scalars['String']['input']>;
+  /** City/District/Suburb/Town/Village. */
+  city?: InputMaybe<Scalars['String']['input']>;
+  /** Country Code. */
+  countryCode?: InputMaybe<CountryCode>;
+  /** Zip/Postal Code. */
+  postalCode?: InputMaybe<Scalars['String']['input']>;
+  /** State/County/Province/Region Code ([ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2)). */
+  provinceCode?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Balance type that expresses how to change an account. */
+export enum BalanceType {
+  /** Credit. */
+  Credit = 'CREDIT',
+  /** Debit. */
+  Debit = 'DEBIT',
+  /** Decrease using the inverse of the account's normal balance type. For contra accounts whose subtype is `DISCOUNTS` or `DEPRECIATION_AND_AMORTIZATION`, apply the amount in the account's normal balance type. */
+  Decrease = 'DECREASE',
+  /** Increase using the account's normal balance type. For contra accounts whose subtype is `DISCOUNTS` or `DEPRECIATION_AND_AMORTIZATION`, apply the amount in the inverse of the account's normal balance type. */
+  Increase = 'INCREASE'
+}
+
+/** An organization and legal entity made up of an association of people. */
+export type Business = Node & {
+  __typename?: 'Business';
+  /** Get an account of the business. */
+  account?: Maybe<Account>;
+  /** Chart of Accounts for the business. */
+  accounts?: Maybe<AccountConnection>;
+  /** The address of the business. */
+  address?: Maybe<Address>;
+  /** When the business was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** The currency of the business. */
+  currency: Currency;
+  /** Get a customer of the business. */
+  customer?: Maybe<Customer>;
+  /** List of customers for the business. */
+  customers?: Maybe<CustomerConnection>;
+  /** Indicates whether Wave email sending features, such as sending invoices, are enabled for this business */
+  emailSendEnabled: Scalars['Boolean']['output'];
+  /** The fax number of the business. */
+  fax?: Maybe<Scalars['String']['output']>;
+  /** The unique identifier for the business. */
+  id: Scalars['ID']['output'];
+  /** Get an invoice of the business. */
+  invoice?: Maybe<Invoice>;
+  /** Invoice and estimate settings for the business. */
+  invoiceEstimateSettings: InvoiceEstimateSettings;
+  /** List of invoices for the business. */
+  invoices?: Maybe<InvoiceConnection>;
+  /** Is the business hidden from view by default. */
+  isArchived: Scalars['Boolean']['output'];
+  /**
+   * Does business use classic accounting system.
+   * @deprecated Classic Accounting is deprecated
+   */
+  isClassicAccounting: Scalars['Boolean']['output'];
+  /**
+   * Does business use classic invoicing system.
+   * @deprecated Classic Invoicing is deprecated
+   */
+  isClassicInvoicing: Scalars['Boolean']['output'];
+  /** Is the business a personal one with limited functionality compared to regular businesses. */
+  isPersonal: Scalars['Boolean']['output'];
+  /** The mobile/cell number of the business. */
+  mobile?: Maybe<Scalars['String']['output']>;
+  /** When the business was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** The name of the business. */
+  name: Scalars['String']['output'];
+  /** The organization type of the business. */
+  organizationalType?: Maybe<OrganizationalType>;
+  /** The phone number of the business. */
+  phone?: Maybe<Scalars['String']['output']>;
+  /** Get a product (or service) of the business. */
+  product?: Maybe<Product>;
+  /** List of products (and services) for the business. */
+  products?: Maybe<ProductConnection>;
+  /** Get a sales tax of the business. */
+  salesTax?: Maybe<SalesTax>;
+  /** List of sales taxes for the business. */
+  salesTaxes?: Maybe<SalesTaxConnection>;
+  /** The subtype of the business. */
+  subtype?: Maybe<BusinessSubtype>;
+  /** The timezone of the business. */
+  timezone?: Maybe<Scalars['String']['output']>;
+  /** The toll free number of the business. */
+  tollFree?: Maybe<Scalars['String']['output']>;
+  /** The type of the business. */
+  type?: Maybe<BusinessType>;
+  /** Get a vendor of the business. */
+  vendor?: Maybe<Vendor>;
+  /** List of vendors for the business. */
+  vendors?: Maybe<VendorConnection>;
+  /** The website of the business. */
+  website?: Maybe<Scalars['String']['output']>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessAccountArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessAccountsArgs = {
+  excludedSubtypes?: InputMaybe<Array<AccountSubtypeValue>>;
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  subtypes?: InputMaybe<Array<AccountSubtypeValue>>;
+  types?: InputMaybe<Array<AccountTypeValue>>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessCustomerArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessCustomersArgs = {
+  email?: InputMaybe<Scalars['String']['input']>;
+  modifiedAtAfter?: InputMaybe<Scalars['DateTime']['input']>;
+  modifiedAtBefore?: InputMaybe<Scalars['DateTime']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<CustomerSort>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessInvoiceArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessInvoicesArgs = {
+  amountDue?: InputMaybe<Scalars['Decimal']['input']>;
+  currency?: InputMaybe<CurrencyCode>;
+  customerId?: InputMaybe<Scalars['ID']['input']>;
+  invoiceDateEnd?: InputMaybe<Scalars['Date']['input']>;
+  invoiceDateStart?: InputMaybe<Scalars['Date']['input']>;
+  invoiceNumber?: InputMaybe<Scalars['String']['input']>;
+  modifiedAtAfter?: InputMaybe<Scalars['DateTime']['input']>;
+  modifiedAtBefore?: InputMaybe<Scalars['DateTime']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<InvoiceSort>;
+  sourceId?: InputMaybe<Scalars['ID']['input']>;
+  status?: InputMaybe<InvoiceStatus>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessProductArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessProductsArgs = {
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+  isBought?: InputMaybe<Scalars['Boolean']['input']>;
+  isSold?: InputMaybe<Scalars['Boolean']['input']>;
+  modifiedAtAfter?: InputMaybe<Scalars['DateTime']['input']>;
+  modifiedAtBefore?: InputMaybe<Scalars['DateTime']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<ProductSort>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessSalesTaxArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessSalesTaxesArgs = {
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+  modifiedAtAfter?: InputMaybe<Scalars['DateTime']['input']>;
+  modifiedAtBefore?: InputMaybe<Scalars['DateTime']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessVendorArgs = {
+  id: Scalars['ID']['input'];
+};
+
+
+/** An organization and legal entity made up of an association of people. */
+export type BusinessVendorsArgs = {
+  email?: InputMaybe<Scalars['String']['input']>;
+  modifiedAtAfter?: InputMaybe<Scalars['DateTime']['input']>;
+  modifiedAtBefore?: InputMaybe<Scalars['DateTime']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+};
+
+/** Business connection. */
+export type BusinessConnection = {
+  __typename?: 'BusinessConnection';
+  /** List of businesses. */
+  edges: Array<BusinessEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Business edge. */
+export type BusinessEdge = {
+  __typename?: 'BusinessEdge';
+  /** A business. */
+  node?: Maybe<Business>;
+};
+
+/** An object belonging to a `Business` with an `ID`. */
+export type BusinessNode = {
+  /** Business that the node belongs to. */
+  business: Business;
+  /** ID of the object. */
+  id: Scalars['ID']['output'];
+};
+
+/** Granular area of focus of a business. */
+export type BusinessSubtype = {
+  __typename?: 'BusinessSubtype';
+  /** The description of the business subtype in human-friendly form. */
+  name: Scalars['String']['output'];
+  /** The enum value of the business subtype. */
+  value: BusinessSubtypeValue;
+};
+
+/** Granular area of focus of a business. */
+export enum BusinessSubtypeValue {
+  /** Advertising, Public Relations */
+  AdvertisingPublicRelations = 'ADVERTISING_PUBLIC_RELATIONS',
+  /** Agriculture, Ranching and Farming */
+  AgricultureRanchingFarming = 'AGRICULTURE_RANCHING_FARMING',
+  /** Actor */
+  ArtistsPhotographersCreativeActor = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__ACTOR',
+  /** Audio/Visual Production */
+  ArtistsPhotographersCreativeAudioVisualProduction = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__AUDIO_VISUAL_PRODUCTION',
+  /** Craftsperson */
+  ArtistsPhotographersCreativeCraftsperson = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__CRAFTSPERSON',
+  /** Dancer, Choreographer */
+  ArtistsPhotographersCreativeDancerChoreog = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__DANCER_CHOREOG',
+  /** Musician */
+  ArtistsPhotographersCreativeMusician = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__MUSICIAN',
+  /** Other Creative */
+  ArtistsPhotographersCreativeOther = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__OTHER',
+  /** Performing Arts (acting, music, dance) */
+  ArtistsPhotographersCreativePerformingArtsActingMusicDance = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__PERFORMING_ARTS_ACTING_MUSIC_DANCE',
+  /** Photographer */
+  ArtistsPhotographersCreativePhotographer = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__PHOTOGRAPHER',
+  /** Visual Artist */
+  ArtistsPhotographersCreativeVisualArtist = 'ARTISTS_PHOTOGRAPHERS_CREATIVE__VISUAL_ARTIST',
+  /** Automotive Repair & Sales */
+  AutomotiveSalesAndRepair = 'AUTOMOTIVE_SALES_AND_REPAIR',
+  /** Church, Religious Organization */
+  ChurchReligiousOrganization = 'CHURCH_RELIGIOUS_ORGANIZATION',
+  /** Contractor */
+  ConstructionHomeImprovementContractor = 'CONSTRUCTION_HOME_IMPROVEMENT__CONTRACTOR',
+  /** Engineer */
+  ConstructionHomeImprovementEngineer = 'CONSTRUCTION_HOME_IMPROVEMENT__ENGINEER',
+  /** Home Inspector */
+  ConstructionHomeImprovementHomeInspector = 'CONSTRUCTION_HOME_IMPROVEMENT__HOME_INSPECTOR',
+  /** Trade */
+  ConstructionHomeImprovementOtherTrades = 'CONSTRUCTION_HOME_IMPROVEMENT__OTHER_TRADES',
+  /** Accountant, Bookkeeper */
+  ConsultantsProfessionalsAccountantsBookkeepers = 'CONSULTANTS_PROFESSIONALS__ACCOUNTANTS_BOOKKEEPERS',
+  /** Communications, Marketing, PR */
+  ConsultantsProfessionalsCommunications = 'CONSULTANTS_PROFESSIONALS__COMMUNICATIONS',
+  /** Executive Coach */
+  ConsultantsProfessionalsExecutiveCoach = 'CONSULTANTS_PROFESSIONALS__EXECUTIVE_COACH',
+  /** HR, Recruitment, Staffing */
+  ConsultantsProfessionalsHrRecruitmentStaffing = 'CONSULTANTS_PROFESSIONALS__HR_RECRUITMENT_STAFFING',
+  /** IT, Technical */
+  ConsultantsProfessionalsItTechnical = 'CONSULTANTS_PROFESSIONALS__IT_TECHNICAL',
+  /** Other Consultant */
+  ConsultantsProfessionalsOther = 'CONSULTANTS_PROFESSIONALS__OTHER',
+  /** Sales */
+  ConsultantsProfessionalsSales = 'CONSULTANTS_PROFESSIONALS__SALES',
+  /** Design, Architecture, Engineering */
+  DesignArchitectureEngineering = 'DESIGN_ARCHITECTURE_ENGINEERING',
+  /** Other Financial Service */
+  FinancialServices = 'FINANCIAL_SERVICES',
+  /** Salon, Spa */
+  HairSpaAestheticsHairSalon = 'HAIR_SPA_AESTHETICS__HAIR_SALON',
+  /** Massage */
+  HairSpaAestheticsMassage = 'HAIR_SPA_AESTHETICS__MASSAGE',
+  /** Nails, Skin, Aesthetics */
+  HairSpaAestheticsNailSkinAesthetics = 'HAIR_SPA_AESTHETICS__NAIL_SKIN_AESTHETICS',
+  /** Other Aesthetics/Spa */
+  HairSpaAestheticsOther = 'HAIR_SPA_AESTHETICS__OTHER',
+  /** Insurance Agency, Broker */
+  InsuranceAgencyBroker = 'INSURANCE_AGENCY_BROKER',
+  /** Landlord */
+  LandlordPropertyManagerLandlord = 'LANDLORD_PROPERTY_MANAGER__LANDLORD',
+  /** Property Manager */
+  LandlordPropertyManagerPropertyManager = 'LANDLORD_PROPERTY_MANAGER__PROPERTY_MANAGER',
+  /** Lawn Care, Landscaping */
+  LawnCareLandscaping = 'LAWN_CARE_LANDSCAPING',
+  /** Legal Services */
+  LegalServices = 'LEGAL_SERVICES',
+  /** Lodging, Hotel, Motel */
+  LodgingHotelMotel = 'LODGING_HOTEL_MOTEL',
+  /** Manufacturing Representative, Agent */
+  ManufacturerRepresentativeAgent = 'MANUFACTURER_REPRESENTATIVE_AGENT',
+  /** Chiropractor */
+  MedicalDentalHealthServiceChiropractor = 'MEDICAL_DENTAL_HEALTH_SERVICE__CHIROPRACTOR',
+  /** Dentist */
+  MedicalDentalHealthServiceDentist = 'MEDICAL_DENTAL_HEALTH_SERVICE__DENTIST',
+  /** Fitness */
+  MedicalDentalHealthServiceFitness = 'MEDICAL_DENTAL_HEALTH_SERVICE__FITNESS',
+  /** Massage Therapist */
+  MedicalDentalHealthServiceMassageTherapist = 'MEDICAL_DENTAL_HEALTH_SERVICE__MASSAGE_THERAPIST',
+  /** Mental Health */
+  MedicalDentalHealthServiceMentalHealth = 'MEDICAL_DENTAL_HEALTH_SERVICE__MENTAL_HEALTH',
+  /** Nutrition */
+  MedicalDentalHealthServiceNutrition = 'MEDICAL_DENTAL_HEALTH_SERVICE__NUTRITION',
+  /** Occupational Therapist */
+  MedicalDentalHealthServiceOccupTherapist = 'MEDICAL_DENTAL_HEALTH_SERVICE__OCCUP_THERAPIST',
+  /** Other Health */
+  MedicalDentalHealthServiceOther = 'MEDICAL_DENTAL_HEALTH_SERVICE__OTHER',
+  /** Physical Therapist */
+  MedicalDentalHealthServicePhysicalTherapist = 'MEDICAL_DENTAL_HEALTH_SERVICE__PHYSICAL_THERAPIST',
+  /** Association */
+  NonprofitAssociationsGroupsAssociation = 'NONPROFIT_ASSOCIATIONS_GROUPS__ASSOCIATION',
+  /** Charity */
+  NonprofitAssociationsGroupsCharitable = 'NONPROFIT_ASSOCIATIONS_GROUPS__CHARITABLE',
+  /** Club */
+  NonprofitAssociationsGroupsClub = 'NONPROFIT_ASSOCIATIONS_GROUPS__CLUB',
+  /** Condo */
+  NonprofitAssociationsGroupsCondo = 'NONPROFIT_ASSOCIATIONS_GROUPS__CONDO',
+  /** Other Non-Profit */
+  NonprofitAssociationsGroupsOther = 'NONPROFIT_ASSOCIATIONS_GROUPS__OTHER',
+  /** Parent Booster USA */
+  NonprofitAssociationsGroupsParentBooster = 'NONPROFIT_ASSOCIATIONS_GROUPS__PARENT_BOOSTER',
+  /** Other (please specify) */
+  OtherOtherPleaseSpecify = 'OTHER__OTHER_PLEASE_SPECIFY',
+  /** Manufacturer */
+  ProductProviderManufacturer = 'PRODUCT_PROVIDER__MANUFACTURER',
+  /** Manufacturer and Vendor */
+  ProductProviderManufacturerAndVendor = 'PRODUCT_PROVIDER__MANUFACTURER_AND_VENDOR',
+  /** Other Product-based Business */
+  ProductProviderOther = 'PRODUCT_PROVIDER__OTHER',
+  /** Vendor */
+  ProductProviderVendor = 'PRODUCT_PROVIDER__VENDOR',
+  /** Real Estate Agent */
+  RealEstateSalesAgent = 'REAL_ESTATE_SALES__AGENT',
+  /** Real Estate Broker */
+  RealEstateSalesBroker = 'REAL_ESTATE_SALES__BROKER',
+  /** Other Real Estate */
+  RealEstateSalesOther = 'REAL_ESTATE_SALES__OTHER',
+  /** Real Estate Rental */
+  Rental = 'RENTAL',
+  /** Repairs/Maintenance */
+  RepairAndMaintenance = 'REPAIR_AND_MAINTENANCE',
+  /** Restaurant, Caterer, Bar */
+  RestaurantCatererBar = 'RESTAURANT_CATERER_BAR',
+  /** eBay Resellers */
+  RetailersAndResellersEbay = 'RETAILERS_AND_RESELLERS__EBAY',
+  /** Etsy Vendors */
+  RetailersAndResellersEtsy = 'RETAILERS_AND_RESELLERS__ETSY',
+  /** Non-Store Retailers */
+  RetailersAndResellersNonStoreRetailer = 'RETAILERS_AND_RESELLERS__NON_STORE_RETAILER',
+  /** Other Retailers */
+  RetailersAndResellersOther = 'RETAILERS_AND_RESELLERS__OTHER',
+  /** Store Retailers */
+  RetailersAndResellersStoreRetailer = 'RETAILERS_AND_RESELLERS__STORE_RETAILER',
+  /** Sales: Independent Agent */
+  SalesIndependentAgent = 'SALES_INDEPENDENT_AGENT',
+  /** Cleaning, Janitorial Services */
+  ServiceProviderCleaningJanitorialServices = 'SERVICE_PROVIDER__CLEANING_JANITORIAL_SERVICES',
+  /** Customer Service/Support */
+  ServiceProviderCustomerServiceSupport = 'SERVICE_PROVIDER__CUSTOMER_SERVICE_SUPPORT',
+  /** Household Employer */
+  ServiceProviderDomesticCaregiverEmployer = 'SERVICE_PROVIDER__DOMESTIC_CAREGIVER_EMPLOYER',
+  /** Fitness */
+  ServiceProviderFitness = 'SERVICE_PROVIDER__FITNESS',
+  /** Office Admin/Support */
+  ServiceProviderOfficeAdminSupport = 'SERVICE_PROVIDER__OFFICE_ADMIN_SUPPORT',
+  /** Other Service-based Business */
+  ServiceProviderOther = 'SERVICE_PROVIDER__OTHER',
+  /** Personal Care */
+  ServiceProviderPersonalCare = 'SERVICE_PROVIDER__PERSONAL_CARE',
+  /** Telemarketing */
+  ServiceProviderTelemarketing = 'SERVICE_PROVIDER__TELEMARKETING',
+  /** Transcription */
+  ServiceProviderTranscription = 'SERVICE_PROVIDER__TRANSCRIPTION',
+  /** Transportation, Trucking, Deliver */
+  TransportationTruckingDelivery = 'TRANSPORTATION_TRUCKING_DELIVERY',
+  /** Designer */
+  WebMediaFreelancerDesigner = 'WEB_MEDIA_FREELANCER__DESIGNER',
+  /** Marketing, Social Media */
+  WebMediaFreelancerMarketingSocialMedia = 'WEB_MEDIA_FREELANCER__MARKETING_SOCIAL_MEDIA',
+  /** Other Media/Tech */
+  WebMediaFreelancerOther = 'WEB_MEDIA_FREELANCER__OTHER',
+  /** Programmer */
+  WebMediaFreelancerProgrammer = 'WEB_MEDIA_FREELANCER__PROGRAMMER',
+  /** SEO */
+  WebMediaFreelancerSeo = 'WEB_MEDIA_FREELANCER__SEO',
+  /** Writer */
+  WebMediaFreelancerWriter = 'WEB_MEDIA_FREELANCER__WRITER',
+  /** Wholesale Distribution and Sales */
+  WholesaleDistributionSales = 'WHOLESALE_DISTRIBUTION_SALES'
+}
+
+/** Area of focus of a business. */
+export type BusinessType = {
+  __typename?: 'BusinessType';
+  /** The description of the business type in human-friendly form. */
+  name: Scalars['String']['output'];
+  /** The enum value of the business type. */
+  value: BusinessTypeValue;
+};
+
+/** Area of focus of a business. */
+export enum BusinessTypeValue {
+  /** Artists, Photographers & Creative Types */
+  ArtistsPhotographersCreative = 'ARTISTS_PHOTOGRAPHERS_CREATIVE',
+  /** Consultants & Professionals */
+  ConsultantsProfessionals = 'CONSULTANTS_PROFESSIONALS',
+  /** Financial Services */
+  FinanceInsurance = 'FINANCE_INSURANCE',
+  /** Hair, Spa & Aesthetics */
+  HairSpaAesthetics = 'HAIR_SPA_AESTHETICS',
+  /** Medical, Dental, Health */
+  MedicalDentalHealthService = 'MEDICAL_DENTAL_HEALTH_SERVICE',
+  /** Non-profits, Associations & Groups */
+  NonprofitAssociationsGroups = 'NONPROFIT_ASSOCIATIONS_GROUPS',
+  /** Other (please specify) */
+  Other = 'OTHER',
+  /** General: I make or sell a PRODUCT */
+  ProductProvider = 'PRODUCT_PROVIDER',
+  /** Real Estate, Construction & Home Improvement */
+  RealestateHome = 'REALESTATE_HOME',
+  /** Retailers, Resellers & Sales */
+  RetailersAndResellers = 'RETAILERS_AND_RESELLERS',
+  /** General: I provide a SERVICE */
+  ServiceProvider = 'SERVICE_PROVIDER',
+  /** Web, Tech & Media */
+  WebMediaFreelancer = 'WEB_MEDIA_FREELANCER'
+}
+
+/** A country. */
+export type Country = {
+  __typename?: 'Country';
+  /** Country code. */
+  code: CountryCode;
+  /** Default currency of the country. */
+  currency: Currency;
+  /** Plain-language representation. */
+  name: Scalars['String']['output'];
+  /** Name of the country with the appropriate article. */
+  nameWithArticle: Scalars['String']['output'];
+  /** List of principal subdivisions. */
+  provinces: Array<Province>;
+};
+
+/** Country codes ([ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)). */
+export enum CountryCode {
+  /** Andorra */
+  Ad = 'AD',
+  /** United Arab Emirates */
+  Ae = 'AE',
+  /** Afghanistan */
+  Af = 'AF',
+  /** Antigua and Barbuda */
+  Ag = 'AG',
+  /** Anguilla */
+  Ai = 'AI',
+  /** Albania */
+  Al = 'AL',
+  /** Armenia */
+  Am = 'AM',
+  /** Angola */
+  Ao = 'AO',
+  /** Antarctica */
+  Aq = 'AQ',
+  /** Argentina */
+  Ar = 'AR',
+  /** American Samoa */
+  As = 'AS',
+  /** Austria */
+  At = 'AT',
+  /** Australia */
+  Au = 'AU',
+  /** Aruba */
+  Aw = 'AW',
+  /** Åland Islands */
+  Ax = 'AX',
+  /** Azerbaijan */
+  Az = 'AZ',
+  /** Bosnia and Herzegovina */
+  Ba = 'BA',
+  /** Barbados */
+  Bb = 'BB',
+  /** Bangladesh */
+  Bd = 'BD',
+  /** Belgium */
+  Be = 'BE',
+  /** Burkina Faso */
+  Bf = 'BF',
+  /** Bulgaria */
+  Bg = 'BG',
+  /** Bahrain */
+  Bh = 'BH',
+  /** Burundi */
+  Bi = 'BI',
+  /** Benin */
+  Bj = 'BJ',
+  /** Saint Barthélemy */
+  Bl = 'BL',
+  /** Bermuda */
+  Bm = 'BM',
+  /** Brunei Darussalam */
+  Bn = 'BN',
+  /** Bolivia, Plurinational State of */
+  Bo = 'BO',
+  /** Bonaire, Sint Eustatius and Saba */
+  Bq = 'BQ',
+  /** Brazil */
+  Br = 'BR',
+  /** Bahamas */
+  Bs = 'BS',
+  /** Bhutan */
+  Bt = 'BT',
+  /** Bouvet Island */
+  Bv = 'BV',
+  /** Botswana */
+  Bw = 'BW',
+  /** Belarus */
+  By = 'BY',
+  /** Belize */
+  Bz = 'BZ',
+  /** Canada */
+  Ca = 'CA',
+  /** Cocos (Keeling) Islands */
+  Cc = 'CC',
+  /** Congo, The Democratic Republic of the */
+  Cd = 'CD',
+  /** Central African Republic */
+  Cf = 'CF',
+  /** Congo */
+  Cg = 'CG',
+  /** Switzerland */
+  Ch = 'CH',
+  /** Côte d'Ivoire */
+  Ci = 'CI',
+  /** Cook Islands */
+  Ck = 'CK',
+  /** Chile */
+  Cl = 'CL',
+  /** Cameroon */
+  Cm = 'CM',
+  /** China */
+  Cn = 'CN',
+  /** Colombia */
+  Co = 'CO',
+  /** Costa Rica */
+  Cr = 'CR',
+  /** Cuba */
+  Cu = 'CU',
+  /** Cape Verde */
+  Cv = 'CV',
+  /** Curaçao */
+  Cw = 'CW',
+  /** Christmas Island */
+  Cx = 'CX',
+  /** Cyprus */
+  Cy = 'CY',
+  /** Czech Republic */
+  Cz = 'CZ',
+  /** Germany */
+  De = 'DE',
+  /** Djibouti */
+  Dj = 'DJ',
+  /** Denmark */
+  Dk = 'DK',
+  /** Dominica */
+  Dm = 'DM',
+  /** Dominican Republic */
+  Do = 'DO',
+  /** Algeria */
+  Dz = 'DZ',
+  /** Ecuador */
+  Ec = 'EC',
+  /** Estonia */
+  Ee = 'EE',
+  /** Egypt */
+  Eg = 'EG',
+  /** Western Sahara */
+  Eh = 'EH',
+  /** Eritrea */
+  Er = 'ER',
+  /** Spain */
+  Es = 'ES',
+  /** Ethiopia */
+  Et = 'ET',
+  /** Finland */
+  Fi = 'FI',
+  /** Fiji */
+  Fj = 'FJ',
+  /** Falkland Islands */
+  Fk = 'FK',
+  /** Micronesia, Federated States of */
+  Fm = 'FM',
+  /** Faroe Islands */
+  Fo = 'FO',
+  /** France */
+  Fr = 'FR',
+  /** Gabon */
+  Ga = 'GA',
+  /** United Kingdom */
+  Gb = 'GB',
+  /** Grenada */
+  Gd = 'GD',
+  /** Georgia */
+  Ge = 'GE',
+  /** French Guiana */
+  Gf = 'GF',
+  /** Guernsey */
+  Gg = 'GG',
+  /** Ghana */
+  Gh = 'GH',
+  /** Gibraltar */
+  Gi = 'GI',
+  /** Greenland */
+  Gl = 'GL',
+  /** Gambia */
+  Gm = 'GM',
+  /** Guinea */
+  Gn = 'GN',
+  /** Guadeloupe */
+  Gp = 'GP',
+  /** Equatorial Guinea */
+  Gq = 'GQ',
+  /** Greece */
+  Gr = 'GR',
+  /** South Georgia and the South Sandwich Islands */
+  Gs = 'GS',
+  /** Guatemala */
+  Gt = 'GT',
+  /** Guam */
+  Gu = 'GU',
+  /** Guinea-Bissau */
+  Gw = 'GW',
+  /** Guyana */
+  Gy = 'GY',
+  /** Hong Kong */
+  Hk = 'HK',
+  /** Heard Island and McDonald Islands */
+  Hm = 'HM',
+  /** Honduras */
+  Hn = 'HN',
+  /** Croatia */
+  Hr = 'HR',
+  /** Haiti */
+  Ht = 'HT',
+  /** Hungary */
+  Hu = 'HU',
+  /** Indonesia */
+  Id = 'ID',
+  /** Ireland */
+  Ie = 'IE',
+  /** Israel */
+  Il = 'IL',
+  /** Isle of Man */
+  Im = 'IM',
+  /** India */
+  In = 'IN',
+  /** British Indian Ocean Territory */
+  Io = 'IO',
+  /** Iraq */
+  Iq = 'IQ',
+  /** Iran */
+  Ir = 'IR',
+  /** Iceland */
+  Is = 'IS',
+  /** Italy */
+  It = 'IT',
+  /** Jersey */
+  Je = 'JE',
+  /** Jamaica */
+  Jm = 'JM',
+  /** Jordan */
+  Jo = 'JO',
+  /** Japan */
+  Jp = 'JP',
+  /** Kenya */
+  Ke = 'KE',
+  /** Kyrgyzstan */
+  Kg = 'KG',
+  /** Cambodia */
+  Kh = 'KH',
+  /** Kiribati */
+  Ki = 'KI',
+  /** Comoros */
+  Km = 'KM',
+  /** Saint Kitts and Nevis */
+  Kn = 'KN',
+  /** Korea, Democratic People's Republic of */
+  Kp = 'KP',
+  /** Korea, Republic of */
+  Kr = 'KR',
+  /** Kuwait */
+  Kw = 'KW',
+  /** Cayman Islands */
+  Ky = 'KY',
+  /** Kazakhstan */
+  Kz = 'KZ',
+  /** Lao People's Democratic Republic */
+  La = 'LA',
+  /** Lebanon */
+  Lb = 'LB',
+  /** Saint Lucia */
+  Lc = 'LC',
+  /** Liechtenstein */
+  Li = 'LI',
+  /** Sri Lanka */
+  Lk = 'LK',
+  /** Liberia */
+  Lr = 'LR',
+  /** Lesotho */
+  Ls = 'LS',
+  /** Lithuania */
+  Lt = 'LT',
+  /** Luxembourg */
+  Lu = 'LU',
+  /** Latvia */
+  Lv = 'LV',
+  /** Libya */
+  Ly = 'LY',
+  /** Morocco */
+  Ma = 'MA',
+  /** Monaco */
+  Mc = 'MC',
+  /** Moldova, Republic of */
+  Md = 'MD',
+  /** Montenegro */
+  Me = 'ME',
+  /** Saint Martin */
+  Mf = 'MF',
+  /** Madagascar */
+  Mg = 'MG',
+  /** Marshall Islands */
+  Mh = 'MH',
+  /** North Macedonia */
+  Mk = 'MK',
+  /** Mali */
+  Ml = 'ML',
+  /** Myanmar */
+  Mm = 'MM',
+  /** Mongolia */
+  Mn = 'MN',
+  /** Macao */
+  Mo = 'MO',
+  /** Northern Mariana Islands */
+  Mp = 'MP',
+  /** Martinique */
+  Mq = 'MQ',
+  /** Mauritania */
+  Mr = 'MR',
+  /** Montserrat */
+  Ms = 'MS',
+  /** Malta */
+  Mt = 'MT',
+  /** Mauritius */
+  Mu = 'MU',
+  /** Maldives */
+  Mv = 'MV',
+  /** Malawi */
+  Mw = 'MW',
+  /** Mexico */
+  Mx = 'MX',
+  /** Malaysia */
+  My = 'MY',
+  /** Mozambique */
+  Mz = 'MZ',
+  /** Namibia */
+  Na = 'NA',
+  /** New Caledonia */
+  Nc = 'NC',
+  /** Niger */
+  Ne = 'NE',
+  /** Norfolk Island */
+  Nf = 'NF',
+  /** Nigeria */
+  Ng = 'NG',
+  /** Nicaragua */
+  Ni = 'NI',
+  /** Netherlands */
+  Nl = 'NL',
+  /** Norway */
+  No = 'NO',
+  /** Nepal */
+  Np = 'NP',
+  /** Nauru */
+  Nr = 'NR',
+  /** Niue */
+  Nu = 'NU',
+  /** New Zealand */
+  Nz = 'NZ',
+  /** Oman */
+  Om = 'OM',
+  /** Panama */
+  Pa = 'PA',
+  /** Peru */
+  Pe = 'PE',
+  /** French Polynesia */
+  Pf = 'PF',
+  /** Papua New Guinea */
+  Pg = 'PG',
+  /** Philippines */
+  Ph = 'PH',
+  /** Pakistan */
+  Pk = 'PK',
+  /** Poland */
+  Pl = 'PL',
+  /** Saint Pierre and Miquelon */
+  Pm = 'PM',
+  /** Pitcairn */
+  Pn = 'PN',
+  /** Puerto Rico */
+  Pr = 'PR',
+  /** Palestine */
+  Ps = 'PS',
+  /** Portugal */
+  Pt = 'PT',
+  /** Palau */
+  Pw = 'PW',
+  /** Paraguay */
+  Py = 'PY',
+  /** Qatar */
+  Qa = 'QA',
+  /** Réunion */
+  Re = 'RE',
+  /** Romania */
+  Ro = 'RO',
+  /** Serbia */
+  Rs = 'RS',
+  /** Russian Federation */
+  Ru = 'RU',
+  /** Rwanda */
+  Rw = 'RW',
+  /** Saudi Arabia */
+  Sa = 'SA',
+  /** Solomon Islands */
+  Sb = 'SB',
+  /** Seychelles */
+  Sc = 'SC',
+  /** Sudan */
+  Sd = 'SD',
+  /** Sweden */
+  Se = 'SE',
+  /** Singapore */
+  Sg = 'SG',
+  /** Saint Helena, Ascension and Tristan da Cunha */
+  Sh = 'SH',
+  /** Slovenia */
+  Si = 'SI',
+  /** Svalbard and Jan Mayen */
+  Sj = 'SJ',
+  /** Slovakia */
+  Sk = 'SK',
+  /** Sierra Leone */
+  Sl = 'SL',
+  /** San Marino */
+  Sm = 'SM',
+  /** Senegal */
+  Sn = 'SN',
+  /** Somalia */
+  So = 'SO',
+  /** Suriname */
+  Sr = 'SR',
+  /** South Sudan */
+  Ss = 'SS',
+  /** Sao Tome and Principe */
+  St = 'ST',
+  /** El Salvador */
+  Sv = 'SV',
+  /** Sint Maarten */
+  Sx = 'SX',
+  /** Syria */
+  Sy = 'SY',
+  /** Eswatini */
+  Sz = 'SZ',
+  /** Turks and Caicos Islands */
+  Tc = 'TC',
+  /** Chad */
+  Td = 'TD',
+  /** French Southern Territories */
+  Tf = 'TF',
+  /** Togo */
+  Tg = 'TG',
+  /** Thailand */
+  Th = 'TH',
+  /** Tajikistan */
+  Tj = 'TJ',
+  /** Tokelau */
+  Tk = 'TK',
+  /** Timor-Leste */
+  Tl = 'TL',
+  /** Turkmenistan */
+  Tm = 'TM',
+  /** Tunisia */
+  Tn = 'TN',
+  /** Tonga */
+  To = 'TO',
+  /** Turkey */
+  Tr = 'TR',
+  /** Trinidad and Tobago */
+  Tt = 'TT',
+  /** Tuvalu */
+  Tv = 'TV',
+  /** Taiwan */
+  Tw = 'TW',
+  /** Tanzania, United Republic of */
+  Tz = 'TZ',
+  /** Ukraine */
+  Ua = 'UA',
+  /** Uganda */
+  Ug = 'UG',
+  /** United States Minor Outlying Islands */
+  Um = 'UM',
+  /** United States */
+  Us = 'US',
+  /** Uruguay */
+  Uy = 'UY',
+  /** Uzbekistan */
+  Uz = 'UZ',
+  /** Holy See */
+  Va = 'VA',
+  /** Saint Vincent and the Grenadines */
+  Vc = 'VC',
+  /** Venezuela, Bolivarian Republic of */
+  Ve = 'VE',
+  /** Virgin Islands (British) */
+  Vg = 'VG',
+  /** Virgin Islands (U.S) */
+  Vi = 'VI',
+  /** Viet Nam */
+  Vn = 'VN',
+  /** Vanuatu */
+  Vu = 'VU',
+  /** Wallis and Futuna */
+  Wf = 'WF',
+  /** Samoa */
+  Ws = 'WS',
+  /** Yemen */
+  Ye = 'YE',
+  /** Mayotte */
+  Yt = 'YT',
+  /** South Africa */
+  Za = 'ZA',
+  /** Zambia */
+  Zm = 'ZM',
+  /** Zimbabwe */
+  Zw = 'ZW'
+}
+
+/** A medium of exchange in common use. */
+export type Currency = {
+  __typename?: 'Currency';
+  /** Currency code. */
+  code: CurrencyCode;
+  /** Expresses the relationship between a major currency unit and its minor currency unit. The number of digits found to the right of the decimal place to represent the fractional part of this currency (assumes a base of 10). */
+  exponent: Scalars['Int']['output'];
+  /** Plain-language representation. */
+  name: Scalars['String']['output'];
+  /** Plural version of currency name. */
+  plural: Scalars['String']['output'];
+  /** Symbol used to denote that a number is a monetary value. */
+  symbol: Scalars['String']['output'];
+};
+
+/** Currency codes based on ISO 4217. */
+export enum CurrencyCode {
+  /** UAE dirham */
+  Aed = 'AED',
+  /** Afghani */
+  Afn = 'AFN',
+  /** Lek */
+  All = 'ALL',
+  /** Armenian dram */
+  Amd = 'AMD',
+  /** Netherlands Antillean Guilder */
+  Ang = 'ANG',
+  /** Kwanza */
+  Aoa = 'AOA',
+  /** Argentinian peso */
+  Ars = 'ARS',
+  /** Australian dollar */
+  Aud = 'AUD',
+  /** Aruban Guilder */
+  Awg = 'AWG',
+  /** New Manat */
+  Azn = 'AZN',
+  /** Convertible Marks */
+  Bam = 'BAM',
+  /** Barbados dollar */
+  Bbd = 'BBD',
+  /** Taka */
+  Bdt = 'BDT',
+  /** Lev */
+  Bgn = 'BGN',
+  /** Bahraini dinar */
+  Bhd = 'BHD',
+  /** Burundi franc */
+  Bif = 'BIF',
+  /** Bermuda dollar */
+  Bmd = 'BMD',
+  /** Brunei dollar */
+  Bnd = 'BND',
+  /** Boliviano */
+  Bob = 'BOB',
+  /** Real */
+  Brl = 'BRL',
+  /** Bahamian dollar */
+  Bsd = 'BSD',
+  /** Ngultrum */
+  Btn = 'BTN',
+  /** Pula */
+  Bwp = 'BWP',
+  /** Belarussian rouble */
+  Byr = 'BYR',
+  /** Belize dollar */
+  Bzd = 'BZD',
+  /** Canadian dollar */
+  Cad = 'CAD',
+  /** Franc congolais */
+  Cdf = 'CDF',
+  /** Swiss franc */
+  Chf = 'CHF',
+  /** Chilean peso */
+  Clp = 'CLP',
+  /** Ren-Min-Bi yuan */
+  Cny = 'CNY',
+  /** Colombian peso */
+  Cop = 'COP',
+  /** Costa Rican colon */
+  Crc = 'CRC',
+  /** Cuban peso */
+  Cup = 'CUP',
+  /** Cape Verde escudo */
+  Cve = 'CVE',
+  /** Czech koruna */
+  Czk = 'CZK',
+  /** Djibouti franc */
+  Djf = 'DJF',
+  /** Danish krone */
+  Dkk = 'DKK',
+  /** Dominican peso */
+  Dop = 'DOP',
+  /** Algerian dinar */
+  Dzd = 'DZD',
+  /** Estonian kroon */
+  Eek = 'EEK',
+  /** Egyptian pound */
+  Egp = 'EGP',
+  /** Nakfa */
+  Ern = 'ERN',
+  /** Ethiopian birr */
+  Etb = 'ETB',
+  /** Euro */
+  Eur = 'EUR',
+  /** Fiji dollar */
+  Fjd = 'FJD',
+  /** Falkland Islands (Malvinas) Pound */
+  Fkp = 'FKP',
+  /** Pound sterling */
+  Gbp = 'GBP',
+  /** Lari */
+  Gel = 'GEL',
+  /** Ghana Cedi */
+  Ghs = 'GHS',
+  /** Gibraltar pound */
+  Gip = 'GIP',
+  /** Dalasi */
+  Gmd = 'GMD',
+  /** Guinean franc */
+  Gnf = 'GNF',
+  /** Quetzal */
+  Gtq = 'GTQ',
+  /** Guinean bissau Peso */
+  Gwp = 'GWP',
+  /** Guyana dollar */
+  Gyd = 'GYD',
+  /** Hong Kong dollar */
+  Hkd = 'HKD',
+  /** Lempira */
+  Hnl = 'HNL',
+  /** Kuna */
+  Hrk = 'HRK',
+  /** Haitian gourde */
+  Htg = 'HTG',
+  /** Forint */
+  Huf = 'HUF',
+  /** Rupiah */
+  Idr = 'IDR',
+  /** New Israeli sheqel */
+  Ils = 'ILS',
+  /** Indian rupee */
+  Inr = 'INR',
+  /** Iraqi dinar */
+  Iqd = 'IQD',
+  /** Iranian rial */
+  Irr = 'IRR',
+  /** Icelandic Krona */
+  Isk = 'ISK',
+  /** Jamaican dollar */
+  Jmd = 'JMD',
+  /** Jordanian dinar */
+  Jod = 'JOD',
+  /** Yen */
+  Jpy = 'JPY',
+  /** Kenyan shilling */
+  Kes = 'KES',
+  /** Kyrgyz Som */
+  Kgs = 'KGS',
+  /** Riel */
+  Khr = 'KHR',
+  /** Comoro franc */
+  Kmf = 'KMF',
+  /** Won */
+  Krw = 'KRW',
+  /** Kuwaiti dinar */
+  Kwd = 'KWD',
+  /** Cayman Islands dollar */
+  Kyd = 'KYD',
+  /** Tenge */
+  Kzt = 'KZT',
+  /** Kip */
+  Lak = 'LAK',
+  /** Lebanese pound */
+  Lbp = 'LBP',
+  /** Sri Lankan rupee */
+  Lkr = 'LKR',
+  /** Liberian dollar */
+  Lrd = 'LRD',
+  /** Loti */
+  Lsl = 'LSL',
+  /** Lithuanian litus */
+  Ltl = 'LTL',
+  /** Latvian lats */
+  Lvl = 'LVL',
+  /** Libyan dinar */
+  Lyd = 'LYD',
+  /** Moroccan dirham */
+  Mad = 'MAD',
+  /** Moldovan leu */
+  Mdl = 'MDL',
+  /** Malagasy Ariary */
+  Mga = 'MGA',
+  /** Denar */
+  Mkd = 'MKD',
+  /** Kyat */
+  Mmk = 'MMK',
+  /** Tugrik */
+  Mnt = 'MNT',
+  /** Pataca */
+  Mop = 'MOP',
+  /** Ouguiya */
+  Mro = 'MRO',
+  /** Ouguiya */
+  Mru = 'MRU',
+  /** Mauritian rupee */
+  Mur = 'MUR',
+  /** Rufiyaa */
+  Mvr = 'MVR',
+  /** Kwacha */
+  Mwk = 'MWK',
+  /** Mexican peso */
+  Mxn = 'MXN',
+  /** Malaysian ringgit */
+  Myr = 'MYR',
+  /** Metical */
+  Mzn = 'MZN',
+  /** Namibian dollar */
+  Nad = 'NAD',
+  /** Naira */
+  Ngn = 'NGN',
+  /** Cordoba Oro */
+  Nio = 'NIO',
+  /** Norwegian krone */
+  Nok = 'NOK',
+  /** Nepalese rupee */
+  Npr = 'NPR',
+  /** New Zealand dollar */
+  Nzd = 'NZD',
+  /** Omani rial */
+  Omr = 'OMR',
+  /** Balboa */
+  Pab = 'PAB',
+  /** Nuevo Sol */
+  Pen = 'PEN',
+  /** Kina */
+  Pgk = 'PGK',
+  /** Philippine peso */
+  Php = 'PHP',
+  /** Pakistani rupee */
+  Pkr = 'PKR',
+  /** Zloty */
+  Pln = 'PLN',
+  /** Guarani */
+  Pyg = 'PYG',
+  /** Qatari riyal */
+  Qar = 'QAR',
+  /** New Leu */
+  Ron = 'RON',
+  /** Serbian Dinar */
+  Rsd = 'RSD',
+  /** Russian rouble */
+  Rub = 'RUB',
+  /** Rwanda franc */
+  Rwf = 'RWF',
+  /** Saudi riyal */
+  Sar = 'SAR',
+  /** Solomon Islands Dollar */
+  Sbd = 'SBD',
+  /** Seychelles rupee */
+  Scr = 'SCR',
+  /** Sudanese Pound */
+  Sdg = 'SDG',
+  /** Swedish Krona */
+  Sek = 'SEK',
+  /** Singapore dollar */
+  Sgd = 'SGD',
+  /** Saint Helena Pound */
+  Shp = 'SHP',
+  /** Leone */
+  Sll = 'SLL',
+  /** Somali shilling */
+  Sos = 'SOS',
+  /** Surinam dollar */
+  Srd = 'SRD',
+  /** South Sudanese pound */
+  Ssp = 'SSP',
+  /** Dobra */
+  Std = 'STD',
+  /** El Salvador colon */
+  Svc = 'SVC',
+  /** Syrian pound */
+  Syp = 'SYP',
+  /** Lilangeni */
+  Szl = 'SZL',
+  /** Baht */
+  Thb = 'THB',
+  /** Somoni */
+  Tjs = 'TJS',
+  /** Manat */
+  Tmm = 'TMM',
+  /** Tunisian dinar */
+  Tnd = 'TND',
+  /** Pa'anga */
+  Top = 'TOP',
+  /** Turkish Lira */
+  Try = 'TRY',
+  /** Trinidad and Tobago dollar */
+  Ttd = 'TTD',
+  /** Taiwan New Dollar */
+  Twd = 'TWD',
+  /** Tanzanian shilling */
+  Tzs = 'TZS',
+  /** Hryvnia */
+  Uah = 'UAH',
+  /** Ugandan shilling */
+  Ugx = 'UGX',
+  /** United States dollar */
+  Usd = 'USD',
+  /** Uruguayo peso */
+  Uyu = 'UYU',
+  /** Uzbekistan sum */
+  Uzs = 'UZS',
+  /** Bolivar Fuerte */
+  Vef = 'VEF',
+  /** Dong */
+  Vnd = 'VND',
+  /** Vatu */
+  Vuv = 'VUV',
+  /** Samoan Tala */
+  Wst = 'WST',
+  /** CFA Franc - BEAC */
+  Xaf = 'XAF',
+  /** Eastern Caribbean dollar */
+  Xcd = 'XCD',
+  /** CFA franc - BCEAO */
+  Xof = 'XOF',
+  /** Comptoirs Francais du Pacifique Francs */
+  Xpf = 'XPF',
+  /** Yemeni rial */
+  Yer = 'YER',
+  /** Rand */
+  Zar = 'ZAR',
+  /** Kwacha */
+  Zmk = 'ZMK',
+  /** Kwacha */
+  Zmw = 'ZMW',
+  /** Zimbabwean dollar */
+  Zwd = 'ZWD'
+}
+
+/** A customer of the business. */
+export type Customer = BusinessNode & Node & {
+  __typename?: 'Customer';
+  /** Address of the customer. */
+  address?: Maybe<Address>;
+  /** Business that the customer belongs to. */
+  business: Business;
+  /** When the customer was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** Default currency used by the customer. */
+  currency?: Maybe<Currency>;
+  /** User defined id for the customer. Commonly referred to as Account Number. */
+  displayId?: Maybe<Scalars['String']['output']>;
+  /** Email of the principal contact. */
+  email?: Maybe<Scalars['String']['output']>;
+  /** Fax number of the customer. */
+  fax?: Maybe<Scalars['String']['output']>;
+  /** First name of the principal contact. */
+  firstName?: Maybe<Scalars['String']['output']>;
+  /** Unique identifier for the customer. */
+  id: Scalars['ID']['output'];
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+  /** Internal notes about the customer. */
+  internalNotes?: Maybe<Scalars['String']['output']>;
+  /** Whether or not the customer is archived. */
+  isArchived?: Maybe<Scalars['Boolean']['output']>;
+  /** Last name of the principal contact. */
+  lastName?: Maybe<Scalars['String']['output']>;
+  /** Mobile telephone number of the principal contact. */
+  mobile?: Maybe<Scalars['String']['output']>;
+  /** When the customer was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** Name or business name of the customer. */
+  name: Scalars['String']['output'];
+  /** Amount due on customer's invoices. */
+  outstandingAmount: Money;
+  /** Amount due on customer's invoices with due date that have passed. */
+  overdueAmount: Money;
+  /** Telephone number of the customer. */
+  phone?: Maybe<Scalars['String']['output']>;
+  /** Details for shipping to the customer. */
+  shippingDetails?: Maybe<CustomerShippingDetails>;
+  /** Toll-free number of the customer. */
+  tollFree?: Maybe<Scalars['String']['output']>;
+  /** Website address of the customer. */
+  website?: Maybe<Scalars['String']['output']>;
+};
+
+/** Customer connection. */
+export type CustomerConnection = {
+  __typename?: 'CustomerConnection';
+  /** List of customers. */
+  edges: Array<CustomerEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Input to the `customerCreate` mutation. */
+export type CustomerCreateInput = {
+  /** Address */
+  address?: InputMaybe<AddressInput>;
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Default currency used by the customer. */
+  currency?: InputMaybe<CurrencyCode>;
+  /** User defined id for the customer. */
+  displayId?: InputMaybe<Scalars['String']['input']>;
+  /** Email of the principal contact. */
+  email?: InputMaybe<Scalars['String']['input']>;
+  /** Fax number of the customer. */
+  fax?: InputMaybe<Scalars['String']['input']>;
+  /** First name of the principal contact. */
+  firstName?: InputMaybe<Scalars['String']['input']>;
+  /** Internal notes about the customer. */
+  internalNotes?: InputMaybe<Scalars['String']['input']>;
+  /** Last name of the principal contact. */
+  lastName?: InputMaybe<Scalars['String']['input']>;
+  /** Mobile telephone number of the principal contact. */
+  mobile?: InputMaybe<Scalars['String']['input']>;
+  /** Name or business name of the customer. */
+  name: Scalars['String']['input'];
+  /** Telephone number of the customer. */
+  phone?: InputMaybe<Scalars['String']['input']>;
+  /** Details for shipping to the customer. */
+  shippingDetails?: InputMaybe<CustomerShippingDetailsInput>;
+  /** Toll-free number of the customer. */
+  tollFree?: InputMaybe<Scalars['String']['input']>;
+  /** Website address of the customer. */
+  website?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Output of the `customerCreate` mutation. */
+export type CustomerCreateOutput = {
+  __typename?: 'CustomerCreateOutput';
+  /** Customer that was created. */
+  customer?: Maybe<Customer>;
+  /** Indicates whether the customer was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Input to the `customerDelete` mutation. */
+export type CustomerDeleteInput = {
+  /** The unique identifier for the customer. */
+  id: Scalars['ID']['input'];
+};
+
+/** Output of the `customerDelete` mutation. */
+export type CustomerDeleteOutput = {
+  __typename?: 'CustomerDeleteOutput';
+  /** Indicates whether the customer was successfully deleted. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Customer edge. */
+export type CustomerEdge = {
+  __typename?: 'CustomerEdge';
+  /** A customer. */
+  node?: Maybe<Customer>;
+};
+
+/** Input to the `customerPatch` mutation. */
+export type CustomerPatchInput = {
+  /** Address */
+  address?: InputMaybe<AddressInput>;
+  /** Default currency used by the customer. */
+  currency?: InputMaybe<CurrencyCode>;
+  /** User defined id for the customer. */
+  displayId?: InputMaybe<Scalars['String']['input']>;
+  /** Email of the principal contact. */
+  email?: InputMaybe<Scalars['String']['input']>;
+  /** Fax number of the customer. */
+  fax?: InputMaybe<Scalars['String']['input']>;
+  /** First name of the principal contact. */
+  firstName?: InputMaybe<Scalars['String']['input']>;
+  /** The unique identifier for the customer. */
+  id: Scalars['ID']['input'];
+  /** Internal notes about the customer. */
+  internalNotes?: InputMaybe<Scalars['String']['input']>;
+  /** Last name of the principal contact. */
+  lastName?: InputMaybe<Scalars['String']['input']>;
+  /** Mobile telephone number of the principal contact. */
+  mobile?: InputMaybe<Scalars['String']['input']>;
+  /** Name or business name of the customer. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Telephone number of the customer. */
+  phone?: InputMaybe<Scalars['String']['input']>;
+  /** Details for shipping to the customer. */
+  shippingDetails?: InputMaybe<CustomerPatchShippingDetailsInput>;
+  /** Toll-free number of the customer. */
+  tollFree?: InputMaybe<Scalars['String']['input']>;
+  /** Website address of the customer. */
+  website?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Output of the `customerPatch` mutation. */
+export type CustomerPatchOutput = {
+  __typename?: 'CustomerPatchOutput';
+  /** Customer that was patched. */
+  customer?: Maybe<Customer>;
+  /** Indicates whether the customer was successfully patched. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Shipping details related to a customer. */
+export type CustomerPatchShippingDetailsInput = {
+  /** Address of the customer. */
+  address?: InputMaybe<AddressInput>;
+  /** Delivery instructions for handling. */
+  instructions?: InputMaybe<Scalars['String']['input']>;
+  /** Name or business name of the customer. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Telephone number of the customer. */
+  phone?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Shipping details related to a customer. */
+export type CustomerShippingDetails = {
+  __typename?: 'CustomerShippingDetails';
+  /** Address of the customer. */
+  address?: Maybe<Address>;
+  /** Delivery instructions for handling. */
+  instructions?: Maybe<Scalars['String']['output']>;
+  /** Name or business name of the customer. */
+  name?: Maybe<Scalars['String']['output']>;
+  /** Telephone number of the customer. */
+  phone?: Maybe<Scalars['String']['output']>;
+};
+
+/** Shipping details related to a customer. */
+export type CustomerShippingDetailsInput = {
+  /** Address of the customer. */
+  address?: InputMaybe<AddressInput>;
+  /** Delivery instructions for handling. */
+  instructions?: InputMaybe<Scalars['String']['input']>;
+  /** Name or business name of the customer. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Telephone number of the customer. */
+  phone?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Options by which customers can be ordered. */
+export enum CustomerSort {
+  /** Ascending by creation time. */
+  CreatedAtAsc = 'CREATED_AT_ASC',
+  /** Descending by creation time. */
+  CreatedAtDesc = 'CREATED_AT_DESC',
+  /** Ascending by modified time. */
+  ModifiedAtAsc = 'MODIFIED_AT_ASC',
+  /** Descending by modified time. */
+  ModifiedAtDesc = 'MODIFIED_AT_DESC',
+  /** Ascending by name. */
+  NameAsc = 'NAME_ASC',
+  /** Descending by name. */
+  NameDesc = 'NAME_DESC'
+}
+
+/** An approximate bill given to a buyer indicating the products or services, quantities, and expected prices (not a request for payment). */
+export type Estimate = BusinessNode & Node & {
+  __typename?: 'Estimate';
+  /** Business that the Estimate belongs to */
+  business: Business;
+  /** Unique identifier for the estimate. */
+  id: Scalars['ID']['output'];
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+};
+
+/** A fixed discount applied to an Invoice. */
+export type FixedInvoiceDiscount = InvoiceDiscount & {
+  __typename?: 'FixedInvoiceDiscount';
+  /** The amount of the discount. */
+  amount?: Maybe<Scalars['Decimal']['output']>;
+  /** When the invoice discount was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** When the invoice discount was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** A description of the discount. */
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+/** General settings on an invoice and estimate. */
+export type GeneralSettings = {
+  __typename?: 'GeneralSettings';
+  /** Color to represent the brand of the business. */
+  accentColor?: Maybe<Scalars['HexColorCode']['output']>;
+  /** Logo of the business. */
+  logoUrl?: Maybe<Scalars['URL']['output']>;
+};
+
+/** Mutation validation error. */
+export type InputError = {
+  __typename?: 'InputError';
+  /** Error code. */
+  code?: Maybe<Scalars['String']['output']>;
+  /** Error message. */
+  message?: Maybe<Scalars['String']['output']>;
+  /** Path to the input value. */
+  path?: Maybe<Array<Scalars['String']['output']>>;
+};
+
+/** Document issued to a buyer for payment indicating the products or services, quantities, and agreed prices. */
+export type Invoice = BusinessNode & Node & {
+  __typename?: 'Invoice';
+  /** Invoice total less amount already paid. */
+  amountDue: Money;
+  /** Total of all payments so far made against this invoice. */
+  amountPaid: Money;
+  /** The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice. */
+  amountTitle: Scalars['String']['output'];
+  /** Business that the invoice belongs to. */
+  business: Business;
+  /** When the invoice was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** Currency of the invoice. */
+  currency: Currency;
+  /** Customer the invoice is for. */
+  customer: Customer;
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by American Express. */
+  disableAmexPayments: Scalars['Boolean']['output'];
+  /** Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment. */
+  disableBankPayments: Scalars['Boolean']['output'];
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card. */
+  disableCreditCardPayments: Scalars['Boolean']['output'];
+  /** Total value of all discounts. */
+  discountTotal: Money;
+  /** Invoice discounts. */
+  discounts?: Maybe<Array<InvoiceDiscount>>;
+  /** Date when payment is due. */
+  dueDate: Scalars['Date']['output'];
+  /** Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions. */
+  exchangeRate: Scalars['Decimal']['output'];
+  /** Invoice footer text. */
+  footer?: Maybe<Scalars['String']['output']>;
+  /** Indicates whether item's amount is hidden in the line items listing. */
+  hideAmount: Scalars['Boolean']['output'];
+  /** Indicates whether item's description in item column is hidden in the line items listing. */
+  hideDescription: Scalars['Boolean']['output'];
+  /** Indicates whether item's product name in item column is hidden in the line items listing. */
+  hideName: Scalars['Boolean']['output'];
+  /** Indicates whether item's price is hidden in the line items listing. */
+  hidePrice: Scalars['Boolean']['output'];
+  /** Indicates whether item's unit is hidden in the line items listing. */
+  hideUnit: Scalars['Boolean']['output'];
+  /** Unique identifier for the invoice. */
+  id: Scalars['ID']['output'];
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+  /** Date when invoice is issued. */
+  invoiceDate: Scalars['Date']['output'];
+  /** Unique number assigned to the invoice. */
+  invoiceNumber: Scalars['String']['output'];
+  /** The label for the 'Item' column in the line items listing. */
+  itemTitle: Scalars['String']['output'];
+  /** The line items (product, unit and price) that make up the invoiced sale. */
+  items?: Maybe<Array<InvoiceItem>>;
+  /** When the invoice was last sent. */
+  lastSentAt?: Maybe<Scalars['DateTime']['output']>;
+  /** How the invoice was last sent. */
+  lastSentVia?: Maybe<InvoiceSendMethod>;
+  /** When the invoice was last viewed by the customer. */
+  lastViewedAt?: Maybe<Scalars['DateTime']['output']>;
+  /** Invoice memo (notes) text. */
+  memo?: Maybe<Scalars['String']['output']>;
+  /** When the invoice was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** URL to access PDF representation of the invoice. */
+  pdfUrl: Scalars['String']['output'];
+  /** Purchase order or sales order number for the invoice. */
+  poNumber?: Maybe<Scalars['String']['output']>;
+  /** The label for the 'Price' column in the listing of line items on the invoice. */
+  priceTitle: Scalars['String']['output'];
+  /** Indicates whether the customer is required to accept the terms of service. */
+  requireTermsOfServiceAgreement: Scalars['Boolean']['output'];
+  /** Entity that was the precursor to the invoice. */
+  source?: Maybe<InvoiceSource>;
+  /** Status of the Invoice. */
+  status: InvoiceStatus;
+  /** Invoice subheading text. */
+  subhead?: Maybe<Scalars['String']['output']>;
+  /** Pretax total. */
+  subtotal: Money;
+  /** Total of all sales taxes on all line items within the invoice. */
+  taxTotal: Money;
+  /** Invoice title at the top of the document. */
+  title: Scalars['String']['output'];
+  /** Total value of the invoice including sales taxes. */
+  total: Money;
+  /** The label for the 'Unit' column in the listing of line items on the invoice. */
+  unitTitle: Scalars['String']['output'];
+  /** URL to view the invoice online as seen by a customer. */
+  viewUrl: Scalars['String']['output'];
+};
+
+/** Input to the `invoiceApprove` mutation. */
+export type InvoiceApproveInput = {
+  /** The unique identifier for the invoice. */
+  invoiceId: Scalars['ID']['input'];
+};
+
+/** Output of the `invoiceApprove` mutation. */
+export type InvoiceApproveOutput = {
+  __typename?: 'InvoiceApproveOutput';
+  /** Indicates whether the invoice was successfully approved. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was approved. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Input to the `invoiceClone` mutation. */
+export type InvoiceCloneInput = {
+  /** The unique identifier for the invoice. */
+  invoiceId: Scalars['ID']['input'];
+};
+
+/** Output of the `invoiceClone` mutation. */
+export type InvoiceCloneOutput = {
+  __typename?: 'InvoiceCloneOutput';
+  /** Indicates whether the invoice was successfully cloned. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was cloned. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Invoice connection. */
+export type InvoiceConnection = {
+  __typename?: 'InvoiceConnection';
+  /** List of invoices. */
+  edges: Array<InvoiceEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Input to the `invoiceCreate` mutation. */
+export type InvoiceCreateInput = {
+  /** The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice. If not provided, will use the business's default invoice column amount title. */
+  amountTitle?: InputMaybe<Scalars['String']['input']>;
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Currency of the invoice. If not provided, will use the business's default currency. */
+  currency?: InputMaybe<CurrencyCode>;
+  /** The customer identifier to associate with invoice. */
+  customerId: Scalars['ID']['input'];
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by american express payment. If not provided, will use the business's default invoice settings american express payment state. */
+  disableAmexPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment. If not provided, will use the business's default invoice bank payment state. */
+  disableBankPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card. If not provided, will use the business's default invoice credit card payment state. */
+  disableCreditCardPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** The discounts applied to the invoice (currently limited to max 1). */
+  discounts?: InputMaybe<Array<InvoiceDiscountInput>>;
+  /** Date when payment is due. If not provided, will apply the business's default invoice payment terms to `invoiceDate` value. */
+  dueDate?: InputMaybe<Scalars['Date']['input']>;
+  /** Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions. */
+  exchangeRate?: InputMaybe<Scalars['Decimal']['input']>;
+  /** Invoice footer text. If not provided, will use the business's default invoice footer. */
+  footer?: InputMaybe<Scalars['String']['input']>;
+  /** Indicates whether item's amount is hidden in the line items listing. If not provided, will use the business's default invoice item amount visibility. */
+  hideAmount?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's description in item column is hidden in the line items listing. If not provided, will use the business's default invoice item description visibility. */
+  hideDescription?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's product name in item column is hidden in the line items listing. If not provided, will use the business's default invoice item name visibility. */
+  hideName?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's price is hidden in the line items listing. If not provided, will use the business's default invoice item price visibility. */
+  hidePrice?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's unit is hidden in the line items listing. If not provided, will use the business's default invoice item unit visibility. */
+  hideUnit?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Date when invoice is issued. If not provided, will use today's date. */
+  invoiceDate?: InputMaybe<Scalars['Date']['input']>;
+  /** Unique number assigned to the invoice. If not provided, will find the current largest invoice number and add 1. */
+  invoiceNumber?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Item' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column item title. */
+  itemTitle?: InputMaybe<Scalars['String']['input']>;
+  /** The line items (product, unit and price) that make up the invoiced sale. */
+  items?: InputMaybe<Array<InvoiceCreateItemInput>>;
+  /** Invoice memo (notes) text. If not provided, will use the business's default invoice memo. */
+  memo?: InputMaybe<Scalars['String']['input']>;
+  /** Purchase order or sales order number for the invoice. */
+  poNumber?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Price' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column price title. */
+  priceTitle?: InputMaybe<Scalars['String']['input']>;
+  /** Indicates whether the customer is required to accept the terms of service. */
+  requireTermsOfServiceAgreement?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Status of the Invoice. */
+  status?: InputMaybe<InvoiceCreateStatus>;
+  /** Invoice subheading text. If not provided, will use the business's default invoice subheading. */
+  subhead?: InputMaybe<Scalars['String']['input']>;
+  /** Invoice title at the top of the document. If not provided, will use the business's default invoice title. */
+  title?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Unit' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column unit title. */
+  unitTitle?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Invoice line item. */
+export type InvoiceCreateItemInput = {
+  /** Override product's description. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** Associated product. */
+  productId: Scalars['ID']['input'];
+  /** Number of units (rounded to nearest 8 decimal places with ties going away from zero). */
+  quantity?: InputMaybe<Scalars['Decimal']['input']>;
+  /** Taxes. To have the product's default sales taxes applied, provide `undefined` as the value. */
+  taxes?: InputMaybe<Array<InvoiceCreateItemTaxInput>>;
+  /** Override product's unitPrice. Price per unit in the major currency unit (rounded to nearest 8 decimal places with ties going away from zero). */
+  unitPrice?: InputMaybe<Scalars['Decimal']['input']>;
+};
+
+/** Invoice line item's sales tax. */
+export type InvoiceCreateItemTaxInput = {
+  /** *DEPRECATED - DO NOT USE* Sales Tax Amount is calculated by Wave using your Sales Tax settings. */
+  amount?: InputMaybe<Scalars['Decimal']['input']>;
+  /** Sales tax. */
+  salesTaxId: Scalars['ID']['input'];
+};
+
+/** Output of the `invoiceCreate` mutation. */
+export type InvoiceCreateOutput = {
+  __typename?: 'InvoiceCreateOutput';
+  /** Indicates whether the invoice was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was created. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Status of an invoice. */
+export enum InvoiceCreateStatus {
+  /** The invoice is still a draft. */
+  Draft = 'DRAFT',
+  /** The invoice was saved. */
+  Saved = 'SAVED'
+}
+
+/** Input to the `invoiceDelete` mutation. */
+export type InvoiceDeleteInput = {
+  /** The unique identifier for the invoice. */
+  invoiceId: Scalars['ID']['input'];
+};
+
+/** Output of the `invoiceDelete` mutation. */
+export type InvoiceDeleteOutput = {
+  __typename?: 'InvoiceDeleteOutput';
+  /** Indicates whether the invoice was successfully deleted. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Common base properties of InvoiceDiscounts. */
+export type InvoiceDiscount = {
+  /** When the invoice discount was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** When the invoice discount was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** A description of the discount. */
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+/** Invoice Discount. */
+export type InvoiceDiscountInput = {
+  /** Discount amount (for FIXED-type discounts). */
+  amount?: InputMaybe<Scalars['Decimal']['input']>;
+  /** Discount type. */
+  discountType: InvoiceDiscountType;
+  /** Discount name. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Discount percentage (for PERCENTAGE-type discounts). */
+  percentage?: InputMaybe<Scalars['Decimal']['input']>;
+};
+
+/** Type of invoice discount. */
+export enum InvoiceDiscountType {
+  /** Fixed dollar amount discount. */
+  Fixed = 'FIXED',
+  /** Type of invoice discount. */
+  Percentage = 'PERCENTAGE'
+}
+
+/** Invoice edge. */
+export type InvoiceEdge = {
+  __typename?: 'InvoiceEdge';
+  /** An invoice. */
+  node: Invoice;
+};
+
+/** Business invoice and estimates settings information. */
+export type InvoiceEstimateSettings = {
+  __typename?: 'InvoiceEstimateSettings';
+  /** Settings applied to both invoices and estimates. */
+  generalSettings: GeneralSettings;
+};
+
+/** Invoice line item. */
+export type InvoiceItem = {
+  __typename?: 'InvoiceItem';
+  /** Income account. */
+  account: Account;
+  /** Detailed description. */
+  description?: Maybe<Scalars['String']['output']>;
+  /**
+   * Price per unit.
+   * @deprecated Use unitPrice to avoid ambiguity in how the value relates to quantity and the subtotal.
+   */
+  price: Scalars['Decimal']['output'];
+  /** Associated product. */
+  product: Product;
+  /** Number of units. */
+  quantity: Scalars['Decimal']['output'];
+  /** Pretax total. */
+  subtotal: Money;
+  /** Taxes. */
+  taxes: Array<InvoiceItemTax>;
+  /** Total including sales taxes. */
+  total: Money;
+  /** Price per unit in the major currency unit. */
+  unitPrice: Scalars['Decimal']['output'];
+};
+
+/** Invoice line item's sales tax. */
+export type InvoiceItemTax = {
+  __typename?: 'InvoiceItemTax';
+  /** Sales tax amount. */
+  amount?: Maybe<Money>;
+  /**
+   * Sales tax rate.
+   * @deprecated Use `salesTax.rate`. `rate` will be removed on Oct 20th 2022.
+   */
+  rate?: Maybe<Scalars['Decimal']['output']>;
+  /** Sales tax. */
+  salesTax: SalesTax;
+};
+
+/** Input to the `invoiceMarkSent` mutation. */
+export type InvoiceMarkSentInput = {
+  /** The unique identifier for the invoice. */
+  invoiceId: Scalars['ID']['input'];
+  /** How the invoice was sent. */
+  sendMethod: InvoiceSendMethod;
+  /** When the invoice was sent. */
+  sentAt?: InputMaybe<Scalars['DateTime']['input']>;
+};
+
+/** Output of the `invoiceMarkSent` mutation. */
+export type InvoiceMarkSentOutput = {
+  __typename?: 'InvoiceMarkSentOutput';
+  /** Indicates whether the invoice was successfully marked as sent. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was marked as sent. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Input to the `invoicePatch` mutation. For each value if it's not provided - do not update it. */
+export type InvoicePatchInput = {
+  /** The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice. */
+  amountTitle?: InputMaybe<Scalars['String']['input']>;
+  /** Currency of the invoice. */
+  currency?: InputMaybe<CurrencyCode>;
+  /** The customer identifier to associate with invoice. */
+  customerId?: InputMaybe<Scalars['ID']['input']>;
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by american express payment. */
+  disableAmexPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment. */
+  disableBankPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card. */
+  disableCreditCardPayments?: InputMaybe<Scalars['Boolean']['input']>;
+  /** The discounts applied to the invoice (currently limited to max 1). */
+  discounts?: InputMaybe<Array<InvoiceDiscountInput>>;
+  /** Date when payment is due. */
+  dueDate?: InputMaybe<Scalars['Date']['input']>;
+  /** Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions. */
+  exchangeRate?: InputMaybe<Scalars['Decimal']['input']>;
+  /** Invoice footer text. */
+  footer?: InputMaybe<Scalars['String']['input']>;
+  /** Indicates whether item's amount is hidden in the line items listing. */
+  hideAmount?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's description in item column is hidden in the line items listing. */
+  hideDescription?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's product name in item column is hidden in the line items listing. */
+  hideName?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's price is hidden in the line items listing. */
+  hidePrice?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Indicates whether item's unit is hidden in the line items listing. */
+  hideUnit?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Unique identifier for the invoice. */
+  id: Scalars['ID']['input'];
+  /** Date when invoice is issued. */
+  invoiceDate?: InputMaybe<Scalars['Date']['input']>;
+  /** Unique number assigned to the invoice. */
+  invoiceNumber?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Item' column in the listing of line items on the invoice. */
+  itemTitle?: InputMaybe<Scalars['String']['input']>;
+  /** The line items (product, unit and price) that make up the invoiced sale. If provided, it would replace all items with given ones. */
+  items?: InputMaybe<Array<InvoiceCreateItemInput>>;
+  /** Invoice memo (notes) text. */
+  memo?: InputMaybe<Scalars['String']['input']>;
+  /** Purchase order or sales order number for the invoice. */
+  poNumber?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Price' column in the listing of line items on the invoice. */
+  priceTitle?: InputMaybe<Scalars['String']['input']>;
+  /** Indicates whether the customer is required to accept the terms of service. */
+  requireTermsOfServiceAgreement?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Status of the Invoice. */
+  status?: InputMaybe<InvoiceCreateStatus>;
+  /** Invoice subheading text. */
+  subhead?: InputMaybe<Scalars['String']['input']>;
+  /** Invoice title at the top of the document. */
+  title?: InputMaybe<Scalars['String']['input']>;
+  /** The label for the 'Unit' column in the listing of line items on the invoice. */
+  unitTitle?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Output of the `invoicePatch` mutation. */
+export type InvoicePatchOutput = {
+  __typename?: 'InvoicePatchOutput';
+  /** Indicates whether the invoice was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was created. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Input to the `invoiceSend` mutation. */
+export type InvoiceSendInput = {
+  /** Include a PDF of the invoice as an attachment. */
+  attachPDF?: Scalars['Boolean']['input'];
+  /** Carbon copy email. */
+  ccMyself?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Email address from */
+  fromAddress?: InputMaybe<Scalars['String']['input']>;
+  /** The unique identifier for the invoice. */
+  invoiceId: Scalars['ID']['input'];
+  /** Message body of the email. */
+  message?: InputMaybe<Scalars['String']['input']>;
+  /** Subject line of the email. */
+  subject?: InputMaybe<Scalars['String']['input']>;
+  /** Email addresses to receive an email. */
+  to: Array<Scalars['String']['input']>;
+};
+
+/** Invoice send method. */
+export enum InvoiceSendMethod {
+  /** Export PDF. */
+  ExportPdf = 'EXPORT_PDF',
+  /** Gmail */
+  Gmail = 'GMAIL',
+  /** Marked as sent. */
+  MarkedSent = 'MARKED_SENT',
+  /** Not sent. */
+  NotSent = 'NOT_SENT',
+  /** Outlook. */
+  Outlook = 'OUTLOOK',
+  /** Shared link. */
+  SharedLink = 'SHARED_LINK',
+  /** Skipped. */
+  Skipped = 'SKIPPED',
+  /** Wave. */
+  Wave = 'WAVE',
+  /** Yahoo. */
+  Yahoo = 'YAHOO'
+}
+
+/** Output of the `invoiceSend` mutation. */
+export type InvoiceSendOutput = {
+  __typename?: 'InvoiceSendOutput';
+  /** Indicates whether the invoice was successfully queued for sending. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Invoice that was sent. */
+  invoice?: Maybe<Invoice>;
+};
+
+/** Options by which invoices can be ordered. */
+export enum InvoiceSort {
+  /** Ascending by amount due. */
+  AmountDueAsc = 'AMOUNT_DUE_ASC',
+  /** Descending by amount due. */
+  AmountDueDesc = 'AMOUNT_DUE_DESC',
+  /** Ascending by amount paid. */
+  AmountPaidAsc = 'AMOUNT_PAID_ASC',
+  /** Descending by amount paid. */
+  AmountPaidDesc = 'AMOUNT_PAID_DESC',
+  /** Ascending by creation time. */
+  CreatedAtAsc = 'CREATED_AT_ASC',
+  /** Descending by creation time. */
+  CreatedAtDesc = 'CREATED_AT_DESC',
+  /** Ascending by customer's name. */
+  CustomerNameAsc = 'CUSTOMER_NAME_ASC',
+  /** Descending by customer's name. */
+  CustomerNameDesc = 'CUSTOMER_NAME_DESC',
+  /** Ascending by due date. */
+  DueAtAsc = 'DUE_AT_ASC',
+  /** Descending by due date. */
+  DueAtDesc = 'DUE_AT_DESC',
+  /** Ascending by invoice date. */
+  InvoiceDateAsc = 'INVOICE_DATE_ASC',
+  /** Descending by invoice date. */
+  InvoiceDateDesc = 'INVOICE_DATE_DESC',
+  /** Ascending by invoice number. */
+  InvoiceNumberAsc = 'INVOICE_NUMBER_ASC',
+  /** Descending by invoice number. */
+  InvoiceNumberDesc = 'INVOICE_NUMBER_DESC',
+  /** Ascending by modified date. */
+  ModifiedAtAsc = 'MODIFIED_AT_ASC',
+  /** Descending by modified date. */
+  ModifiedAtDesc = 'MODIFIED_AT_DESC',
+  /** Ascending by status. */
+  StatusAsc = 'STATUS_ASC',
+  /** Descending by status. */
+  StatusDesc = 'STATUS_DESC',
+  /** Ascending by total amount. */
+  TotalAsc = 'TOTAL_ASC',
+  /** Descending by total amount. */
+  TotalDesc = 'TOTAL_DESC'
+}
+
+/** Specifies either the invoice is made from estimate, is recurring, or created manually. */
+export type InvoiceSource = Estimate | NewEstimate | RecurringInvoice;
+
+/** Status of an invoice. */
+export enum InvoiceStatus {
+  /** The invoice is still a draft. */
+  Draft = 'DRAFT',
+  /** The invoice is overdue. */
+  Overdue = 'OVERDUE',
+  /** The invoice was overpaid. */
+  Overpaid = 'OVERPAID',
+  /** The invoice was paid. */
+  Paid = 'PAID',
+  /** The invoice was partially paid. */
+  Partial = 'PARTIAL',
+  /** The invoice was saved. */
+  Saved = 'SAVED',
+  /** The invoice was sent. */
+  Sent = 'SENT',
+  /** The invoice is unpaid. */
+  Unpaid = 'UNPAID',
+  /** The invoice was viewed. */
+  Viewed = 'VIEWED'
+}
+
+/** A medium of exchange in common use. */
+export type Money = {
+  __typename?: 'Money';
+  /** Currency */
+  currency: Currency;
+  /** Value represented in only the minor currency unit. */
+  minorUnitValue: Scalars['Decimal']['output'];
+  /**
+   * Value represented in only the minor currency unit.
+   * @deprecated Use `minorUnitValue` instead, as `raw` can overflow for large numbers.
+   */
+  raw: Scalars['Int']['output'];
+  /** Amount represented as a combination of the major and minor currency unit (uses a decimal separator). */
+  value: Scalars['String']['output'];
+};
+
+/** Input representing a deposit. */
+export type MoneyDepositTransactionCreateDepositInput = {
+  /** Id of the account. */
+  accountId: Scalars['ID']['input'];
+  /** Date of the transaction. */
+  amount: Scalars['Float']['input'];
+};
+
+/** Fee input. */
+export type MoneyDepositTransactionCreateFeeInput = {
+  /** ID of the account associated with the fee. */
+  accountId: Scalars['ID']['input'];
+  /** Amount. */
+  amount: Scalars['Float']['input'];
+};
+
+/** Input of the moneyDepositTransactionCreate Mutation */
+export type MoneyDepositTransactionCreateInput = {
+  /** Id of the business. */
+  businessId: Scalars['ID']['input'];
+  /** Transaction timestamp. */
+  createdAt?: InputMaybe<Scalars['DateTime']['input']>;
+  /** Date of the transaction. */
+  date: Scalars['Date']['input'];
+  /** Deposit account and amount. */
+  deposit: MoneyDepositTransactionCreateDepositInput;
+  /** Description for the transaction. */
+  description: Scalars['String']['input'];
+  /** ID of the transaction in an external system. */
+  externalId?: InputMaybe<Scalars['String']['input']>;
+  /** Fees. */
+  fees?: InputMaybe<Array<MoneyDepositTransactionCreateFeeInput>>;
+  /** Line items. */
+  lineItems: Array<MoneyDepositTransactionCreateLineItemInput>;
+  /** Extra notes about the transaction. */
+  notes?: InputMaybe<Scalars['String']['input']>;
+  /** Origin of the transaction. */
+  origin: TransactionOrigin;
+};
+
+/** Line item input. */
+export type MoneyDepositTransactionCreateLineItemInput = {
+  /** ID of the account associated with the line item. */
+  accountId: Scalars['ID']['input'];
+  /** Amount. */
+  amount: Scalars['Float']['input'];
+  /** ID of the customer associated with the line item. */
+  customerId?: InputMaybe<Scalars['ID']['input']>;
+  /** Taxes applied to the line item. */
+  taxes: Array<TransactionCreateSalesTaxInput>;
+};
+
+/** Output of the moneyDepositTransactionCreate Mutation */
+export type MoneyDepositTransactionCreateOutput = {
+  __typename?: 'MoneyDepositTransactionCreateOutput';
+  /** Whether or not the transaction was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+};
+
+/** Anchor input. */
+export type MoneyTransactionCreateAnchorInput = {
+  /** ID of the anchor account. */
+  accountId: Scalars['ID']['input'];
+  /** Amount of the transaction (unsigned). */
+  amount: Scalars['Decimal']['input'];
+  /** Direction of a transaction */
+  direction: TransactionDirection;
+};
+
+/** Input of the `moneyTransactionCreate` Mutation */
+export type MoneyTransactionCreateInput = {
+  /** Anchor item. */
+  anchor: MoneyTransactionCreateAnchorInput;
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Date of the transaction. */
+  date: Scalars['Date']['input'];
+  /** Description for the transaction. */
+  description: Scalars['String']['input'];
+  /** ID of the transaction in an external system. If you don't have one, generate a UUID and provide it. */
+  externalId: Scalars['String']['input'];
+  /** Line items. */
+  lineItems: Array<MoneyTransactionCreateLineItemInput>;
+  /** Extra notes about the transaction. */
+  notes?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Line item input. */
+export type MoneyTransactionCreateLineItemInput = {
+  /** ID of the account associated with the line item. */
+  accountId: Scalars['ID']['input'];
+  /** Amount of the line item (unsigned). */
+  amount: Scalars['Decimal']['input'];
+  /** How the account should change in relation to the amount. */
+  balance?: BalanceType;
+  /** ID of the customer associated with the line item. */
+  customerId?: InputMaybe<Scalars['ID']['input']>;
+  /** Optional description for line item. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** Taxes applied to the line item. */
+  taxes?: InputMaybe<Array<MoneyTransactionCreateSalesTaxInput>>;
+};
+
+/** Output of the `moneyTransactionCreate` Mutation */
+export type MoneyTransactionCreateOutput = {
+  __typename?: 'MoneyTransactionCreateOutput';
+  /** Whether or not the transaction was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Created transaction. */
+  transaction?: Maybe<Transaction>;
+};
+
+/** Sales tax input. */
+export type MoneyTransactionCreateSalesTaxInput = {
+  /** Override the amount of the tax (unsigned). */
+  amount: Scalars['Decimal']['input'];
+  /** ID of the sales tax. */
+  salesTaxId: Scalars['ID']['input'];
+};
+
+/** Input for creating a money transaction. */
+export type MoneyTransactionDetails = {
+  /** Anchor item. */
+  anchor: MoneyTransactionCreateAnchorInput;
+  /** Date of the transaction. */
+  date: Scalars['Date']['input'];
+  /** Description for the transaction. */
+  description: Scalars['String']['input'];
+  /** ID of the transaction in an external system. If you don't have one, generate a UUID and provide it. */
+  externalId: Scalars['String']['input'];
+  /** Line items. */
+  lineItems: Array<MoneyTransactionCreateLineItemInput>;
+  /** Extra notes about the transaction. */
+  notes?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Input of the `moneyTransactionsCreate` Mutation */
+export type MoneyTransactionsCreateInput = {
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Array of transactions to create. */
+  transactions: Array<MoneyTransactionDetails>;
+};
+
+/** Output of the `moneyTransactionsCreate` Mutation */
+export type MoneyTransactionsCreateOutput = {
+  __typename?: 'MoneyTransactionsCreateOutput';
+  /** Whether or not all transactions were successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Created transactions. */
+  transactions?: Maybe<Array<Maybe<Transaction>>>;
+};
+
+/** The schema’s entry point for mutations. */
+export type Mutation = {
+  __typename?: 'Mutation';
+  /** No-op placeholder for code generation. */
+  _?: Maybe<Scalars['Boolean']['output']>;
+  /** Archive an account. */
+  accountArchive?: Maybe<AccountArchiveOutput>;
+  /** Create an account. */
+  accountCreate?: Maybe<AccountCreateOutput>;
+  /** Patch an account. */
+  accountPatch?: Maybe<AccountPatchOutput>;
+  /** Create a customer. */
+  customerCreate?: Maybe<CustomerCreateOutput>;
+  /** Delete customer. */
+  customerDelete?: Maybe<CustomerDeleteOutput>;
+  /** Patch a customer. */
+  customerPatch?: Maybe<CustomerPatchOutput>;
+  /** Approve an invoice. */
+  invoiceApprove?: Maybe<InvoiceApproveOutput>;
+  /** Clones an invoice. */
+  invoiceClone?: Maybe<InvoiceCloneOutput>;
+  /** Create an invoice. */
+  invoiceCreate?: Maybe<InvoiceCreateOutput>;
+  /** Delete an invoice. */
+  invoiceDelete?: Maybe<InvoiceDeleteOutput>;
+  /** Mark the invoice as sent. */
+  invoiceMarkSent?: Maybe<InvoiceMarkSentOutput>;
+  /** Patch an invoice. */
+  invoicePatch?: Maybe<InvoicePatchOutput>;
+  /** Send an invoice. Requires `Business.emailSendEnabled` to be true. */
+  invoiceSend?: Maybe<InvoiceSendOutput>;
+  /**
+   * Create a money transaction.
+   * @deprecated Not available for public use at this time.
+   */
+  moneyDepositTransactionCreate?: Maybe<MoneyDepositTransactionCreateOutput>;
+  /** **BETA**: Create money transaction. Requires `isClassicAccounting` to be `false`. */
+  moneyTransactionCreate?: Maybe<MoneyTransactionCreateOutput>;
+  /** **BETA**: Bulk create money transactions. Requires `isClassicAccounting` to be `false`. */
+  moneyTransactionsCreate?: Maybe<MoneyTransactionsCreateOutput>;
+  /** Archive a product. */
+  productArchive?: Maybe<ProductArchiveOutput>;
+  /** Create a product. */
+  productCreate?: Maybe<ProductCreateOutput>;
+  /** Patch a product. */
+  productPatch?: Maybe<ProductPatchOutput>;
+  /** Archive a sales tax. */
+  salesTaxArchive: SalesTaxArchiveOutput;
+  /** Create a sales tax. */
+  salesTaxCreate: SalesTaxCreateOutput;
+  /** Update a sales tax. */
+  salesTaxPatch: SalesTaxPatchOutput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationAccountArchiveArgs = {
+  input: AccountArchiveInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationAccountCreateArgs = {
+  input: AccountCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationAccountPatchArgs = {
+  input: AccountPatchInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationCustomerCreateArgs = {
+  input: CustomerCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationCustomerDeleteArgs = {
+  input: CustomerDeleteInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationCustomerPatchArgs = {
+  input: CustomerPatchInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceApproveArgs = {
+  input: InvoiceApproveInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceCloneArgs = {
+  input: InvoiceCloneInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceCreateArgs = {
+  input: InvoiceCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceDeleteArgs = {
+  input: InvoiceDeleteInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceMarkSentArgs = {
+  input: InvoiceMarkSentInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoicePatchArgs = {
+  input: InvoicePatchInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationInvoiceSendArgs = {
+  input: InvoiceSendInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationMoneyDepositTransactionCreateArgs = {
+  input: MoneyDepositTransactionCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationMoneyTransactionCreateArgs = {
+  input: MoneyTransactionCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationMoneyTransactionsCreateArgs = {
+  input: MoneyTransactionsCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationProductArchiveArgs = {
+  input: ProductArchiveInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationProductCreateArgs = {
+  input: ProductCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationProductPatchArgs = {
+  input: ProductPatchInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationSalesTaxArchiveArgs = {
+  input: SalesTaxArchiveInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationSalesTaxCreateArgs = {
+  input: SalesTaxCreateInput;
+};
+
+
+/** The schema’s entry point for mutations. */
+export type MutationSalesTaxPatchArgs = {
+  input: SalesTaxPatchInput;
+};
+
+/** An estimate created in our new platform. */
+export type NewEstimate = BusinessNode & Node & {
+  __typename?: 'NewEstimate';
+  /** Business that the Estimate belongs to */
+  business: Business;
+  /** Unique identifier for the estimate. */
+  id: Scalars['ID']['output'];
+};
+
+/** An object with an `ID`. */
+export type Node = {
+  /** ID of the object. */
+  id: Scalars['ID']['output'];
+};
+
+/** An OAuth application. */
+export type OAuthApplication = Node & {
+  __typename?: 'OAuthApplication';
+  /** The client identifier issued to the client during the registration process. */
+  clientId: Scalars['String']['output'];
+  /** When the application was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** A description of the application. */
+  description?: Maybe<Scalars['String']['output']>;
+  /**
+   * Additional data for the application.
+   * - If the requested `clientId` does not match that of the current OAuth application, `extraData` will not be returned.
+   */
+  extraData?: Maybe<Scalars['JSON']['output']>;
+  /** The unique identifier for the application. */
+  id: Scalars['ID']['output'];
+  /** The URL to the application logo. */
+  logoUrl?: Maybe<Scalars['URL']['output']>;
+  /** When the application was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** The name of the application. */
+  name: Scalars['String']['output'];
+};
+
+/** Information about pagination in a connection. */
+export type OffsetPageInfo = {
+  __typename?: 'OffsetPageInfo';
+  /** Current page number. */
+  currentPage: Scalars['Int']['output'];
+  /** Total number of nodes in the connection. */
+  totalCount?: Maybe<Scalars['Int']['output']>;
+  /** Total number of pages in the connection. */
+  totalPages?: Maybe<Scalars['Int']['output']>;
+};
+
+/** Forms of business ownership. */
+export enum OrganizationalType {
+  /** Corporation */
+  Corporation = 'CORPORATION',
+  /** Partnership */
+  Partnership = 'PARTNERSHIP',
+  /** Sole Proprietorship */
+  SoleProprietorship = 'SOLE_PROPRIETORSHIP'
+}
+
+/** A percentage discount applied to an Invoice. */
+export type PercentageInvoiceDiscount = InvoiceDiscount & {
+  __typename?: 'PercentageInvoiceDiscount';
+  /** When the invoice discount was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** When the invoice discount was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** A description of the discount. */
+  name?: Maybe<Scalars['String']['output']>;
+  /** The percentage of the discount. */
+  percentage?: Maybe<Scalars['Decimal']['output']>;
+};
+
+/** Product (or service) that a business sells to a customer or purchases from a vendor. */
+export type Product = BusinessNode & Node & {
+  __typename?: 'Product';
+  /** Business that the product belongs to. */
+  business: Business;
+  /** When the product was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** Default sales taxes to apply on product. */
+  defaultSalesTaxes: Array<SalesTax>;
+  /** Description of the product. */
+  description?: Maybe<Scalars['String']['output']>;
+  /** The expense account to associate with this product, set when isBought. */
+  expenseAccount?: Maybe<Account>;
+  /** Unique identifier for the product. */
+  id: Scalars['ID']['output'];
+  /** The income account to associate with this product, set when isSold. */
+  incomeAccount?: Maybe<Account>;
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+  /** Is the product hidden from view by default. */
+  isArchived: Scalars['Boolean']['output'];
+  /** Is product bought by the business. Allow this product or service to be added to Bills. */
+  isBought: Scalars['Boolean']['output'];
+  /** Is product sold by the business. Allow this product or service to be added to Invoices. */
+  isSold: Scalars['Boolean']['output'];
+  /** When the product was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** Name of the product. */
+  name: Scalars['String']['output'];
+  /** Price per unit in the major currency unit. */
+  unitPrice: Scalars['Decimal']['output'];
+};
+
+/** Input to the `productArchive` mutation. */
+export type ProductArchiveInput = {
+  /** The unique identifier for the product. */
+  id: Scalars['ID']['input'];
+};
+
+/** Output of the `productArchive` mutation. */
+export type ProductArchiveOutput = {
+  __typename?: 'ProductArchiveOutput';
+  /** Indicates whether the product was successfully deleted. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Product that was archived. */
+  product?: Maybe<Product>;
+};
+
+/** Product connection. */
+export type ProductConnection = {
+  __typename?: 'ProductConnection';
+  /** List of products. */
+  edges: Array<ProductEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Input to the `productCreate` mutation. */
+export type ProductCreateInput = {
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** Default sales taxes to apply on product. */
+  defaultSalesTaxIds?: InputMaybe<Array<Scalars['ID']['input']>>;
+  /** Product description. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** Expense account to associate with this product. Account must be one of subtypes: `EXPENSE`, `COST_OF_GOODS_SOLD`, `PAYMENT_PROCESSING_FEES`, `PAYROLL_EXPENSES`. */
+  expenseAccountId?: InputMaybe<Scalars['ID']['input']>;
+  /** Income account to associate with this product. Account must be one of subtypes: `INCOME`, `DISCOUNTS`, `OTHER_INCOME`. */
+  incomeAccountId?: InputMaybe<Scalars['ID']['input']>;
+  /** Name of the product. */
+  name: Scalars['String']['input'];
+  /** Price per unit in the major currency unit (rounded to nearest 5 decimal places with ties going away from zero). */
+  unitPrice: Scalars['Decimal']['input'];
+};
+
+/** Output of the `productCreate` mutation. */
+export type ProductCreateOutput = {
+  __typename?: 'ProductCreateOutput';
+  /** Indicates whether the product was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Product that was created. */
+  product?: Maybe<Product>;
+};
+
+/** Product edge. */
+export type ProductEdge = {
+  __typename?: 'ProductEdge';
+  /** A product. */
+  node: Product;
+};
+
+/** Input to the `productPatch` mutation. */
+export type ProductPatchInput = {
+  /** Default sales taxes to apply on product. */
+  defaultSalesTaxIds?: InputMaybe<Array<Scalars['ID']['input']>>;
+  /** Description of the product. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** Expense account to associate with this product. Account must be one of subtypes: `EXPENSE`, `COST_OF_GOODS_SOLD`, `PAYMENT_PROCESSING_FEES`, `PAYROLL_EXPENSES`. */
+  expenseAccountId?: InputMaybe<Scalars['ID']['input']>;
+  /** The unique identifier for the product. */
+  id: Scalars['ID']['input'];
+  /** Income account to associate with this product. Account must be one of subtypes: `INCOME`, `DISCOUNTS`, `OTHER_INCOME`. */
+  incomeAccountId?: InputMaybe<Scalars['ID']['input']>;
+  /** Name of the product. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Price per unit in the major currency unit (rounded to nearest 5 decimal places with ties going away from zero). */
+  unitPrice?: InputMaybe<Scalars['Decimal']['input']>;
+};
+
+/** Output of the `productPatch` mutation. */
+export type ProductPatchOutput = {
+  __typename?: 'ProductPatchOutput';
+  /** Indicates whether the product was successfully patched. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Product that was updated. */
+  product?: Maybe<Product>;
+};
+
+/** Options by which products can be ordered. */
+export enum ProductSort {
+  /** Ascending by creation time. */
+  CreatedAtAsc = 'CREATED_AT_ASC',
+  /** Descending by creation time. */
+  CreatedAtDesc = 'CREATED_AT_DESC',
+  /** Ascending by modified time. */
+  ModifiedAtAsc = 'MODIFIED_AT_ASC',
+  /** Descending by modified time. */
+  ModifiedAtDesc = 'MODIFIED_AT_DESC',
+  /** Ascending by name. */
+  NameAsc = 'NAME_ASC',
+  /** Descending by name. */
+  NameDesc = 'NAME_DESC'
+}
+
+/** A state/county/province/region. */
+export type Province = {
+  __typename?: 'Province';
+  /** [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) identifier. */
+  code: Scalars['String']['output'];
+  /** Plain-lanuage representaton. */
+  name: Scalars['String']['output'];
+  /**
+   * Informal name for identification.
+   * @deprecated Nonstandard values. Use code instead.
+   */
+  slug?: Maybe<Scalars['String']['output']>;
+};
+
+/** The schema’s entry point for queries. */
+export type Query = {
+  __typename?: 'Query';
+  /** No-op placeholder for code generation. */
+  _?: Maybe<Scalars['Boolean']['output']>;
+  /** List subtypes of accounts. */
+  accountSubtypes: Array<AccountSubtype>;
+  /** List types of accounts. */
+  accountTypes: Array<AccountType>;
+  /** Get a business. */
+  business?: Maybe<Business>;
+  /** List businesses. */
+  businesses?: Maybe<BusinessConnection>;
+  /** List countries. */
+  countries: Array<Country>;
+  /** Get a country. */
+  country?: Maybe<Country>;
+  /** List currencies. */
+  currencies: Array<Currency>;
+  /** Get a currency. */
+  currency?: Maybe<Currency>;
+  /** Get the current OAuth application. */
+  oAuthApplication?: Maybe<OAuthApplication>;
+  /** Get a province. */
+  province?: Maybe<Province>;
+  /** The currently authenticated user. */
+  user?: Maybe<User>;
+};
+
+
+/** The schema’s entry point for queries. */
+export type QueryBusinessArgs = {
+  id?: InputMaybe<Scalars['ID']['input']>;
+};
+
+
+/** The schema’s entry point for queries. */
+export type QueryBusinessesArgs = {
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+};
+
+
+/** The schema’s entry point for queries. */
+export type QueryCountryArgs = {
+  code: CountryCode;
+};
+
+
+/** The schema’s entry point for queries. */
+export type QueryCurrencyArgs = {
+  code: CurrencyCode;
+};
+
+
+/** The schema’s entry point for queries. */
+export type QueryProvinceArgs = {
+  code: Scalars['String']['input'];
+};
+
+/** A template that can be used to generate and possibly pay an invoice at regular intervals. */
+export type RecurringInvoice = BusinessNode & Node & {
+  __typename?: 'RecurringInvoice';
+  /** Business that the RecurringInvoice belongs to */
+  business: Business;
+  /** Unique identifier for the recurring invoice. */
+  id: Scalars['ID']['output'];
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+};
+
+/** A tax paid to a taxing authority for the sales of certain goods and services. */
+export type SalesTax = BusinessNode & Node & {
+  __typename?: 'SalesTax';
+  /** A short form or code representing the sales tax. */
+  abbreviation: Scalars['String']['output'];
+  /** Business that the sales tax belongs to. */
+  business: Business;
+  /** When the sales tax was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** User defined description for the sales tax. */
+  description?: Maybe<Scalars['String']['output']>;
+  /** The unique identifier for the sales tax. */
+  id: Scalars['ID']['output'];
+  /**
+   * The primary key used internally at Wave.
+   * @deprecated Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.
+   */
+  internalId?: Maybe<Scalars['String']['output']>;
+  /** Is the sales tax hidden from view by default. */
+  isArchived: Scalars['Boolean']['output'];
+  /** Is a compound tax, or stacked tax. This tax is calculated on top of the subtotal and other tax amounts. */
+  isCompound: Scalars['Boolean']['output'];
+  /** Is a recoverable tax. It is recoverable if you can deduct the tax that you as a business paid from the tax that you have collected. */
+  isRecoverable: Scalars['Boolean']['output'];
+  /** When the sales tax was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** Name of the tax. */
+  name: Scalars['String']['output'];
+  /** Tax rate effective on 'for' date, or current date if no parameter, as a decimal (e.g. 0.15 represents 15%). */
+  rate: Scalars['Decimal']['output'];
+  /** Tax rates with their effective dates of application */
+  rates: Array<SalesTaxRate>;
+  /** Display tax number beside the tax name on an invoice. */
+  showTaxNumberOnInvoices: Scalars['Boolean']['output'];
+  /** The tax's issued identification number from a taxing authority. */
+  taxNumber?: Maybe<Scalars['String']['output']>;
+};
+
+
+/** A tax paid to a taxing authority for the sales of certain goods and services. */
+export type SalesTaxRateArgs = {
+  for?: InputMaybe<Scalars['Date']['input']>;
+};
+
+/** Input to the `salesTaxArchive` mutation. */
+export type SalesTaxArchiveInput = {
+  /** The unique identifier for the sales tax. */
+  id: Scalars['ID']['input'];
+};
+
+/** Output of the `salesTaxArchive` mutation. */
+export type SalesTaxArchiveOutput = {
+  __typename?: 'SalesTaxArchiveOutput';
+  /** Indicates whether the sales tax was successfully deleted. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Sales tax that was archived. */
+  salesTax?: Maybe<SalesTax>;
+};
+
+/** Sales tax connection. */
+export type SalesTaxConnection = {
+  __typename?: 'SalesTaxConnection';
+  /** List of sales taxes. */
+  edges: Array<SalesTaxEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Input to the `salesTaxCreate` mutation. */
+export type SalesTaxCreateInput = {
+  /** An short form or code representing the sales tax. Max 10 characters, and MUST BE UNIQUE within business. */
+  abbreviation: Scalars['String']['input'];
+  /** The unique identifier for the business. */
+  businessId: Scalars['ID']['input'];
+  /** User defined description for the sales tax. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** Is a compound tax, or stacked tax. This tax is calculated on top of the subtotal and other tax amounts. */
+  isCompound?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Is a recoverable tax. It is recoverable if you can deduct the tax that you as a business paid from the tax that you have collected. */
+  isRecoverable?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Name of the tax. */
+  name: Scalars['String']['input'];
+  /** The current rate, as a decimal (e.g. 0.15 represents 15%; rounded to nearest 6 decimal places with ties going away from zero). */
+  rate: Scalars['Decimal']['input'];
+  /** Display tax number beside the tax name on an invoice. */
+  showTaxNumberOnInvoices?: InputMaybe<Scalars['Boolean']['input']>;
+  /** The tax's issued identification number from a taxing authority. */
+  taxNumber?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Output of the `salesTaxCreate` mutation. */
+export type SalesTaxCreateOutput = {
+  __typename?: 'SalesTaxCreateOutput';
+  /** Indicates whether the sales tax was successfully created. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Sales tax that was created. */
+  salesTax?: Maybe<SalesTax>;
+};
+
+/** Sales tax edge. */
+export type SalesTaxEdge = {
+  __typename?: 'SalesTaxEdge';
+  /** A sales tax. */
+  node?: Maybe<SalesTax>;
+};
+
+/** Input to the `salesTaxPatch` mutation. */
+export type SalesTaxPatchInput = {
+  /** An short form or code representing the sales tax */
+  abbreviation?: InputMaybe<Scalars['String']['input']>;
+  /** User defined description for the sales tax. */
+  description?: InputMaybe<Scalars['String']['input']>;
+  /** The unique identifier for the sales tax. */
+  id: Scalars['ID']['input'];
+  /** Name of the tax. */
+  name?: InputMaybe<Scalars['String']['input']>;
+  /** Tax rate information. */
+  rates?: InputMaybe<Array<SalesTaxRateInput>>;
+  /** Display tax number beside the tax name on an invoice. */
+  showTaxNumberOnInvoices?: InputMaybe<Scalars['Boolean']['input']>;
+  /** The tax's issued identification number from a taxing authority. */
+  taxNumber?: InputMaybe<Scalars['String']['input']>;
+};
+
+/** Output of the `salesTaxPatch` mutation. */
+export type SalesTaxPatchOutput = {
+  __typename?: 'SalesTaxPatchOutput';
+  /** Indicates whether the sales tax was successfully patched. */
+  didSucceed: Scalars['Boolean']['output'];
+  /** Mutation validation errors. */
+  inputErrors?: Maybe<Array<InputError>>;
+  /** Sales tax that was patched. */
+  salesTax?: Maybe<SalesTax>;
+};
+
+/** A Sales Tax rate with effective date. New entry for each change of rate. */
+export type SalesTaxRate = {
+  __typename?: 'SalesTaxRate';
+  /** Date from which the sales tax rate applies. */
+  effective: Scalars['Date']['output'];
+  /** Tax rate applying from the effective date as a decimal (e.g. 0.15 represents 15%). */
+  rate: Scalars['Decimal']['output'];
+};
+
+/** Sales tax rate input for the `salesTaxPatch` mutation */
+export type SalesTaxRateInput = {
+  /** Date from which the sales tax rate applies. */
+  effective: Scalars['Date']['input'];
+  /** Tax rate applying from the effective date as a decimal (e.g. 0.15 represents 15%). */
+  rate: Scalars['Decimal']['input'];
+};
+
+/** Wave's schemas. */
+export enum Schema {
+  /** Available only to HR Block integration. */
+  Hrblock = 'HRBLOCK',
+  /** Available only to Wave. */
+  Internal = 'INTERNAL',
+  /** Available to all third parties. */
+  Public = 'PUBLIC',
+  /** Available only to Wave staff. */
+  Staff = 'STAFF'
+}
+
+/** An created transaction. */
+export type Transaction = {
+  __typename?: 'Transaction';
+  /** Unique identifier for the transaction. */
+  id: Scalars['ID']['output'];
+};
+
+/** Sales tax input. */
+export type TransactionCreateSalesTaxInput = {
+  /** Tax Abbreviation. */
+  abbreviation: Scalars['String']['input'];
+  /** Tax Amount. */
+  amount: Scalars['Float']['input'];
+};
+
+/** Represents the direction of a transaction. */
+export enum TransactionDirection {
+  /** To put in. */
+  Deposit = 'DEPOSIT',
+  /** To remove from. */
+  Withdrawal = 'WITHDRAWAL'
+}
+
+/** Represents the origin of a transaction. */
+export enum TransactionOrigin {
+  /** Manually created transaction. */
+  Manual = 'MANUAL',
+  /** Transaction created through Zapier. */
+  Zapier = 'ZAPIER'
+}
+
+/** A user is an individual's account. */
+export type User = Node & {
+  __typename?: 'User';
+  /** When the user was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** The user's primary email address. */
+  defaultEmail?: Maybe<Scalars['String']['output']>;
+  /** The user's first name. */
+  firstName?: Maybe<Scalars['String']['output']>;
+  /** The unique identifier for the user. */
+  id: Scalars['ID']['output'];
+  /** The user's last name. */
+  lastName?: Maybe<Scalars['String']['output']>;
+  /** When the user was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+};
+
+/** A vendor of the business. */
+export type Vendor = BusinessNode & Node & {
+  __typename?: 'Vendor';
+  /** The address of the vendor. */
+  address?: Maybe<Address>;
+  /** Business that the vendor belongs to. */
+  business: Business;
+  /** When the vendor was created. */
+  createdAt: Scalars['DateTime']['output'];
+  /** Default currency used by the vendor. */
+  currency?: Maybe<Currency>;
+  /** User defined id for the vendor. Commonly referred to as Account Number. */
+  displayId?: Maybe<Scalars['String']['output']>;
+  /** Email of the principal vendor. */
+  email?: Maybe<Scalars['String']['output']>;
+  /** Fax number of the vendor. */
+  fax?: Maybe<Scalars['String']['output']>;
+  /** The first name of the principal contact. */
+  firstName?: Maybe<Scalars['String']['output']>;
+  /** Unique identifier for the customer. */
+  id: Scalars['ID']['output'];
+  /** Internal notes about the vendor. */
+  internalNotes?: Maybe<Scalars['String']['output']>;
+  /** Whether or not the vendor is archived. */
+  isArchived?: Maybe<Scalars['Boolean']['output']>;
+  /** The last name of the principal contact. */
+  lastName?: Maybe<Scalars['String']['output']>;
+  /** The mobile number of the vendor. */
+  mobile?: Maybe<Scalars['String']['output']>;
+  /** When the vendor was last modified. */
+  modifiedAt: Scalars['DateTime']['output'];
+  /** Name or business name of the vendor. */
+  name: Scalars['String']['output'];
+  /** The phone number of the vendor. */
+  phone?: Maybe<Scalars['String']['output']>;
+  /** Details for shipping to the vendor. */
+  shippingDetails?: Maybe<VendorShippingDetails>;
+  /** Toll-free number of the vendor. */
+  tollFree?: Maybe<Scalars['String']['output']>;
+  /** Website address of the vendor. */
+  website?: Maybe<Scalars['String']['output']>;
+};
+
+/** Vendor connection. */
+export type VendorConnection = {
+  __typename?: 'VendorConnection';
+  /** List of vendors. */
+  edges: Array<VendorEdge>;
+  /** Information about pagination. */
+  pageInfo: OffsetPageInfo;
+};
+
+/** Vendor edge. */
+export type VendorEdge = {
+  __typename?: 'VendorEdge';
+  /** A vendor. */
+  node: Vendor;
+};
+
+/** Shipping details related to a vendor. */
+export type VendorShippingDetails = {
+  __typename?: 'VendorShippingDetails';
+  /** Address of the vendor. */
+  address?: Maybe<Address>;
+  /** Delivery instructions for handling. */
+  instructions?: Maybe<Scalars['String']['output']>;
+  /** Name or business name of the vendor. */
+  name?: Maybe<Scalars['String']['output']>;
+  /** Telephone number of the vendor. */
+  phone?: Maybe<Scalars['String']['output']>;
+};
+
+export type CreateAccountMutationVariables = Exact<{
+  input: AccountCreateInput;
+}>;
+
+
+export type CreateAccountMutation = { __typename?: 'Mutation', accountCreate?: { __typename?: 'AccountCreateOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, account?: { __typename?: 'Account', id: string, name: string, description?: string | null, displayId?: string | null, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue }, subtype: { __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue }, currency: { __typename?: 'Currency', code: CurrencyCode } } | null } | null };
+
+export type UpdateAccountMutationVariables = Exact<{
+  input: AccountPatchInput;
+}>;
+
+
+export type UpdateAccountMutation = { __typename?: 'Mutation', accountPatch?: { __typename?: 'AccountPatchOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, account?: { __typename?: 'Account', id: string, name: string, description?: string | null, displayId?: string | null, sequence: number } | null } | null };
+
+export type ArchiveAccountMutationVariables = Exact<{
+  input: AccountArchiveInput;
+}>;
+
+
+export type ArchiveAccountMutation = { __typename?: 'Mutation', accountArchive?: { __typename?: 'AccountArchiveOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null } | null };
+
+export type CreateCustomerMutationVariables = Exact<{
+  input: CustomerCreateInput;
+}>;
+
+
+export type CreateCustomerMutation = { __typename?: 'Mutation', customerCreate?: { __typename?: 'CustomerCreateOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, customer?: { __typename?: 'Customer', id: string, name: string, firstName?: string | null, lastName?: string | null, email?: string | null, phone?: string | null, createdAt: any, currency?: { __typename?: 'Currency', code: CurrencyCode } | null } | null } | null };
+
+export type UpdateCustomerMutationVariables = Exact<{
+  input: CustomerPatchInput;
+}>;
+
+
+export type UpdateCustomerMutation = { __typename?: 'Mutation', customerPatch?: { __typename?: 'CustomerPatchOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, customer?: { __typename?: 'Customer', id: string, name: string, firstName?: string | null, lastName?: string | null, email?: string | null, phone?: string | null, modifiedAt: any } | null } | null };
+
+export type DeleteCustomerMutationVariables = Exact<{
+  input: CustomerDeleteInput;
+}>;
+
+
+export type DeleteCustomerMutation = { __typename?: 'Mutation', customerDelete?: { __typename?: 'CustomerDeleteOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null } | null };
+
+export type CreateInvoiceMutationVariables = Exact<{
+  input: InvoiceCreateInput;
+}>;
+
+
+export type CreateInvoiceMutation = { __typename?: 'Mutation', invoiceCreate?: { __typename?: 'InvoiceCreateOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, invoiceNumber: string, invoiceDate: any, dueDate: any, status: InvoiceStatus, createdAt: any, total: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } } } | null } | null };
+
+export type UpdateInvoiceMutationVariables = Exact<{
+  input: InvoicePatchInput;
+}>;
+
+
+export type UpdateInvoiceMutation = { __typename?: 'Mutation', invoicePatch?: { __typename?: 'InvoicePatchOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, invoiceNumber: string, invoiceDate: any, dueDate: any, status: InvoiceStatus, modifiedAt: any, total: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } } } | null } | null };
+
+export type DeleteInvoiceMutationVariables = Exact<{
+  input: InvoiceDeleteInput;
+}>;
+
+
+export type DeleteInvoiceMutation = { __typename?: 'Mutation', invoiceDelete?: { __typename?: 'InvoiceDeleteOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null } | null };
+
+export type SendInvoiceMutationVariables = Exact<{
+  input: InvoiceSendInput;
+}>;
+
+
+export type SendInvoiceMutation = { __typename?: 'Mutation', invoiceSend?: { __typename?: 'InvoiceSendOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, status: InvoiceStatus, lastSentAt?: any | null, lastSentVia?: InvoiceSendMethod | null } | null } | null };
+
+export type ApproveInvoiceMutationVariables = Exact<{
+  input: InvoiceApproveInput;
+}>;
+
+
+export type ApproveInvoiceMutation = { __typename?: 'Mutation', invoiceApprove?: { __typename?: 'InvoiceApproveOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, status: InvoiceStatus } | null } | null };
+
+export type MarkInvoiceSentMutationVariables = Exact<{
+  input: InvoiceMarkSentInput;
+}>;
+
+
+export type MarkInvoiceSentMutation = { __typename?: 'Mutation', invoiceMarkSent?: { __typename?: 'InvoiceMarkSentOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, status: InvoiceStatus, lastSentAt?: any | null, lastSentVia?: InvoiceSendMethod | null } | null } | null };
+
+export type CloneInvoiceMutationVariables = Exact<{
+  input: InvoiceCloneInput;
+}>;
+
+
+export type CloneInvoiceMutation = { __typename?: 'Mutation', invoiceClone?: { __typename?: 'InvoiceCloneOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, invoice?: { __typename?: 'Invoice', id: string, invoiceNumber: string, status: InvoiceStatus } | null } | null };
+
+export type CreateProductMutationVariables = Exact<{
+  input: ProductCreateInput;
+}>;
+
+
+export type CreateProductMutation = { __typename?: 'Mutation', productCreate?: { __typename?: 'ProductCreateOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, product?: { __typename?: 'Product', id: string, name: string, description?: string | null, unitPrice: any, isSold: boolean, isBought: boolean, createdAt: any } | null } | null };
+
+export type UpdateProductMutationVariables = Exact<{
+  input: ProductPatchInput;
+}>;
+
+
+export type UpdateProductMutation = { __typename?: 'Mutation', productPatch?: { __typename?: 'ProductPatchOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, product?: { __typename?: 'Product', id: string, name: string, description?: string | null, unitPrice: any, isSold: boolean, isBought: boolean, modifiedAt: any } | null } | null };
+
+export type ArchiveProductMutationVariables = Exact<{
+  input: ProductArchiveInput;
+}>;
+
+
+export type ArchiveProductMutation = { __typename?: 'Mutation', productArchive?: { __typename?: 'ProductArchiveOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, product?: { __typename?: 'Product', id: string, isArchived: boolean } | null } | null };
+
+export type CreateSalesTaxMutationVariables = Exact<{
+  input: SalesTaxCreateInput;
+}>;
+
+
+export type CreateSalesTaxMutation = { __typename?: 'Mutation', salesTaxCreate: { __typename?: 'SalesTaxCreateOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, salesTax?: { __typename?: 'SalesTax', id: string, name: string, abbreviation: string, rate: any, isCompound: boolean, isRecoverable: boolean, createdAt: any } | null } };
+
+export type UpdateSalesTaxMutationVariables = Exact<{
+  input: SalesTaxPatchInput;
+}>;
+
+
+export type UpdateSalesTaxMutation = { __typename?: 'Mutation', salesTaxPatch: { __typename?: 'SalesTaxPatchOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, salesTax?: { __typename?: 'SalesTax', id: string, name: string, abbreviation: string, rate: any, modifiedAt: any } | null } };
+
+export type ArchiveSalesTaxMutationVariables = Exact<{
+  input: SalesTaxArchiveInput;
+}>;
+
+
+export type ArchiveSalesTaxMutation = { __typename?: 'Mutation', salesTaxArchive: { __typename?: 'SalesTaxArchiveOutput', didSucceed: boolean, inputErrors?: Array<{ __typename?: 'InputError', path?: Array<string> | null, message?: string | null, code?: string | null }> | null, salesTax?: { __typename?: 'SalesTax', id: string, isArchived: boolean } | null } };
+
+export type GetAccountsQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  types?: InputMaybe<Array<AccountTypeValue> | AccountTypeValue>;
+  subtypes?: InputMaybe<Array<AccountSubtypeValue> | AccountSubtypeValue>;
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+}>;
+
+
+export type GetAccountsQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, accounts?: { __typename?: 'AccountConnection', edges: Array<{ __typename?: 'AccountEdge', node?: { __typename?: 'Account', id: string, name: string, description?: string | null, displayId?: string | null, normalBalanceType: AccountNormalBalanceType, balance?: any | null, balanceInBusinessCurrency?: any | null, isArchived: boolean, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue }, subtype: { __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue }, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } } | null }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null } | null };
+
+export type GetAccountQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  accountId: Scalars['ID']['input'];
+}>;
+
+
+export type GetAccountQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, account?: { __typename?: 'Account', id: string, name: string, description?: string | null, displayId?: string | null, normalBalanceType: AccountNormalBalanceType, balance?: any | null, balanceInBusinessCurrency?: any | null, isArchived: boolean, sequence: number, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue, normalBalanceType: AccountNormalBalanceType }, subtype: { __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue, archivable: boolean, systemCreated: boolean, description?: string | null }, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string, name: string } } | null } | null };
+
+export type GetAccountTypesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetAccountTypesQuery = { __typename?: 'Query', accountTypes: Array<{ __typename?: 'AccountType', name: string, value: AccountTypeValue, normalBalanceType: AccountNormalBalanceType }> };
+
+export type GetAccountSubtypesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetAccountSubtypesQuery = { __typename?: 'Query', accountSubtypes: Array<{ __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue, archivable: boolean, systemCreated: boolean, description?: string | null, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue } }> };
+
+export type GetBusinessQueryVariables = Exact<{
+  id?: InputMaybe<Scalars['ID']['input']>;
+}>;
+
+
+export type GetBusinessQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, name: string, isPersonal: boolean, timezone?: string | null, phone?: string | null, website?: string | null, isArchived: boolean, createdAt: any, modifiedAt: any, emailSendEnabled: boolean, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string, name: string }, address?: { __typename?: 'Address', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, postalCode?: string | null, province?: { __typename?: 'Province', code: string, name: string } | null, country?: { __typename?: 'Country', code: CountryCode, name: string } | null } | null } | null };
+
+export type ListBusinessesQueryVariables = Exact<{
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+}>;
+
+
+export type ListBusinessesQuery = { __typename?: 'Query', businesses?: { __typename?: 'BusinessConnection', edges: Array<{ __typename?: 'BusinessEdge', node?: { __typename?: 'Business', id: string, name: string, isPersonal: boolean, isArchived: boolean, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } } | null }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null };
+
+export type GetCustomersQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<CustomerSort> | CustomerSort;
+}>;
+
+
+export type GetCustomersQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, customers?: { __typename?: 'CustomerConnection', edges: Array<{ __typename?: 'CustomerEdge', node?: { __typename?: 'Customer', id: string, name: string, firstName?: string | null, lastName?: string | null, email?: string | null, phone?: string | null, mobile?: string | null, createdAt: any, modifiedAt: any, isArchived?: boolean | null, currency?: { __typename?: 'Currency', code: CurrencyCode, symbol: string } | null, address?: { __typename?: 'Address', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, postalCode?: string | null, province?: { __typename?: 'Province', code: string, name: string } | null, country?: { __typename?: 'Country', code: CountryCode, name: string } | null } | null, outstandingAmount: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } }, overdueAmount: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } } } | null }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null } | null };
+
+export type GetCustomerQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  customerId: Scalars['ID']['input'];
+}>;
+
+
+export type GetCustomerQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, customer?: { __typename?: 'Customer', id: string, name: string, firstName?: string | null, lastName?: string | null, displayId?: string | null, email?: string | null, phone?: string | null, mobile?: string | null, fax?: string | null, tollFree?: string | null, website?: string | null, internalNotes?: string | null, createdAt: any, modifiedAt: any, isArchived?: boolean | null, currency?: { __typename?: 'Currency', code: CurrencyCode, symbol: string, name: string } | null, address?: { __typename?: 'Address', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, postalCode?: string | null, province?: { __typename?: 'Province', code: string, name: string } | null, country?: { __typename?: 'Country', code: CountryCode, name: string } | null } | null, shippingDetails?: { __typename?: 'CustomerShippingDetails', name?: string | null, phone?: string | null, instructions?: string | null, address?: { __typename?: 'Address', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, postalCode?: string | null, province?: { __typename?: 'Province', code: string, name: string } | null, country?: { __typename?: 'Country', code: CountryCode, name: string } | null } | null } | null, outstandingAmount: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } }, overdueAmount: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } } } | null } | null };
+
+export type GetInvoicesQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<InvoiceSort> | InvoiceSort;
+  status?: InputMaybe<InvoiceStatus>;
+  customerId?: InputMaybe<Scalars['ID']['input']>;
+}>;
+
+
+export type GetInvoicesQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, invoices?: { __typename?: 'InvoiceConnection', edges: Array<{ __typename?: 'InvoiceEdge', node: { __typename?: 'Invoice', id: string, invoiceNumber: string, invoiceDate: any, dueDate: any, status: InvoiceStatus, title: string, createdAt: any, modifiedAt: any, lastSentAt?: any | null, lastViewedAt?: any | null, customer: { __typename?: 'Customer', id: string, name: string, email?: string | null }, amountDue: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, amountPaid: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, total: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } } }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null } | null };
+
+export type GetInvoiceQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  invoiceId: Scalars['ID']['input'];
+}>;
+
+
+export type GetInvoiceQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, invoice?: { __typename?: 'Invoice', id: string, invoiceNumber: string, invoiceDate: any, dueDate: any, status: InvoiceStatus, title: string, subhead?: string | null, poNumber?: string | null, memo?: string | null, footer?: string | null, pdfUrl: string, viewUrl: string, exchangeRate: any, createdAt: any, modifiedAt: any, lastSentAt?: any | null, lastSentVia?: InvoiceSendMethod | null, lastViewedAt?: any | null, customer: { __typename?: 'Customer', id: string, name: string, firstName?: string | null, lastName?: string | null, email?: string | null, address?: { __typename?: 'Address', addressLine1?: string | null, addressLine2?: string | null, city?: string | null, postalCode?: string | null, province?: { __typename?: 'Province', code: string, name: string } | null, country?: { __typename?: 'Country', code: CountryCode, name: string } | null } | null }, items?: Array<{ __typename?: 'InvoiceItem', description?: string | null, quantity: any, unitPrice: any, product: { __typename?: 'Product', id: string, name: string }, subtotal: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } }, total: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } }, taxes: Array<{ __typename?: 'InvoiceItemTax', salesTax: { __typename?: 'SalesTax', id: string, name: string, abbreviation: string }, amount?: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode } } | null }> }> | null, discounts?: Array<
+        | { __typename?: 'FixedInvoiceDiscount', name?: string | null, amount?: any | null }
+        | { __typename?: 'PercentageInvoiceDiscount', name?: string | null, percentage?: any | null }
+      > | null, subtotal: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, taxTotal: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, discountTotal: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, total: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, amountDue: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, amountPaid: { __typename?: 'Money', value: string, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string } }, currency: { __typename?: 'Currency', code: CurrencyCode, symbol: string, name: string } } | null } | null };
+
+export type GetProductsQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  sort?: Array<ProductSort> | ProductSort;
+  isSold?: InputMaybe<Scalars['Boolean']['input']>;
+  isBought?: InputMaybe<Scalars['Boolean']['input']>;
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+}>;
+
+
+export type GetProductsQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, products?: { __typename?: 'ProductConnection', edges: Array<{ __typename?: 'ProductEdge', node: { __typename?: 'Product', id: string, name: string, description?: string | null, unitPrice: any, isSold: boolean, isBought: boolean, isArchived: boolean, createdAt: any, modifiedAt: any, incomeAccount?: { __typename?: 'Account', id: string, name: string } | null, expenseAccount?: { __typename?: 'Account', id: string, name: string } | null, defaultSalesTaxes: Array<{ __typename?: 'SalesTax', id: string, name: string, abbreviation: string }> } }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null } | null };
+
+export type GetProductQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  productId: Scalars['ID']['input'];
+}>;
+
+
+export type GetProductQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, product?: { __typename?: 'Product', id: string, name: string, description?: string | null, unitPrice: any, isSold: boolean, isBought: boolean, isArchived: boolean, createdAt: any, modifiedAt: any, incomeAccount?: { __typename?: 'Account', id: string, name: string, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue }, subtype: { __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue } } | null, expenseAccount?: { __typename?: 'Account', id: string, name: string, type: { __typename?: 'AccountType', name: string, value: AccountTypeValue }, subtype: { __typename?: 'AccountSubtype', name: string, value: AccountSubtypeValue } } | null, defaultSalesTaxes: Array<{ __typename?: 'SalesTax', id: string, name: string, abbreviation: string, rate: any }> } | null } | null };
+
+export type GetSalesTaxesQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
+  isArchived?: InputMaybe<Scalars['Boolean']['input']>;
+}>;
+
+
+export type GetSalesTaxesQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, salesTaxes?: { __typename?: 'SalesTaxConnection', edges: Array<{ __typename?: 'SalesTaxEdge', node?: { __typename?: 'SalesTax', id: string, name: string, abbreviation: string, description?: string | null, taxNumber?: string | null, showTaxNumberOnInvoices: boolean, rate: any, isCompound: boolean, isRecoverable: boolean, isArchived: boolean, createdAt: any, modifiedAt: any, rates: Array<{ __typename?: 'SalesTaxRate', effective: any, rate: any }> } | null }>, pageInfo: { __typename?: 'OffsetPageInfo', currentPage: number, totalPages?: number | null, totalCount?: number | null } } | null } | null };
+
+export type GetSalesTaxQueryVariables = Exact<{
+  businessId: Scalars['ID']['input'];
+  salesTaxId: Scalars['ID']['input'];
+}>;
+
+
+export type GetSalesTaxQuery = { __typename?: 'Query', business?: { __typename?: 'Business', id: string, salesTax?: { __typename?: 'SalesTax', id: string, name: string, abbreviation: string, description?: string | null, taxNumber?: string | null, showTaxNumberOnInvoices: boolean, rate: any, isCompound: boolean, isRecoverable: boolean, isArchived: boolean, createdAt: any, modifiedAt: any, rates: Array<{ __typename?: 'SalesTaxRate', effective: any, rate: any }> } | null } | null };
+
+
+export const CreateAccountDocument = gql`
+    mutation CreateAccount($input: AccountCreateInput!) {
+  accountCreate(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    account {
+      id
+      name
+      description
+      displayId
+      type {
+        name
+        value
+      }
+      subtype {
+        name
+        value
+      }
+      currency {
+        code
+      }
+    }
+  }
+}
+    `;
+export const UpdateAccountDocument = gql`
+    mutation UpdateAccount($input: AccountPatchInput!) {
+  accountPatch(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    account {
+      id
+      name
+      description
+      displayId
+      sequence
+    }
+  }
+}
+    `;
+export const ArchiveAccountDocument = gql`
+    mutation ArchiveAccount($input: AccountArchiveInput!) {
+  accountArchive(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+  }
+}
+    `;
+export const CreateCustomerDocument = gql`
+    mutation CreateCustomer($input: CustomerCreateInput!) {
+  customerCreate(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    customer {
+      id
+      name
+      firstName
+      lastName
+      email
+      phone
+      currency {
+        code
+      }
+      createdAt
+    }
+  }
+}
+    `;
+export const UpdateCustomerDocument = gql`
+    mutation UpdateCustomer($input: CustomerPatchInput!) {
+  customerPatch(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    customer {
+      id
+      name
+      firstName
+      lastName
+      email
+      phone
+      modifiedAt
+    }
+  }
+}
+    `;
+export const DeleteCustomerDocument = gql`
+    mutation DeleteCustomer($input: CustomerDeleteInput!) {
+  customerDelete(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+  }
+}
+    `;
+export const CreateInvoiceDocument = gql`
+    mutation CreateInvoice($input: InvoiceCreateInput!) {
+  invoiceCreate(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      invoiceNumber
+      invoiceDate
+      dueDate
+      status
+      total {
+        value
+        currency {
+          code
+        }
+      }
+      createdAt
+    }
+  }
+}
+    `;
+export const UpdateInvoiceDocument = gql`
+    mutation UpdateInvoice($input: InvoicePatchInput!) {
+  invoicePatch(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      invoiceNumber
+      invoiceDate
+      dueDate
+      status
+      total {
+        value
+        currency {
+          code
+        }
+      }
+      modifiedAt
+    }
+  }
+}
+    `;
+export const DeleteInvoiceDocument = gql`
+    mutation DeleteInvoice($input: InvoiceDeleteInput!) {
+  invoiceDelete(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+  }
+}
+    `;
+export const SendInvoiceDocument = gql`
+    mutation SendInvoice($input: InvoiceSendInput!) {
+  invoiceSend(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      status
+      lastSentAt
+      lastSentVia
+    }
+  }
+}
+    `;
+export const ApproveInvoiceDocument = gql`
+    mutation ApproveInvoice($input: InvoiceApproveInput!) {
+  invoiceApprove(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      status
+    }
+  }
+}
+    `;
+export const MarkInvoiceSentDocument = gql`
+    mutation MarkInvoiceSent($input: InvoiceMarkSentInput!) {
+  invoiceMarkSent(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      status
+      lastSentAt
+      lastSentVia
+    }
+  }
+}
+    `;
+export const CloneInvoiceDocument = gql`
+    mutation CloneInvoice($input: InvoiceCloneInput!) {
+  invoiceClone(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    invoice {
+      id
+      invoiceNumber
+      status
+    }
+  }
+}
+    `;
+export const CreateProductDocument = gql`
+    mutation CreateProduct($input: ProductCreateInput!) {
+  productCreate(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    product {
+      id
+      name
+      description
+      unitPrice
+      isSold
+      isBought
+      createdAt
+    }
+  }
+}
+    `;
+export const UpdateProductDocument = gql`
+    mutation UpdateProduct($input: ProductPatchInput!) {
+  productPatch(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    product {
+      id
+      name
+      description
+      unitPrice
+      isSold
+      isBought
+      modifiedAt
+    }
+  }
+}
+    `;
+export const ArchiveProductDocument = gql`
+    mutation ArchiveProduct($input: ProductArchiveInput!) {
+  productArchive(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    product {
+      id
+      isArchived
+    }
+  }
+}
+    `;
+export const CreateSalesTaxDocument = gql`
+    mutation CreateSalesTax($input: SalesTaxCreateInput!) {
+  salesTaxCreate(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    salesTax {
+      id
+      name
+      abbreviation
+      rate
+      isCompound
+      isRecoverable
+      createdAt
+    }
+  }
+}
+    `;
+export const UpdateSalesTaxDocument = gql`
+    mutation UpdateSalesTax($input: SalesTaxPatchInput!) {
+  salesTaxPatch(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    salesTax {
+      id
+      name
+      abbreviation
+      rate
+      modifiedAt
+    }
+  }
+}
+    `;
+export const ArchiveSalesTaxDocument = gql`
+    mutation ArchiveSalesTax($input: SalesTaxArchiveInput!) {
+  salesTaxArchive(input: $input) {
+    didSucceed
+    inputErrors {
+      path
+      message
+      code
+    }
+    salesTax {
+      id
+      isArchived
+    }
+  }
+}
+    `;
+export const GetAccountsDocument = gql`
+    query GetAccounts($businessId: ID!, $page: Int, $pageSize: Int, $types: [AccountTypeValue!], $subtypes: [AccountSubtypeValue!], $isArchived: Boolean) {
+  business(id: $businessId) {
+    id
+    accounts(
+      page: $page
+      pageSize: $pageSize
+      types: $types
+      subtypes: $subtypes
+      isArchived: $isArchived
+    ) {
+      edges {
+        node {
+          id
+          name
+          description
+          displayId
+          type {
+            name
+            value
+          }
+          subtype {
+            name
+            value
+          }
+          normalBalanceType
+          currency {
+            code
+            symbol
+          }
+          balance
+          balanceInBusinessCurrency
+          isArchived
+        }
+      }
+      pageInfo {
+        currentPage
+        totalPages
+        totalCount
+      }
+    }
+  }
+}
+    `;
+export const GetAccountDocument = gql`
+    query GetAccount($businessId: ID!, $accountId: ID!) {
+  business(id: $businessId) {
+    id
+    account(id: $accountId) {
+      id
+      name
+      description
+      displayId
+      type {
+        name
+        value
+        normalBalanceType
+      }
+      subtype {
+        name
+        value
+        archivable
+        systemCreated
+        description
+      }
+      normalBalanceType
+      currency {
+        code
+        symbol
+        name
+      }
+      balance
+      balanceInBusinessCurrency
+      isArchived
+      sequence
+    }
+  }
+}
+    `;
+export const GetAccountTypesDocument = gql`
+    query GetAccountTypes {
+  accountTypes {
+    name
+    value
+    normalBalanceType
+  }
+}
+    `;
+export const GetAccountSubtypesDocument = gql`
+    query GetAccountSubtypes {
+  accountSubtypes {
+    name
+    value
+    type {
+      name
+      value
+    }
+    archivable
+    systemCreated
+    description
+  }
+}
+    `;
+export const GetBusinessDocument = gql`
+    query GetBusiness($id: ID) {
+  business(id: $id) {
+    id
+    name
+    isPersonal
+    currency {
+      code
+      symbol
+      name
+    }
+    timezone
+    address {
+      addressLine1
+      addressLine2
+      city
+      province {
+        code
+        name
+      }
+      country {
+        code
+        name
+      }
+      postalCode
+    }
+    phone
+    website
+    isArchived
+    createdAt
+    modifiedAt
+    emailSendEnabled
+  }
+}
+    `;
+export const ListBusinessesDocument = gql`
+    query ListBusinesses($page: Int, $pageSize: Int) {
+  businesses(page: $page, pageSize: $pageSize) {
+    edges {
+      node {
+        id
+        name
+        isPersonal
+        currency {
+          code
+          symbol
+        }
+        isArchived
+      }
+    }
+    pageInfo {
+      currentPage
+      totalPages
+      totalCount
+    }
+  }
+}
+    `;
+export const GetCustomersDocument = gql`
+    query GetCustomers($businessId: ID!, $page: Int, $pageSize: Int, $sort: [CustomerSort!]! = [NAME_ASC]) {
+  business(id: $businessId) {
+    id
+    customers(page: $page, pageSize: $pageSize, sort: $sort) {
+      edges {
+        node {
+          id
+          name
+          firstName
+          lastName
+          email
+          phone
+          mobile
+          currency {
+            code
+            symbol
+          }
+          address {
+            addressLine1
+            addressLine2
+            city
+            province {
+              code
+              name
+            }
+            country {
+              code
+              name
+            }
+            postalCode
+          }
+          outstandingAmount {
+            value
+            currency {
+              code
+            }
+          }
+          overdueAmount {
+            value
+            currency {
+              code
+            }
+          }
+          createdAt
+          modifiedAt
+          isArchived
+        }
+      }
+      pageInfo {
+        currentPage
+        totalPages
+        totalCount
+      }
+    }
+  }
+}
+    `;
+export const GetCustomerDocument = gql`
+    query GetCustomer($businessId: ID!, $customerId: ID!) {
+  business(id: $businessId) {
+    id
+    customer(id: $customerId) {
+      id
+      name
+      firstName
+      lastName
+      displayId
+      email
+      phone
+      mobile
+      fax
+      tollFree
+      website
+      internalNotes
+      currency {
+        code
+        symbol
+        name
+      }
+      address {
+        addressLine1
+        addressLine2
+        city
+        province {
+          code
+          name
+        }
+        country {
+          code
+          name
+        }
+        postalCode
+      }
+      shippingDetails {
+        name
+        phone
+        instructions
+        address {
+          addressLine1
+          addressLine2
+          city
+          province {
+            code
+            name
+          }
+          country {
+            code
+            name
+          }
+          postalCode
+        }
+      }
+      outstandingAmount {
+        value
+        currency {
+          code
+        }
+      }
+      overdueAmount {
+        value
+        currency {
+          code
+        }
+      }
+      createdAt
+      modifiedAt
+      isArchived
+    }
+  }
+}
+    `;
+export const GetInvoicesDocument = gql`
+    query GetInvoices($businessId: ID!, $page: Int, $pageSize: Int, $sort: [InvoiceSort!]! = [INVOICE_DATE_DESC], $status: InvoiceStatus, $customerId: ID) {
+  business(id: $businessId) {
+    id
+    invoices(
+      page: $page
+      pageSize: $pageSize
+      sort: $sort
+      status: $status
+      customerId: $customerId
+    ) {
+      edges {
+        node {
+          id
+          invoiceNumber
+          invoiceDate
+          dueDate
+          status
+          title
+          customer {
+            id
+            name
+            email
+          }
+          amountDue {
+            value
+            currency {
+              code
+              symbol
+            }
+          }
+          amountPaid {
+            value
+            currency {
+              code
+              symbol
+            }
+          }
+          total {
+            value
+            currency {
+              code
+              symbol
+            }
+          }
+          currency {
+            code
+            symbol
+          }
+          createdAt
+          modifiedAt
+          lastSentAt
+          lastViewedAt
+        }
+      }
+      pageInfo {
+        currentPage
+        totalPages
+        totalCount
+      }
+    }
+  }
+}
+    `;
+export const GetInvoiceDocument = gql`
+    query GetInvoice($businessId: ID!, $invoiceId: ID!) {
+  business(id: $businessId) {
+    id
+    invoice(id: $invoiceId) {
+      id
+      invoiceNumber
+      invoiceDate
+      dueDate
+      status
+      title
+      subhead
+      poNumber
+      memo
+      footer
+      pdfUrl
+      viewUrl
+      customer {
+        id
+        name
+        firstName
+        lastName
+        email
+        address {
+          addressLine1
+          addressLine2
+          city
+          province {
+            code
+            name
+          }
+          country {
+            code
+            name
+          }
+          postalCode
+        }
+      }
+      items {
+        product {
+          id
+          name
+        }
+        description
+        quantity
+        unitPrice
+        subtotal {
+          value
+          currency {
+            code
+          }
+        }
+        total {
+          value
+          currency {
+            code
+          }
+        }
+        taxes {
+          salesTax {
+            id
+            name
+            abbreviation
+          }
+          amount {
+            value
+            currency {
+              code
+            }
+          }
+        }
+      }
+      discounts {
+        ... on FixedInvoiceDiscount {
+          name
+          amount
+        }
+        ... on PercentageInvoiceDiscount {
+          name
+          percentage
+        }
+      }
+      subtotal {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      taxTotal {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      discountTotal {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      total {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      amountDue {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      amountPaid {
+        value
+        currency {
+          code
+          symbol
+        }
+      }
+      currency {
+        code
+        symbol
+        name
+      }
+      exchangeRate
+      createdAt
+      modifiedAt
+      lastSentAt
+      lastSentVia
+      lastViewedAt
+    }
+  }
+}
+    `;
+export const GetProductsDocument = gql`
+    query GetProducts($businessId: ID!, $page: Int, $pageSize: Int, $sort: [ProductSort!]! = [NAME_ASC], $isSold: Boolean, $isBought: Boolean, $isArchived: Boolean) {
+  business(id: $businessId) {
+    id
+    products(
+      page: $page
+      pageSize: $pageSize
+      sort: $sort
+      isSold: $isSold
+      isBought: $isBought
+      isArchived: $isArchived
+    ) {
+      edges {
+        node {
+          id
+          name
+          description
+          unitPrice
+          isSold
+          isBought
+          isArchived
+          incomeAccount {
+            id
+            name
+          }
+          expenseAccount {
+            id
+            name
+          }
+          defaultSalesTaxes {
+            id
+            name
+            abbreviation
+          }
+          createdAt
+          modifiedAt
+        }
+      }
+      pageInfo {
+        currentPage
+        totalPages
+        totalCount
+      }
+    }
+  }
+}
+    `;
+export const GetProductDocument = gql`
+    query GetProduct($businessId: ID!, $productId: ID!) {
+  business(id: $businessId) {
+    id
+    product(id: $productId) {
+      id
+      name
+      description
+      unitPrice
+      isSold
+      isBought
+      isArchived
+      incomeAccount {
+        id
+        name
+        type {
+          name
+          value
+        }
+        subtype {
+          name
+          value
+        }
+      }
+      expenseAccount {
+        id
+        name
+        type {
+          name
+          value
+        }
+        subtype {
+          name
+          value
+        }
+      }
+      defaultSalesTaxes {
+        id
+        name
+        abbreviation
+        rate
+      }
+      createdAt
+      modifiedAt
+    }
+  }
+}
+    `;
+export const GetSalesTaxesDocument = gql`
+    query GetSalesTaxes($businessId: ID!, $page: Int, $pageSize: Int, $isArchived: Boolean) {
+  business(id: $businessId) {
+    id
+    salesTaxes(page: $page, pageSize: $pageSize, isArchived: $isArchived) {
+      edges {
+        node {
+          id
+          name
+          abbreviation
+          description
+          taxNumber
+          showTaxNumberOnInvoices
+          rate
+          rates {
+            effective
+            rate
+          }
+          isCompound
+          isRecoverable
+          isArchived
+          createdAt
+          modifiedAt
+        }
+      }
+      pageInfo {
+        currentPage
+        totalPages
+        totalCount
+      }
+    }
+  }
+}
+    `;
+export const GetSalesTaxDocument = gql`
+    query GetSalesTax($businessId: ID!, $salesTaxId: ID!) {
+  business(id: $businessId) {
+    id
+    salesTax(id: $salesTaxId) {
+      id
+      name
+      abbreviation
+      description
+      taxNumber
+      showTaxNumberOnInvoices
+      rate
+      rates {
+        effective
+        rate
+      }
+      isCompound
+      isRecoverable
+      isArchived
+      createdAt
+      modifiedAt
+    }
+  }
+}
+    `;
\ No newline at end of file
diff --git a/src/lib/graphql/wave/index.ts b/src/lib/graphql/wave/index.ts
new file mode 100644
index 0000000..02d2e75
--- /dev/null
+++ b/src/lib/graphql/wave/index.ts
@@ -0,0 +1,5 @@
+// Wave GraphQL Client
+export { createWaveServerClient } from './client';
+
+// Re-export all generated types and documents
+export * from './generated';
diff --git a/src/lib/graphql/wave/mutations.ts b/src/lib/graphql/wave/mutations.ts
new file mode 100644
index 0000000..76be8fa
--- /dev/null
+++ b/src/lib/graphql/wave/mutations.ts
@@ -0,0 +1,594 @@
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { createWaveServerClient } from './client';
+import {
+	CreateInvoiceDocument,
+	DeleteInvoiceDocument,
+	SendInvoiceDocument,
+	UpdateInvoiceDocument,
+	ApproveInvoiceDocument,
+	CreateProductDocument,
+	UpdateProductDocument,
+	ArchiveProductDocument,
+	CreateCustomerDocument,
+	UpdateCustomerDocument,
+	DeleteCustomerDocument
+} from './generated';
+
+export interface WaveInvoiceItem {
+	productId: string;
+	description?: string;
+	quantity: string;
+	unitPrice: string;
+}
+
+export interface WaveInvoiceDiscount {
+	discountType: 'PERCENTAGE' | 'FIXED';
+	name?: string;
+	percentage?: string;
+	amount?: string;
+}
+
+export interface CreateWaveInvoiceInput {
+	businessId: string;
+	customerId: string;
+	status?: 'DRAFT' | 'SAVED' | 'SENT';
+	invoiceDate?: string;
+	dueDate?: string;
+	items: WaveInvoiceItem[];
+	discounts?: WaveInvoiceDiscount[];
+	memo?: string;
+	footer?: string;
+}
+
+export interface WaveInvoiceResult {
+	success: boolean;
+	invoice?: {
+		id: string;
+		invoiceNumber: string;
+		status: string;
+		pdfUrl: string;
+		viewUrl: string;
+	};
+	error?: string;
+}
+
+export async function createWaveInvoice(input: CreateWaveInvoiceInput): Promise<WaveInvoiceResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(CreateInvoiceDocument, {
+		input: {
+			businessId: input.businessId,
+			customerId: input.customerId,
+			status: input.status || 'DRAFT',
+			invoiceDate: input.invoiceDate,
+			dueDate: input.dueDate,
+			items: input.items,
+			discounts: input.discounts,
+			memo: input.memo,
+			footer: input.footer
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to create Wave invoice' };
+	}
+
+	const invoiceCreate = result.data?.invoiceCreate;
+
+	if (!invoiceCreate?.didSucceed) {
+		const errorMessages = invoiceCreate?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to create Wave invoice' };
+	}
+
+	return {
+		success: true,
+		invoice: invoiceCreate.invoice
+			? {
+					id: invoiceCreate.invoice.id,
+					invoiceNumber: invoiceCreate.invoice.invoiceNumber,
+					status: invoiceCreate.invoice.status,
+					pdfUrl: invoiceCreate.invoice.pdfUrl,
+					viewUrl: invoiceCreate.invoice.viewUrl
+				}
+			: undefined
+	};
+}
+
+export interface UpdateWaveInvoiceInput {
+	id: string;
+	invoiceDate?: string;
+	dueDate?: string;
+	items?: WaveInvoiceItem[];
+	discounts?: WaveInvoiceDiscount[];
+	memo?: string;
+	footer?: string;
+}
+
+export async function updateWaveInvoice(input: UpdateWaveInvoiceInput): Promise<WaveInvoiceResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(UpdateInvoiceDocument, {
+		input: {
+			id: input.id,
+			invoiceDate: input.invoiceDate,
+			dueDate: input.dueDate,
+			items: input.items,
+			discounts: input.discounts,
+			memo: input.memo,
+			footer: input.footer
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to update Wave invoice' };
+	}
+
+	const invoicePatch = result.data?.invoicePatch;
+
+	if (!invoicePatch?.didSucceed) {
+		const errorMessages = invoicePatch?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to update Wave invoice' };
+	}
+
+	return {
+		success: true,
+		invoice: invoicePatch.invoice
+			? {
+					id: invoicePatch.invoice.id,
+					invoiceNumber: invoicePatch.invoice.invoiceNumber,
+					status: invoicePatch.invoice.status,
+					pdfUrl: '',
+					viewUrl: ''
+				}
+			: undefined
+	};
+}
+
+export interface DeleteWaveInvoiceResult {
+	success: boolean;
+	error?: string;
+}
+
+export async function deleteWaveInvoice(invoiceId: string): Promise<DeleteWaveInvoiceResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(DeleteInvoiceDocument, {
+		input: { invoiceId }
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to delete Wave invoice' };
+	}
+
+	const invoiceDelete = result.data?.invoiceDelete;
+
+	if (!invoiceDelete?.didSucceed) {
+		const errorMessages = invoiceDelete?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to delete Wave invoice' };
+	}
+
+	return { success: true };
+}
+
+export interface ApproveWaveInvoiceResult {
+	success: boolean;
+	error?: string;
+}
+
+export async function approveWaveInvoice(invoiceId: string): Promise<ApproveWaveInvoiceResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(ApproveInvoiceDocument, {
+		input: { invoiceId }
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to approve Wave invoice' };
+	}
+
+	const invoiceApprove = result.data?.invoiceApprove;
+
+	if (!invoiceApprove?.didSucceed) {
+		const errorMessages = invoiceApprove?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to approve Wave invoice' };
+	}
+
+	return { success: true };
+}
+
+export async function sendWaveInvoice(invoiceId: string, to: string[]): Promise<WaveInvoiceResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(SendInvoiceDocument, {
+		input: { invoiceId, to, attachPDF: true }
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to send Wave invoice' };
+	}
+
+	const invoiceSend = result.data?.invoiceSend;
+
+	if (!invoiceSend?.didSucceed) {
+		const errorMessages = invoiceSend?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to send Wave invoice' };
+	}
+
+	return {
+		success: true,
+		invoice: invoiceSend.invoice
+			? {
+					id: invoiceSend.invoice.id,
+					invoiceNumber: invoiceSend.invoice.invoiceNumber,
+					status: invoiceSend.invoice.status,
+					pdfUrl: invoiceSend.invoice.pdfUrl,
+					viewUrl: invoiceSend.invoice.viewUrl
+				}
+			: undefined
+	};
+}
+
+// =====================
+// Product Mutations
+// =====================
+
+export interface CreateWaveProductInput {
+	name: string;
+	unitPrice: number;
+	description?: string;
+	incomeAccountId?: string;
+	expenseAccountId?: string;
+	defaultSalesTaxIds?: string[];
+}
+
+export interface WaveProductResult {
+	success: boolean;
+	product?: {
+		id: string;
+		name: string;
+		description: string | null;
+		unitPrice: number;
+	};
+	error?: string;
+}
+
+export async function createWaveProduct(input: CreateWaveProductInput): Promise<WaveProductResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(CreateProductDocument, {
+		input: {
+			businessId: PUBLIC_WAVE_BUSINESS_ID,
+			name: input.name,
+			unitPrice: input.unitPrice,
+			description: input.description,
+			incomeAccountId: input.incomeAccountId,
+			expenseAccountId: input.expenseAccountId,
+			defaultSalesTaxIds: input.defaultSalesTaxIds
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to create product' };
+	}
+
+	const productCreate = result.data?.productCreate;
+
+	if (!productCreate?.didSucceed) {
+		const errorMessages = productCreate?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to create product' };
+	}
+
+	return {
+		success: true,
+		product: productCreate.product
+			? {
+					id: productCreate.product.id,
+					name: productCreate.product.name,
+					description: productCreate.product.description ?? null,
+					unitPrice: parseFloat(productCreate.product.unitPrice)
+				}
+			: undefined
+	};
+}
+
+export interface UpdateWaveProductInput {
+	id: string;
+	name?: string;
+	unitPrice?: number;
+	description?: string;
+	incomeAccountId?: string;
+	expenseAccountId?: string;
+	defaultSalesTaxIds?: string[];
+}
+
+export async function updateWaveProduct(input: UpdateWaveProductInput): Promise<WaveProductResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(UpdateProductDocument, {
+		input: {
+			id: input.id,
+			name: input.name,
+			unitPrice: input.unitPrice,
+			description: input.description,
+			incomeAccountId: input.incomeAccountId,
+			expenseAccountId: input.expenseAccountId,
+			defaultSalesTaxIds: input.defaultSalesTaxIds
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to update product' };
+	}
+
+	const productPatch = result.data?.productPatch;
+
+	if (!productPatch?.didSucceed) {
+		const errorMessages = productPatch?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to update product' };
+	}
+
+	return {
+		success: true,
+		product: productPatch.product
+			? {
+					id: productPatch.product.id,
+					name: productPatch.product.name,
+					description: productPatch.product.description ?? null,
+					unitPrice: parseFloat(productPatch.product.unitPrice)
+				}
+			: undefined
+	};
+}
+
+export interface ArchiveWaveProductResult {
+	success: boolean;
+	error?: string;
+}
+
+export async function archiveWaveProduct(productId: string): Promise<ArchiveWaveProductResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(ArchiveProductDocument, {
+		input: { id: productId }
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to archive product' };
+	}
+
+	const productArchive = result.data?.productArchive;
+
+	if (!productArchive?.didSucceed) {
+		const errorMessages = productArchive?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to archive product' };
+	}
+
+	return { success: true };
+}
+
+// =====================
+// Customer Mutations
+// =====================
+
+export interface WaveAddressInput {
+	addressLine1?: string;
+	addressLine2?: string;
+	city?: string;
+	provinceCode?: string;
+	countryCode?: string;
+	postalCode?: string;
+}
+
+export interface CreateWaveCustomerInput {
+	name: string;
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	mobile?: string;
+	address?: WaveAddressInput;
+	internalNotes?: string;
+	currency?: string;
+}
+
+export interface WaveCustomerResult {
+	success: boolean;
+	customer?: {
+		id: string;
+		name: string;
+		email: string | null;
+	};
+	error?: string;
+}
+
+export async function createWaveCustomer(
+	input: CreateWaveCustomerInput
+): Promise<WaveCustomerResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(CreateCustomerDocument, {
+		input: {
+			businessId: PUBLIC_WAVE_BUSINESS_ID,
+			name: input.name,
+			firstName: input.firstName,
+			lastName: input.lastName,
+			email: input.email,
+			phone: input.phone,
+			mobile: input.mobile,
+			address: input.address,
+			internalNotes: input.internalNotes,
+			currency: input.currency
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to create customer' };
+	}
+
+	const customerCreate = result.data?.customerCreate;
+
+	if (!customerCreate?.didSucceed) {
+		const errorMessages = customerCreate?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to create customer' };
+	}
+
+	return {
+		success: true,
+		customer: customerCreate.customer
+			? {
+					id: customerCreate.customer.id,
+					name: customerCreate.customer.name,
+					email: customerCreate.customer.email ?? null
+				}
+			: undefined
+	};
+}
+
+export interface UpdateWaveCustomerInput {
+	id: string;
+	name?: string;
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	mobile?: string;
+	address?: WaveAddressInput;
+	internalNotes?: string;
+	currency?: string;
+}
+
+export async function updateWaveCustomer(
+	input: UpdateWaveCustomerInput
+): Promise<WaveCustomerResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(UpdateCustomerDocument, {
+		input: {
+			id: input.id,
+			name: input.name,
+			firstName: input.firstName,
+			lastName: input.lastName,
+			email: input.email,
+			phone: input.phone,
+			mobile: input.mobile,
+			address: input.address,
+			internalNotes: input.internalNotes,
+			currency: input.currency
+		}
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to update customer' };
+	}
+
+	const customerPatch = result.data?.customerPatch;
+
+	if (!customerPatch?.didSucceed) {
+		const errorMessages = customerPatch?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to update customer' };
+	}
+
+	return {
+		success: true,
+		customer: customerPatch.customer
+			? {
+					id: customerPatch.customer.id,
+					name: customerPatch.customer.name,
+					email: customerPatch.customer.email ?? null
+				}
+			: undefined
+	};
+}
+
+export interface DeleteWaveCustomerResult {
+	success: boolean;
+	error?: string;
+}
+
+export async function deleteWaveCustomer(customerId: string): Promise<DeleteWaveCustomerResult> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.mutation(DeleteCustomerDocument, {
+		input: { id: customerId }
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return { success: false, error: result.error.message || 'Failed to delete customer' };
+	}
+
+	const customerDelete = result.data?.customerDelete;
+
+	if (!customerDelete?.didSucceed) {
+		const errorMessages = customerDelete?.inputErrors
+			?.map(
+				(e: { path?: string[] | null; message?: string | null }) =>
+					`${e.path?.join('.')}: ${e.message}`
+			)
+			.join(', ');
+		return { success: false, error: errorMessages || 'Failed to delete customer' };
+	}
+
+	return { success: true };
+}
diff --git a/src/lib/graphql/wave/mutations/accounts.gql b/src/lib/graphql/wave/mutations/accounts.gql
new file mode 100644
index 0000000..44b5d53
--- /dev/null
+++ b/src/lib/graphql/wave/mutations/accounts.gql
@@ -0,0 +1,56 @@
+mutation CreateAccount($input: AccountCreateInput!) {
+	accountCreate(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		account {
+			id
+			name
+			description
+			displayId
+			type {
+				name
+				value
+			}
+			subtype {
+				name
+				value
+			}
+			currency {
+				code
+			}
+		}
+	}
+}
+
+mutation UpdateAccount($input: AccountPatchInput!) {
+	accountPatch(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		account {
+			id
+			name
+			description
+			displayId
+			sequence
+		}
+	}
+}
+
+mutation ArchiveAccount($input: AccountArchiveInput!) {
+	accountArchive(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/mutations/customers.gql b/src/lib/graphql/wave/mutations/customers.gql
new file mode 100644
index 0000000..1779e01
--- /dev/null
+++ b/src/lib/graphql/wave/mutations/customers.gql
@@ -0,0 +1,53 @@
+mutation CreateCustomer($input: CustomerCreateInput!) {
+	customerCreate(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		customer {
+			id
+			name
+			firstName
+			lastName
+			email
+			phone
+			currency {
+				code
+			}
+			createdAt
+		}
+	}
+}
+
+mutation UpdateCustomer($input: CustomerPatchInput!) {
+	customerPatch(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		customer {
+			id
+			name
+			firstName
+			lastName
+			email
+			phone
+			modifiedAt
+		}
+	}
+}
+
+mutation DeleteCustomer($input: CustomerDeleteInput!) {
+	customerDelete(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/mutations/invoices.gql b/src/lib/graphql/wave/mutations/invoices.gql
new file mode 100644
index 0000000..737df9a
--- /dev/null
+++ b/src/lib/graphql/wave/mutations/invoices.gql
@@ -0,0 +1,125 @@
+mutation CreateInvoice($input: InvoiceCreateInput!) {
+	invoiceCreate(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			invoiceNumber
+			invoiceDate
+			dueDate
+			status
+			total {
+				value
+				currency {
+					code
+				}
+			}
+			createdAt
+		}
+	}
+}
+
+mutation UpdateInvoice($input: InvoicePatchInput!) {
+	invoicePatch(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			invoiceNumber
+			invoiceDate
+			dueDate
+			status
+			total {
+				value
+				currency {
+					code
+				}
+			}
+			modifiedAt
+		}
+	}
+}
+
+mutation DeleteInvoice($input: InvoiceDeleteInput!) {
+	invoiceDelete(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+	}
+}
+
+mutation SendInvoice($input: InvoiceSendInput!) {
+	invoiceSend(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			status
+			lastSentAt
+			lastSentVia
+		}
+	}
+}
+
+mutation ApproveInvoice($input: InvoiceApproveInput!) {
+	invoiceApprove(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			status
+		}
+	}
+}
+
+mutation MarkInvoiceSent($input: InvoiceMarkSentInput!) {
+	invoiceMarkSent(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			status
+			lastSentAt
+			lastSentVia
+		}
+	}
+}
+
+mutation CloneInvoice($input: InvoiceCloneInput!) {
+	invoiceClone(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		invoice {
+			id
+			invoiceNumber
+			status
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/mutations/products.gql b/src/lib/graphql/wave/mutations/products.gql
new file mode 100644
index 0000000..e0ab468
--- /dev/null
+++ b/src/lib/graphql/wave/mutations/products.gql
@@ -0,0 +1,54 @@
+mutation CreateProduct($input: ProductCreateInput!) {
+	productCreate(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		product {
+			id
+			name
+			description
+			unitPrice
+			isSold
+			isBought
+			createdAt
+		}
+	}
+}
+
+mutation UpdateProduct($input: ProductPatchInput!) {
+	productPatch(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		product {
+			id
+			name
+			description
+			unitPrice
+			isSold
+			isBought
+			modifiedAt
+		}
+	}
+}
+
+mutation ArchiveProduct($input: ProductArchiveInput!) {
+	productArchive(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		product {
+			id
+			isArchived
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/mutations/salesTaxes.gql b/src/lib/graphql/wave/mutations/salesTaxes.gql
new file mode 100644
index 0000000..3622b7b
--- /dev/null
+++ b/src/lib/graphql/wave/mutations/salesTaxes.gql
@@ -0,0 +1,52 @@
+mutation CreateSalesTax($input: SalesTaxCreateInput!) {
+	salesTaxCreate(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		salesTax {
+			id
+			name
+			abbreviation
+			rate
+			isCompound
+			isRecoverable
+			createdAt
+		}
+	}
+}
+
+mutation UpdateSalesTax($input: SalesTaxPatchInput!) {
+	salesTaxPatch(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		salesTax {
+			id
+			name
+			abbreviation
+			rate
+			modifiedAt
+		}
+	}
+}
+
+mutation ArchiveSalesTax($input: SalesTaxArchiveInput!) {
+	salesTaxArchive(input: $input) {
+		didSucceed
+		inputErrors {
+			path
+			message
+			code
+		}
+		salesTax {
+			id
+			isArchived
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/queries/accounts.gql b/src/lib/graphql/wave/queries/accounts.gql
new file mode 100644
index 0000000..7aed8d2
--- /dev/null
+++ b/src/lib/graphql/wave/queries/accounts.gql
@@ -0,0 +1,105 @@
+query GetAccounts(
+	$businessId: ID!
+	$page: Int
+	$pageSize: Int
+	$types: [AccountTypeValue!]
+	$subtypes: [AccountSubtypeValue!]
+	$isArchived: Boolean
+) {
+	business(id: $businessId) {
+		id
+		accounts(
+			page: $page
+			pageSize: $pageSize
+			types: $types
+			subtypes: $subtypes
+			isArchived: $isArchived
+		) {
+			edges {
+				node {
+					id
+					name
+					description
+					displayId
+					type {
+						name
+						value
+					}
+					subtype {
+						name
+						value
+					}
+					normalBalanceType
+					currency {
+						code
+						symbol
+					}
+					balance
+					balanceInBusinessCurrency
+					isArchived
+				}
+			}
+			pageInfo {
+				currentPage
+				totalPages
+				totalCount
+			}
+		}
+	}
+}
+
+query GetAccount($businessId: ID!, $accountId: ID!) {
+	business(id: $businessId) {
+		id
+		account(id: $accountId) {
+			id
+			name
+			description
+			displayId
+			type {
+				name
+				value
+				normalBalanceType
+			}
+			subtype {
+				name
+				value
+				archivable
+				systemCreated
+				description
+			}
+			normalBalanceType
+			currency {
+				code
+				symbol
+				name
+			}
+			balance
+			balanceInBusinessCurrency
+			isArchived
+			sequence
+		}
+	}
+}
+
+query GetAccountTypes {
+	accountTypes {
+		name
+		value
+		normalBalanceType
+	}
+}
+
+query GetAccountSubtypes {
+	accountSubtypes {
+		name
+		value
+		type {
+			name
+			value
+		}
+		archivable
+		systemCreated
+		description
+	}
+}
diff --git a/src/lib/graphql/wave/queries/business.gql b/src/lib/graphql/wave/queries/business.gql
new file mode 100644
index 0000000..c9af394
--- /dev/null
+++ b/src/lib/graphql/wave/queries/business.gql
@@ -0,0 +1,55 @@
+query GetBusiness($id: ID) {
+	business(id: $id) {
+		id
+		name
+		isPersonal
+		currency {
+			code
+			symbol
+			name
+		}
+		timezone
+		address {
+			addressLine1
+			addressLine2
+			city
+			province {
+				code
+				name
+			}
+			country {
+				code
+				name
+			}
+			postalCode
+		}
+		phone
+		website
+		isArchived
+		createdAt
+		modifiedAt
+		emailSendEnabled
+	}
+}
+
+query ListBusinesses($page: Int, $pageSize: Int) {
+	businesses(page: $page, pageSize: $pageSize) {
+		edges {
+			node {
+				id
+				name
+				isPersonal
+				currency {
+					code
+					symbol
+				}
+				isArchived
+			}
+		}
+		pageInfo {
+			currentPage
+			totalPages
+			totalCount
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/queries/customers.gql b/src/lib/graphql/wave/queries/customers.gql
new file mode 100644
index 0000000..1397f8f
--- /dev/null
+++ b/src/lib/graphql/wave/queries/customers.gql
@@ -0,0 +1,134 @@
+query GetCustomers(
+	$businessId: ID!
+	$page: Int
+	$pageSize: Int
+	$sort: [CustomerSort!]! = [NAME_ASC]
+) {
+	business(id: $businessId) {
+		id
+		customers(page: $page, pageSize: $pageSize, sort: $sort) {
+			edges {
+				node {
+					id
+					name
+					firstName
+					lastName
+					email
+					phone
+					mobile
+					currency {
+						code
+						symbol
+					}
+					address {
+						addressLine1
+						addressLine2
+						city
+						province {
+							code
+							name
+						}
+						country {
+							code
+							name
+						}
+						postalCode
+					}
+					outstandingAmount {
+						value
+						currency {
+							code
+						}
+					}
+					overdueAmount {
+						value
+						currency {
+							code
+						}
+					}
+					createdAt
+					modifiedAt
+					isArchived
+				}
+			}
+			pageInfo {
+				currentPage
+				totalPages
+				totalCount
+			}
+		}
+	}
+}
+
+query GetCustomer($businessId: ID!, $customerId: ID!) {
+	business(id: $businessId) {
+		id
+		customer(id: $customerId) {
+			id
+			name
+			firstName
+			lastName
+			displayId
+			email
+			phone
+			mobile
+			fax
+			tollFree
+			website
+			internalNotes
+			currency {
+				code
+				symbol
+				name
+			}
+			address {
+				addressLine1
+				addressLine2
+				city
+				province {
+					code
+					name
+				}
+				country {
+					code
+					name
+				}
+				postalCode
+			}
+			shippingDetails {
+				name
+				phone
+				instructions
+				address {
+					addressLine1
+					addressLine2
+					city
+					province {
+						code
+						name
+					}
+					country {
+						code
+						name
+					}
+					postalCode
+				}
+			}
+			outstandingAmount {
+				value
+				currency {
+					code
+				}
+			}
+			overdueAmount {
+				value
+				currency {
+					code
+				}
+			}
+			createdAt
+			modifiedAt
+			isArchived
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/queries/invoices.gql b/src/lib/graphql/wave/queries/invoices.gql
new file mode 100644
index 0000000..5242f0d
--- /dev/null
+++ b/src/lib/graphql/wave/queries/invoices.gql
@@ -0,0 +1,207 @@
+query GetInvoices(
+	$businessId: ID!
+	$page: Int
+	$pageSize: Int
+	$sort: [InvoiceSort!]! = [INVOICE_DATE_DESC]
+	$status: InvoiceStatus
+	$customerId: ID
+) {
+	business(id: $businessId) {
+		id
+		invoices(
+			page: $page
+			pageSize: $pageSize
+			sort: $sort
+			status: $status
+			customerId: $customerId
+		) {
+			edges {
+				node {
+					id
+					invoiceNumber
+					invoiceDate
+					dueDate
+					status
+					title
+					customer {
+						id
+						name
+						email
+					}
+					amountDue {
+						value
+						currency {
+							code
+							symbol
+						}
+					}
+					amountPaid {
+						value
+						currency {
+							code
+							symbol
+						}
+					}
+					total {
+						value
+						currency {
+							code
+							symbol
+						}
+					}
+					currency {
+						code
+						symbol
+					}
+					createdAt
+					modifiedAt
+					lastSentAt
+					lastViewedAt
+				}
+			}
+			pageInfo {
+				currentPage
+				totalPages
+				totalCount
+			}
+		}
+	}
+}
+
+query GetInvoice($businessId: ID!, $invoiceId: ID!) {
+	business(id: $businessId) {
+		id
+		invoice(id: $invoiceId) {
+			id
+			invoiceNumber
+			invoiceDate
+			dueDate
+			status
+			title
+			subhead
+			poNumber
+			memo
+			footer
+			pdfUrl
+			viewUrl
+			customer {
+				id
+				name
+				firstName
+				lastName
+				email
+				address {
+					addressLine1
+					addressLine2
+					city
+					province {
+						code
+						name
+					}
+					country {
+						code
+						name
+					}
+					postalCode
+				}
+			}
+			items {
+				product {
+					id
+					name
+				}
+				description
+				quantity
+				unitPrice
+				subtotal {
+					value
+					currency {
+						code
+					}
+				}
+				total {
+					value
+					currency {
+						code
+					}
+				}
+				taxes {
+					salesTax {
+						id
+						name
+						abbreviation
+					}
+					amount {
+						value
+						currency {
+							code
+						}
+					}
+				}
+			}
+			discounts {
+				... on FixedInvoiceDiscount {
+					name
+					amount
+				}
+				... on PercentageInvoiceDiscount {
+					name
+					percentage
+				}
+			}
+			subtotal {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			taxTotal {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			discountTotal {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			total {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			amountDue {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			amountPaid {
+				value
+				currency {
+					code
+					symbol
+				}
+			}
+			currency {
+				code
+				symbol
+				name
+			}
+			exchangeRate
+			createdAt
+			modifiedAt
+			lastSentAt
+			lastSentVia
+			lastViewedAt
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/queries/products.gql b/src/lib/graphql/wave/queries/products.gql
new file mode 100644
index 0000000..a7e813e
--- /dev/null
+++ b/src/lib/graphql/wave/queries/products.gql
@@ -0,0 +1,100 @@
+query GetProducts(
+	$businessId: ID!
+	$page: Int
+	$pageSize: Int
+	$sort: [ProductSort!]! = [NAME_ASC]
+	$isSold: Boolean
+	$isBought: Boolean
+	$isArchived: Boolean
+) {
+	business(id: $businessId) {
+		id
+		products(
+			page: $page
+			pageSize: $pageSize
+			sort: $sort
+			isSold: $isSold
+			isBought: $isBought
+			isArchived: $isArchived
+		) {
+			edges {
+				node {
+					id
+					name
+					description
+					unitPrice
+					isSold
+					isBought
+					isArchived
+					incomeAccount {
+						id
+						name
+					}
+					expenseAccount {
+						id
+						name
+					}
+					defaultSalesTaxes {
+						id
+						name
+						abbreviation
+					}
+					createdAt
+					modifiedAt
+				}
+			}
+			pageInfo {
+				currentPage
+				totalPages
+				totalCount
+			}
+		}
+	}
+}
+
+query GetProduct($businessId: ID!, $productId: ID!) {
+	business(id: $businessId) {
+		id
+		product(id: $productId) {
+			id
+			name
+			description
+			unitPrice
+			isSold
+			isBought
+			isArchived
+			incomeAccount {
+				id
+				name
+				type {
+					name
+					value
+				}
+				subtype {
+					name
+					value
+				}
+			}
+			expenseAccount {
+				id
+				name
+				type {
+					name
+					value
+				}
+				subtype {
+					name
+					value
+				}
+			}
+			defaultSalesTaxes {
+				id
+				name
+				abbreviation
+				rate
+			}
+			createdAt
+			modifiedAt
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/queries/salesTaxes.gql b/src/lib/graphql/wave/queries/salesTaxes.gql
new file mode 100644
index 0000000..197e1a9
--- /dev/null
+++ b/src/lib/graphql/wave/queries/salesTaxes.gql
@@ -0,0 +1,56 @@
+query GetSalesTaxes($businessId: ID!, $page: Int, $pageSize: Int, $isArchived: Boolean) {
+	business(id: $businessId) {
+		id
+		salesTaxes(page: $page, pageSize: $pageSize, isArchived: $isArchived) {
+			edges {
+				node {
+					id
+					name
+					abbreviation
+					description
+					taxNumber
+					showTaxNumberOnInvoices
+					rate
+					rates {
+						effective
+						rate
+					}
+					isCompound
+					isRecoverable
+					isArchived
+					createdAt
+					modifiedAt
+				}
+			}
+			pageInfo {
+				currentPage
+				totalPages
+				totalCount
+			}
+		}
+	}
+}
+
+query GetSalesTax($businessId: ID!, $salesTaxId: ID!) {
+	business(id: $businessId) {
+		id
+		salesTax(id: $salesTaxId) {
+			id
+			name
+			abbreviation
+			description
+			taxNumber
+			showTaxNumberOnInvoices
+			rate
+			rates {
+				effective
+				rate
+			}
+			isCompound
+			isRecoverable
+			isArchived
+			createdAt
+			modifiedAt
+		}
+	}
+}
diff --git a/src/lib/graphql/wave/schema.graphql b/src/lib/graphql/wave/schema.graphql
new file mode 100644
index 0000000..f703177
--- /dev/null
+++ b/src/lib/graphql/wave/schema.graphql
@@ -0,0 +1,4479 @@
+"""Controls the rate of traffic."""
+directive @banLimit(
+  """Number of seconds before limit is reset."""
+  duration: Int! = 60
+
+  """Number of occurrences allowed over duration."""
+  limit: Int! = 60
+) on FIELD_DEFINITION | OBJECT
+
+directive @cost(complexity: Int, multipliers: [String]) on FIELD_DEFINITION | OBJECT
+
+"""Controls the rate of traffic."""
+directive @rateLimit(
+  """Number of seconds before limit is reset."""
+  duration: Int! = 60
+
+  """Number of occurrences allowed over duration."""
+  limit: Int! = 60
+) on FIELD_DEFINITION | OBJECT
+
+directive @schemas(include: [Schema!]!) on ARGUMENT_DEFINITION | ENUM | ENUM_VALUE | FIELD_DEFINITION | INPUT_FIELD_DEFINITION | INPUT_OBJECT | INTERFACE | OBJECT | SCALAR | UNION
+
+"""
+A unique record for each type of asset, liability, equity, income and expense. Used as part of a Chart of Accounts.
+"""
+type Account implements BusinessNode & Node {
+  """The balance of the account as of the current date."""
+  balance: Decimal
+
+  """
+  The balance of the account as of the current date in the business currency.
+  """
+  balanceInBusinessCurrency: Decimal
+
+  """Business that the account belongs to."""
+  business: Business!
+
+  """The classic primary key used internally at Wave."""
+  classicId: String
+
+  """Currency of the account."""
+  currency: Currency!
+
+  """User defined description for the account."""
+  description: String
+
+  """User defined id for the account."""
+  displayId: String
+
+  """Unique identifier for the account."""
+  id: ID!
+
+  """Indicates whether the account is hidden from view by default."""
+  isArchived: Boolean!
+
+  """Name of the account."""
+  name: String!
+
+  """Credit or Debit."""
+  normalBalanceType: AccountNormalBalanceType!
+
+  """
+  Numerically increasing version, each representing a revision of account data.
+  As soon as something modifies an account, its sequence is incremented.
+  """
+  sequence: Int!
+
+  """The account subtype classification based on type."""
+  subtype: AccountSubtype!
+
+  """Account type."""
+  type: AccountType!
+}
+
+"""Input to the `accountArchive` mutation."""
+input AccountArchiveInput {
+  """The unique identifier for the account."""
+  id: ID!
+}
+
+"""Output of the accountArchive mutation."""
+type AccountArchiveOutput {
+  """Indicates whether the account was successfully archived."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Account connection."""
+type AccountConnection {
+  """List of accounts from the Chart of Accounts."""
+  edges: [AccountEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Input to the `accountCreate` mutation."""
+input AccountCreateInput {
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """Currency of the account. Will default to business's currency."""
+  currency: CurrencyCode
+
+  """User defined description for the account."""
+  description: String
+
+  """User defined id for the account."""
+  displayId: String
+
+  """Name of the account."""
+  name: String!
+
+  """The account subtype classification."""
+  subtype: AccountSubtypeValue!
+}
+
+"""Output of the `accountCreate` mutation."""
+type AccountCreateOutput {
+  """Account that was created."""
+  account: Account
+
+  """Indicates whether the account was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Account edge."""
+type AccountEdge {
+  """An account from the Chart of Accounts."""
+  node: Account
+}
+
+"""Account balance type."""
+enum AccountNormalBalanceType {
+  """Credit"""
+  CREDIT
+
+  """Debit"""
+  DEBIT
+}
+
+"""Input to the `accountPatch` mutation."""
+input AccountPatchInput {
+  """
+  User defined description for the account. Use null to unset the current value.
+  """
+  description: String
+
+  """User defined id for the account. Use null to unset the current value."""
+  displayId: String
+
+  """The unique identifier for the account."""
+  id: ID!
+
+  """Name of the account."""
+  name: String
+
+  """
+  The most recent reversion you are aware of. As soon as something modifies an account, its sequence is incremented.
+  """
+  sequence: Int!
+}
+
+"""Output of the accountPatch mutation."""
+type AccountPatchOutput {
+  """Account that was patched."""
+  account: Account
+
+  """Indicates whether the account was successfully patched."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Account subtype."""
+type AccountSubtype {
+  """Indicates if accounts of this subtype can be archived."""
+  archivable: Boolean!
+
+  """Account subtype description."""
+  description: String
+
+  """Account subtype name."""
+  name: String!
+
+  """Indicates if accounts of this subtype is system created accounts."""
+  systemCreated: Boolean!
+
+  """Account type for the subtype."""
+  type: AccountType!
+
+  """Account subtype value."""
+  value: AccountSubtypeValue!
+}
+
+"""Subtypes of accounts, as used in the Chart of Accounts."""
+enum AccountSubtypeValue {
+  """Cash & Bank"""
+  CASH_AND_BANK
+
+  """Cost of Goods Sold"""
+  COST_OF_GOODS_SOLD
+
+  """Credit Card"""
+  CREDIT_CARD
+
+  """Customer Prepayments and Customer Credits"""
+  CUSTOMER_PREPAYMENTS_AND_CREDITS
+
+  """Depreciation and Amortization"""
+  DEPRECIATION_AND_AMORTIZATION
+
+  """Discount"""
+  DISCOUNTS
+
+  """Due For Payroll"""
+  DUE_FOR_PAYROLL
+
+  """Due to You and Other Business Owners"""
+  DUE_TO_YOU_AND_OTHER_OWNERS
+
+  """Expense"""
+  EXPENSE
+
+  """Gain on Foreign Exchange"""
+  GAIN_ON_FOREIGN_EXCHANGE
+
+  """Income"""
+  INCOME
+
+  """Inventory"""
+  INVENTORY
+
+  """Loan and Line of Credit"""
+  LOANS
+
+  """Loss on Foreign Exchange"""
+  LOSS_ON_FOREIGN_EXCHANGE
+
+  """Money in Transit"""
+  MONEY_IN_TRANSIT
+
+  """Business Owner Contribution"""
+  NON_RETAINED_EARNINGS
+
+  """Other Short-Term Asset"""
+  OTHER_CURRENT_ASSETS
+
+  """Other Short-Term Liability"""
+  OTHER_CURRENT_LIABILITY
+
+  """Other Income"""
+  OTHER_INCOME
+
+  """Other Long-Term Asset"""
+  OTHER_LONG_TERM_ASSETS
+
+  """Other Long-Term Liability"""
+  OTHER_LONG_TERM_LIABILITY
+
+  """Payable"""
+  PAYABLE
+
+  """System Payable Bill"""
+  PAYABLE_BILLS
+
+  """System Payable Non-Bill"""
+  PAYABLE_OTHER
+
+  """Payment Processing Fee"""
+  PAYMENT_PROCESSING_FEES
+
+  """Payroll Expense"""
+  PAYROLL_EXPENSES
+
+  """Property, Plant, Equipment"""
+  PROPERTY_PLANT_EQUIPMENT
+
+  """Receivable"""
+  RECEIVABLE
+
+  """System Receivable Invoice"""
+  RECEIVABLE_INVOICES
+
+  """System Receivable Non-Invoice"""
+  RECEIVABLE_OTHER
+
+  """Retained Earnings: Profit and Business Owner Drawing"""
+  RETAINED_EARNINGS
+
+  """Sales Tax on Sales and Purchases"""
+  SALES_TAX
+
+  """System Customer Credits"""
+  SYSTEM_CUSTOMER_CREDITS
+
+  """Transfers"""
+  TRANSFERS
+
+  """Uncategorized Expense"""
+  UNCATEGORIZED_EXPENSE
+
+  """Uncategorized Income"""
+  UNCATEGORIZED_INCOME
+
+  """Unknown Account"""
+  UNKNOWN_ACCOUNT
+
+  """Vendor Prepayments and Vendor Credits"""
+  VENDOR_PREPAYMENTS_AND_CREDITS
+}
+
+"""Account type."""
+type AccountType {
+  """Account type name."""
+  name: String!
+
+  """Normal balance type of the account type"""
+  normalBalanceType: AccountNormalBalanceType!
+
+  """Account type value."""
+  value: AccountTypeValue!
+}
+
+"""Types of accounts, as used in the Chart of Accounts."""
+enum AccountTypeValue {
+  """
+  Represents the different types of economic resources owned or controlled by an entity.
+  """
+  ASSET
+
+  """Represents the residual equity of an entity."""
+  EQUITY
+
+  """Represents the business's expenditures."""
+  EXPENSE
+
+  """Represents the business's earnings."""
+  INCOME
+
+  """Represents the different types of economic obligations of an entity."""
+  LIABILITY
+}
+
+"""An address."""
+type Address {
+  """Address line 1 (Street address/PO Box/Company name)."""
+  addressLine1: String
+
+  """Address line 2 (Apartment/Suite/Unit/Building)."""
+  addressLine2: String
+
+  """City/District/Suburb/Town/Village."""
+  city: String
+
+  """Country."""
+  country: Country
+
+  """Zip/Postal Code."""
+  postalCode: String
+
+  """State/County/Province/Region."""
+  province: Province
+}
+
+"""An address."""
+input AddressInput {
+  """Address line 1 (Street address/PO Box/Company name)."""
+  addressLine1: String
+
+  """Address line 2 (Apartment/Suite/Unit/Building)."""
+  addressLine2: String
+
+  """City/District/Suburb/Town/Village."""
+  city: String
+
+  """Country Code."""
+  countryCode: CountryCode
+
+  """Zip/Postal Code."""
+  postalCode: String
+
+  """
+  State/County/Province/Region Code ([ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2)).
+  """
+  provinceCode: String
+}
+
+"""Balance type that expresses how to change an account."""
+enum BalanceType {
+  """Credit."""
+  CREDIT
+
+  """Debit."""
+  DEBIT
+
+  """
+  Decrease using the inverse of the account's normal balance type. For contra accounts whose subtype is `DISCOUNTS` or `DEPRECIATION_AND_AMORTIZATION`, apply the amount in the account's normal balance type.
+  """
+  DECREASE
+
+  """
+  Increase using the account's normal balance type. For contra accounts whose subtype is `DISCOUNTS` or `DEPRECIATION_AND_AMORTIZATION`, apply the amount in the inverse of the account's normal balance type.
+  """
+  INCREASE
+}
+
+"""An organization and legal entity made up of an association of people."""
+type Business implements Node {
+  """Get an account of the business."""
+  account(
+    """ID of account."""
+    id: ID!
+  ): Account
+
+  """Chart of Accounts for the business."""
+  accounts(
+    """Excludes accounts matching one of these subtypes."""
+    excludedSubtypes: [AccountSubtypeValue!]
+
+    """Find accounts matching isArchived. Use null to not filter."""
+    isArchived: Boolean = false
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+
+    """Find accounts matching one of these subtypes."""
+    subtypes: [AccountSubtypeValue!]
+
+    """Find accounts matching one of these types."""
+    types: [AccountTypeValue!]
+  ): AccountConnection
+
+  """The address of the business."""
+  address: Address
+
+  """When the business was created."""
+  createdAt: DateTime!
+
+  """The currency of the business."""
+  currency: Currency!
+
+  """Get a customer of the business."""
+  customer(
+    """ID of customer."""
+    id: ID!
+  ): Customer
+
+  """List of customers for the business."""
+  customers(
+    """Find customers matching an email address."""
+    email: String
+
+    """Find customers that were modified after this date."""
+    modifiedAtAfter: DateTime
+
+    """Find customers that were modified before this date."""
+    modifiedAtBefore: DateTime
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+
+    """Order result by specified options."""
+    sort: [CustomerSort!]! = [CREATED_AT_DESC]
+  ): CustomerConnection
+
+  """
+  Indicates whether Wave email sending features, such as sending invoices, are enabled for this business
+  """
+  emailSendEnabled: Boolean!
+
+  """The fax number of the business."""
+  fax: String
+
+  """The unique identifier for the business."""
+  id: ID!
+
+  """Get an invoice of the business."""
+  invoice(
+    """ID of invoice."""
+    id: ID!
+  ): Invoice
+
+  """Invoice and estimate settings for the business."""
+  invoiceEstimateSettings: InvoiceEstimateSettings!
+
+  """List of invoices for the business."""
+  invoices(
+    """Find invoices that have this exact amount due."""
+    amountDue: Decimal
+
+    """Find invoices in a currency."""
+    currency: CurrencyCode
+
+    """Find invoices for a customer."""
+    customerId: ID
+
+    """Find invoices dated before or on this date."""
+    invoiceDateEnd: Date
+
+    """Find invoices dated on or after this date."""
+    invoiceDateStart: Date
+
+    """
+    Find invoices with invoice number containing this string. Note that a query for `12` would find invoices with numbers `12`, `112`, `120`, `121`, `122`, etc.
+    """
+    invoiceNumber: String
+
+    """Find invoices that were modified after this date."""
+    modifiedAtAfter: DateTime
+
+    """Find invoices that were modified before this date."""
+    modifiedAtBefore: DateTime
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+
+    """Order result by specified options."""
+    sort: [InvoiceSort!]! = [CREATED_AT_DESC]
+
+    """Find invoices that were created from a particular source."""
+    sourceId: ID
+
+    """Find invoices by status."""
+    status: InvoiceStatus
+  ): InvoiceConnection
+
+  """Is the business hidden from view by default."""
+  isArchived: Boolean!
+
+  """Does business use classic accounting system."""
+  isClassicAccounting: Boolean! @deprecated(reason: "Classic Accounting is deprecated")
+
+  """Does business use classic invoicing system."""
+  isClassicInvoicing: Boolean! @deprecated(reason: "Classic Invoicing is deprecated")
+
+  """
+  Is the business a personal one with limited functionality compared to regular businesses.
+  """
+  isPersonal: Boolean!
+
+  """The mobile/cell number of the business."""
+  mobile: String
+
+  """When the business was last modified."""
+  modifiedAt: DateTime!
+
+  """The name of the business."""
+  name: String!
+
+  """The organization type of the business."""
+  organizationalType: OrganizationalType
+
+  """The phone number of the business."""
+  phone: String
+
+  """Get a product (or service) of the business."""
+  product(
+    """ID of product."""
+    id: ID!
+  ): Product
+
+  """List of products (and services) for the business."""
+  products(
+    """Find products matching isArchived. Use null to not filter."""
+    isArchived: Boolean = false
+
+    """Find products bought by the business."""
+    isBought: Boolean
+
+    """Find products sold by the business."""
+    isSold: Boolean
+
+    """Find products that were modified after this date."""
+    modifiedAtAfter: DateTime
+
+    """Find products that were modified before this date."""
+    modifiedAtBefore: DateTime
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+
+    """Order result by specified options."""
+    sort: [ProductSort!]! = [CREATED_AT_DESC]
+  ): ProductConnection
+
+  """Get a sales tax of the business."""
+  salesTax(
+    """ID of sales tax."""
+    id: ID!
+  ): SalesTax
+
+  """List of sales taxes for the business."""
+  salesTaxes(
+    """Find sales taxes matching isArchived. Use null to not filter."""
+    isArchived: Boolean = false
+
+    """Find sales taxes that were modified after this date."""
+    modifiedAtAfter: DateTime
+
+    """Find sales taxes that were modified before this date."""
+    modifiedAtBefore: DateTime
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+  ): SalesTaxConnection
+
+  """The subtype of the business."""
+  subtype: BusinessSubtype
+
+  """The timezone of the business."""
+  timezone: String
+
+  """The toll free number of the business."""
+  tollFree: String
+
+  """The type of the business."""
+  type: BusinessType
+
+  """Get a vendor of the business."""
+  vendor(
+    """Id of vendor"""
+    id: ID!
+  ): Vendor
+
+  """List of vendors for the business."""
+  vendors(
+    """Find vendors matching an email address."""
+    email: String
+
+    """Find vendors that were modified after this date."""
+    modifiedAtAfter: DateTime
+
+    """Find vendors that were modified before this date."""
+    modifiedAtBefore: DateTime
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 45
+  ): VendorConnection
+
+  """The website of the business."""
+  website: String
+}
+
+"""Business connection."""
+type BusinessConnection {
+  """List of businesses."""
+  edges: [BusinessEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Business edge."""
+type BusinessEdge {
+  """A business."""
+  node: Business
+}
+
+"""An object belonging to a `Business` with an `ID`."""
+interface BusinessNode {
+  """Business that the node belongs to."""
+  business: Business!
+
+  """ID of the object."""
+  id: ID!
+}
+
+"""Granular area of focus of a business."""
+type BusinessSubtype {
+  """The description of the business subtype in human-friendly form."""
+  name: String!
+
+  """The enum value of the business subtype."""
+  value: BusinessSubtypeValue!
+}
+
+"""Granular area of focus of a business."""
+enum BusinessSubtypeValue {
+  """Advertising, Public Relations"""
+  ADVERTISING_PUBLIC_RELATIONS
+
+  """Agriculture, Ranching and Farming"""
+  AGRICULTURE_RANCHING_FARMING
+
+  """Actor"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__ACTOR
+
+  """Audio/Visual Production"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__AUDIO_VISUAL_PRODUCTION
+
+  """Craftsperson"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__CRAFTSPERSON
+
+  """Dancer, Choreographer"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__DANCER_CHOREOG
+
+  """Musician"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__MUSICIAN
+
+  """Other Creative"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__OTHER
+
+  """Performing Arts (acting, music, dance)"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__PERFORMING_ARTS_ACTING_MUSIC_DANCE
+
+  """Photographer"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__PHOTOGRAPHER
+
+  """Visual Artist"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE__VISUAL_ARTIST
+
+  """Automotive Repair & Sales"""
+  AUTOMOTIVE_SALES_AND_REPAIR
+
+  """Church, Religious Organization"""
+  CHURCH_RELIGIOUS_ORGANIZATION
+
+  """Contractor"""
+  CONSTRUCTION_HOME_IMPROVEMENT__CONTRACTOR
+
+  """Engineer"""
+  CONSTRUCTION_HOME_IMPROVEMENT__ENGINEER
+
+  """Home Inspector"""
+  CONSTRUCTION_HOME_IMPROVEMENT__HOME_INSPECTOR
+
+  """Trade"""
+  CONSTRUCTION_HOME_IMPROVEMENT__OTHER_TRADES
+
+  """Accountant, Bookkeeper"""
+  CONSULTANTS_PROFESSIONALS__ACCOUNTANTS_BOOKKEEPERS
+
+  """Communications, Marketing, PR"""
+  CONSULTANTS_PROFESSIONALS__COMMUNICATIONS
+
+  """Executive Coach"""
+  CONSULTANTS_PROFESSIONALS__EXECUTIVE_COACH
+
+  """HR, Recruitment, Staffing"""
+  CONSULTANTS_PROFESSIONALS__HR_RECRUITMENT_STAFFING
+
+  """IT, Technical"""
+  CONSULTANTS_PROFESSIONALS__IT_TECHNICAL
+
+  """Other Consultant"""
+  CONSULTANTS_PROFESSIONALS__OTHER
+
+  """Sales"""
+  CONSULTANTS_PROFESSIONALS__SALES
+
+  """Design, Architecture, Engineering"""
+  DESIGN_ARCHITECTURE_ENGINEERING
+
+  """Other Financial Service"""
+  FINANCIAL_SERVICES
+
+  """Salon, Spa"""
+  HAIR_SPA_AESTHETICS__HAIR_SALON
+
+  """Massage"""
+  HAIR_SPA_AESTHETICS__MASSAGE
+
+  """Nails, Skin, Aesthetics"""
+  HAIR_SPA_AESTHETICS__NAIL_SKIN_AESTHETICS
+
+  """Other Aesthetics/Spa"""
+  HAIR_SPA_AESTHETICS__OTHER
+
+  """Insurance Agency, Broker"""
+  INSURANCE_AGENCY_BROKER
+
+  """Landlord"""
+  LANDLORD_PROPERTY_MANAGER__LANDLORD
+
+  """Property Manager"""
+  LANDLORD_PROPERTY_MANAGER__PROPERTY_MANAGER
+
+  """Lawn Care, Landscaping"""
+  LAWN_CARE_LANDSCAPING
+
+  """Legal Services"""
+  LEGAL_SERVICES
+
+  """Lodging, Hotel, Motel"""
+  LODGING_HOTEL_MOTEL
+
+  """Manufacturing Representative, Agent"""
+  MANUFACTURER_REPRESENTATIVE_AGENT
+
+  """Chiropractor"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__CHIROPRACTOR
+
+  """Dentist"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__DENTIST
+
+  """Fitness"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__FITNESS
+
+  """Massage Therapist"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__MASSAGE_THERAPIST
+
+  """Mental Health"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__MENTAL_HEALTH
+
+  """Nutrition"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__NUTRITION
+
+  """Occupational Therapist"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__OCCUP_THERAPIST
+
+  """Other Health"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__OTHER
+
+  """Physical Therapist"""
+  MEDICAL_DENTAL_HEALTH_SERVICE__PHYSICAL_THERAPIST
+
+  """Association"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__ASSOCIATION
+
+  """Charity"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__CHARITABLE
+
+  """Club"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__CLUB
+
+  """Condo"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__CONDO
+
+  """Other Non-Profit"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__OTHER
+
+  """Parent Booster USA"""
+  NONPROFIT_ASSOCIATIONS_GROUPS__PARENT_BOOSTER
+
+  """Other (please specify)"""
+  OTHER__OTHER_PLEASE_SPECIFY
+
+  """Manufacturer"""
+  PRODUCT_PROVIDER__MANUFACTURER
+
+  """Manufacturer and Vendor"""
+  PRODUCT_PROVIDER__MANUFACTURER_AND_VENDOR
+
+  """Other Product-based Business"""
+  PRODUCT_PROVIDER__OTHER
+
+  """Vendor"""
+  PRODUCT_PROVIDER__VENDOR
+
+  """Real Estate Agent"""
+  REAL_ESTATE_SALES__AGENT
+
+  """Real Estate Broker"""
+  REAL_ESTATE_SALES__BROKER
+
+  """Other Real Estate"""
+  REAL_ESTATE_SALES__OTHER
+
+  """Real Estate Rental"""
+  RENTAL
+
+  """Repairs/Maintenance"""
+  REPAIR_AND_MAINTENANCE
+
+  """Restaurant, Caterer, Bar"""
+  RESTAURANT_CATERER_BAR
+
+  """eBay Resellers"""
+  RETAILERS_AND_RESELLERS__EBAY
+
+  """Etsy Vendors"""
+  RETAILERS_AND_RESELLERS__ETSY
+
+  """Non-Store Retailers"""
+  RETAILERS_AND_RESELLERS__NON_STORE_RETAILER
+
+  """Other Retailers"""
+  RETAILERS_AND_RESELLERS__OTHER
+
+  """Store Retailers"""
+  RETAILERS_AND_RESELLERS__STORE_RETAILER
+
+  """Sales: Independent Agent"""
+  SALES_INDEPENDENT_AGENT
+
+  """Cleaning, Janitorial Services"""
+  SERVICE_PROVIDER__CLEANING_JANITORIAL_SERVICES
+
+  """Customer Service/Support"""
+  SERVICE_PROVIDER__CUSTOMER_SERVICE_SUPPORT
+
+  """Household Employer"""
+  SERVICE_PROVIDER__DOMESTIC_CAREGIVER_EMPLOYER
+
+  """Fitness"""
+  SERVICE_PROVIDER__FITNESS
+
+  """Office Admin/Support"""
+  SERVICE_PROVIDER__OFFICE_ADMIN_SUPPORT
+
+  """Other Service-based Business"""
+  SERVICE_PROVIDER__OTHER
+
+  """Personal Care"""
+  SERVICE_PROVIDER__PERSONAL_CARE
+
+  """Telemarketing"""
+  SERVICE_PROVIDER__TELEMARKETING
+
+  """Transcription"""
+  SERVICE_PROVIDER__TRANSCRIPTION
+
+  """Transportation, Trucking, Deliver"""
+  TRANSPORTATION_TRUCKING_DELIVERY
+
+  """Designer"""
+  WEB_MEDIA_FREELANCER__DESIGNER
+
+  """Marketing, Social Media"""
+  WEB_MEDIA_FREELANCER__MARKETING_SOCIAL_MEDIA
+
+  """Other Media/Tech"""
+  WEB_MEDIA_FREELANCER__OTHER
+
+  """Programmer"""
+  WEB_MEDIA_FREELANCER__PROGRAMMER
+
+  """SEO"""
+  WEB_MEDIA_FREELANCER__SEO
+
+  """Writer"""
+  WEB_MEDIA_FREELANCER__WRITER
+
+  """Wholesale Distribution and Sales"""
+  WHOLESALE_DISTRIBUTION_SALES
+}
+
+"""Area of focus of a business."""
+type BusinessType {
+  """The description of the business type in human-friendly form."""
+  name: String!
+
+  """The enum value of the business type."""
+  value: BusinessTypeValue!
+}
+
+"""Area of focus of a business."""
+enum BusinessTypeValue {
+  """Artists, Photographers & Creative Types"""
+  ARTISTS_PHOTOGRAPHERS_CREATIVE
+
+  """Consultants & Professionals"""
+  CONSULTANTS_PROFESSIONALS
+
+  """Financial Services"""
+  FINANCE_INSURANCE
+
+  """Hair, Spa & Aesthetics"""
+  HAIR_SPA_AESTHETICS
+
+  """Medical, Dental, Health"""
+  MEDICAL_DENTAL_HEALTH_SERVICE
+
+  """Non-profits, Associations & Groups"""
+  NONPROFIT_ASSOCIATIONS_GROUPS
+
+  """Other (please specify)"""
+  OTHER
+
+  """General: I make or sell a PRODUCT"""
+  PRODUCT_PROVIDER
+
+  """Real Estate, Construction & Home Improvement"""
+  REALESTATE_HOME
+
+  """Retailers, Resellers & Sales"""
+  RETAILERS_AND_RESELLERS
+
+  """General: I provide a SERVICE"""
+  SERVICE_PROVIDER
+
+  """Web, Tech & Media"""
+  WEB_MEDIA_FREELANCER
+}
+
+"""A country."""
+type Country {
+  """Country code."""
+  code: CountryCode!
+
+  """Default currency of the country."""
+  currency: Currency!
+
+  """Plain-language representation."""
+  name: String!
+
+  """Name of the country with the appropriate article."""
+  nameWithArticle: String!
+
+  """List of principal subdivisions."""
+  provinces: [Province!]!
+}
+
+"""
+Country codes ([ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).
+"""
+enum CountryCode {
+  """Andorra"""
+  AD
+
+  """United Arab Emirates"""
+  AE
+
+  """Afghanistan"""
+  AF
+
+  """Antigua and Barbuda"""
+  AG
+
+  """Anguilla"""
+  AI
+
+  """Albania"""
+  AL
+
+  """Armenia"""
+  AM
+
+  """Angola"""
+  AO
+
+  """Antarctica"""
+  AQ
+
+  """Argentina"""
+  AR
+
+  """American Samoa"""
+  AS
+
+  """Austria"""
+  AT
+
+  """Australia"""
+  AU
+
+  """Aruba"""
+  AW
+
+  """Åland Islands"""
+  AX
+
+  """Azerbaijan"""
+  AZ
+
+  """Bosnia and Herzegovina"""
+  BA
+
+  """Barbados"""
+  BB
+
+  """Bangladesh"""
+  BD
+
+  """Belgium"""
+  BE
+
+  """Burkina Faso"""
+  BF
+
+  """Bulgaria"""
+  BG
+
+  """Bahrain"""
+  BH
+
+  """Burundi"""
+  BI
+
+  """Benin"""
+  BJ
+
+  """Saint Barthélemy"""
+  BL
+
+  """Bermuda"""
+  BM
+
+  """Brunei Darussalam"""
+  BN
+
+  """Bolivia, Plurinational State of"""
+  BO
+
+  """Bonaire, Sint Eustatius and Saba"""
+  BQ
+
+  """Brazil"""
+  BR
+
+  """Bahamas"""
+  BS
+
+  """Bhutan"""
+  BT
+
+  """Bouvet Island"""
+  BV
+
+  """Botswana"""
+  BW
+
+  """Belarus"""
+  BY
+
+  """Belize"""
+  BZ
+
+  """Canada"""
+  CA
+
+  """Cocos (Keeling) Islands"""
+  CC
+
+  """Congo, The Democratic Republic of the"""
+  CD
+
+  """Central African Republic"""
+  CF
+
+  """Congo"""
+  CG
+
+  """Switzerland"""
+  CH
+
+  """Côte d'Ivoire"""
+  CI
+
+  """Cook Islands"""
+  CK
+
+  """Chile"""
+  CL
+
+  """Cameroon"""
+  CM
+
+  """China"""
+  CN
+
+  """Colombia"""
+  CO
+
+  """Costa Rica"""
+  CR
+
+  """Cuba"""
+  CU
+
+  """Cape Verde"""
+  CV
+
+  """Curaçao"""
+  CW
+
+  """Christmas Island"""
+  CX
+
+  """Cyprus"""
+  CY
+
+  """Czech Republic"""
+  CZ
+
+  """Germany"""
+  DE
+
+  """Djibouti"""
+  DJ
+
+  """Denmark"""
+  DK
+
+  """Dominica"""
+  DM
+
+  """Dominican Republic"""
+  DO
+
+  """Algeria"""
+  DZ
+
+  """Ecuador"""
+  EC
+
+  """Estonia"""
+  EE
+
+  """Egypt"""
+  EG
+
+  """Western Sahara"""
+  EH
+
+  """Eritrea"""
+  ER
+
+  """Spain"""
+  ES
+
+  """Ethiopia"""
+  ET
+
+  """Finland"""
+  FI
+
+  """Fiji"""
+  FJ
+
+  """Falkland Islands"""
+  FK
+
+  """Micronesia, Federated States of"""
+  FM
+
+  """Faroe Islands"""
+  FO
+
+  """France"""
+  FR
+
+  """Gabon"""
+  GA
+
+  """United Kingdom"""
+  GB
+
+  """Grenada"""
+  GD
+
+  """Georgia"""
+  GE
+
+  """French Guiana"""
+  GF
+
+  """Guernsey"""
+  GG
+
+  """Ghana"""
+  GH
+
+  """Gibraltar"""
+  GI
+
+  """Greenland"""
+  GL
+
+  """Gambia"""
+  GM
+
+  """Guinea"""
+  GN
+
+  """Guadeloupe"""
+  GP
+
+  """Equatorial Guinea"""
+  GQ
+
+  """Greece"""
+  GR
+
+  """South Georgia and the South Sandwich Islands"""
+  GS
+
+  """Guatemala"""
+  GT
+
+  """Guam"""
+  GU
+
+  """Guinea-Bissau"""
+  GW
+
+  """Guyana"""
+  GY
+
+  """Hong Kong"""
+  HK
+
+  """Heard Island and McDonald Islands"""
+  HM
+
+  """Honduras"""
+  HN
+
+  """Croatia"""
+  HR
+
+  """Haiti"""
+  HT
+
+  """Hungary"""
+  HU
+
+  """Indonesia"""
+  ID
+
+  """Ireland"""
+  IE
+
+  """Israel"""
+  IL
+
+  """Isle of Man"""
+  IM
+
+  """India"""
+  IN
+
+  """British Indian Ocean Territory"""
+  IO
+
+  """Iraq"""
+  IQ
+
+  """Iran"""
+  IR
+
+  """Iceland"""
+  IS
+
+  """Italy"""
+  IT
+
+  """Jersey"""
+  JE
+
+  """Jamaica"""
+  JM
+
+  """Jordan"""
+  JO
+
+  """Japan"""
+  JP
+
+  """Kenya"""
+  KE
+
+  """Kyrgyzstan"""
+  KG
+
+  """Cambodia"""
+  KH
+
+  """Kiribati"""
+  KI
+
+  """Comoros"""
+  KM
+
+  """Saint Kitts and Nevis"""
+  KN
+
+  """Korea, Democratic People's Republic of"""
+  KP
+
+  """Korea, Republic of"""
+  KR
+
+  """Kuwait"""
+  KW
+
+  """Cayman Islands"""
+  KY
+
+  """Kazakhstan"""
+  KZ
+
+  """Lao People's Democratic Republic"""
+  LA
+
+  """Lebanon"""
+  LB
+
+  """Saint Lucia"""
+  LC
+
+  """Liechtenstein"""
+  LI
+
+  """Sri Lanka"""
+  LK
+
+  """Liberia"""
+  LR
+
+  """Lesotho"""
+  LS
+
+  """Lithuania"""
+  LT
+
+  """Luxembourg"""
+  LU
+
+  """Latvia"""
+  LV
+
+  """Libya"""
+  LY
+
+  """Morocco"""
+  MA
+
+  """Monaco"""
+  MC
+
+  """Moldova, Republic of"""
+  MD
+
+  """Montenegro"""
+  ME
+
+  """Saint Martin"""
+  MF
+
+  """Madagascar"""
+  MG
+
+  """Marshall Islands"""
+  MH
+
+  """North Macedonia"""
+  MK
+
+  """Mali"""
+  ML
+
+  """Myanmar"""
+  MM
+
+  """Mongolia"""
+  MN
+
+  """Macao"""
+  MO
+
+  """Northern Mariana Islands"""
+  MP
+
+  """Martinique"""
+  MQ
+
+  """Mauritania"""
+  MR
+
+  """Montserrat"""
+  MS
+
+  """Malta"""
+  MT
+
+  """Mauritius"""
+  MU
+
+  """Maldives"""
+  MV
+
+  """Malawi"""
+  MW
+
+  """Mexico"""
+  MX
+
+  """Malaysia"""
+  MY
+
+  """Mozambique"""
+  MZ
+
+  """Namibia"""
+  NA
+
+  """New Caledonia"""
+  NC
+
+  """Niger"""
+  NE
+
+  """Norfolk Island"""
+  NF
+
+  """Nigeria"""
+  NG
+
+  """Nicaragua"""
+  NI
+
+  """Netherlands"""
+  NL
+
+  """Norway"""
+  NO
+
+  """Nepal"""
+  NP
+
+  """Nauru"""
+  NR
+
+  """Niue"""
+  NU
+
+  """New Zealand"""
+  NZ
+
+  """Oman"""
+  OM
+
+  """Panama"""
+  PA
+
+  """Peru"""
+  PE
+
+  """French Polynesia"""
+  PF
+
+  """Papua New Guinea"""
+  PG
+
+  """Philippines"""
+  PH
+
+  """Pakistan"""
+  PK
+
+  """Poland"""
+  PL
+
+  """Saint Pierre and Miquelon"""
+  PM
+
+  """Pitcairn"""
+  PN
+
+  """Puerto Rico"""
+  PR
+
+  """Palestine"""
+  PS
+
+  """Portugal"""
+  PT
+
+  """Palau"""
+  PW
+
+  """Paraguay"""
+  PY
+
+  """Qatar"""
+  QA
+
+  """Réunion"""
+  RE
+
+  """Romania"""
+  RO
+
+  """Serbia"""
+  RS
+
+  """Russian Federation"""
+  RU
+
+  """Rwanda"""
+  RW
+
+  """Saudi Arabia"""
+  SA
+
+  """Solomon Islands"""
+  SB
+
+  """Seychelles"""
+  SC
+
+  """Sudan"""
+  SD
+
+  """Sweden"""
+  SE
+
+  """Singapore"""
+  SG
+
+  """Saint Helena, Ascension and Tristan da Cunha"""
+  SH
+
+  """Slovenia"""
+  SI
+
+  """Svalbard and Jan Mayen"""
+  SJ
+
+  """Slovakia"""
+  SK
+
+  """Sierra Leone"""
+  SL
+
+  """San Marino"""
+  SM
+
+  """Senegal"""
+  SN
+
+  """Somalia"""
+  SO
+
+  """Suriname"""
+  SR
+
+  """South Sudan"""
+  SS
+
+  """Sao Tome and Principe"""
+  ST
+
+  """El Salvador"""
+  SV
+
+  """Sint Maarten"""
+  SX
+
+  """Syria"""
+  SY
+
+  """Eswatini"""
+  SZ
+
+  """Turks and Caicos Islands"""
+  TC
+
+  """Chad"""
+  TD
+
+  """French Southern Territories"""
+  TF
+
+  """Togo"""
+  TG
+
+  """Thailand"""
+  TH
+
+  """Tajikistan"""
+  TJ
+
+  """Tokelau"""
+  TK
+
+  """Timor-Leste"""
+  TL
+
+  """Turkmenistan"""
+  TM
+
+  """Tunisia"""
+  TN
+
+  """Tonga"""
+  TO
+
+  """Turkey"""
+  TR
+
+  """Trinidad and Tobago"""
+  TT
+
+  """Tuvalu"""
+  TV
+
+  """Taiwan"""
+  TW
+
+  """Tanzania, United Republic of"""
+  TZ
+
+  """Ukraine"""
+  UA
+
+  """Uganda"""
+  UG
+
+  """United States Minor Outlying Islands"""
+  UM
+
+  """United States"""
+  US
+
+  """Uruguay"""
+  UY
+
+  """Uzbekistan"""
+  UZ
+
+  """Holy See"""
+  VA
+
+  """Saint Vincent and the Grenadines"""
+  VC
+
+  """Venezuela, Bolivarian Republic of"""
+  VE
+
+  """Virgin Islands (British)"""
+  VG
+
+  """Virgin Islands (U.S)"""
+  VI
+
+  """Viet Nam"""
+  VN
+
+  """Vanuatu"""
+  VU
+
+  """Wallis and Futuna"""
+  WF
+
+  """Samoa"""
+  WS
+
+  """Yemen"""
+  YE
+
+  """Mayotte"""
+  YT
+
+  """South Africa"""
+  ZA
+
+  """Zambia"""
+  ZM
+
+  """Zimbabwe"""
+  ZW
+}
+
+"""A medium of exchange in common use."""
+type Currency {
+  """Currency code."""
+  code: CurrencyCode!
+
+  """
+  Expresses the relationship between a major currency unit and its minor currency unit. The number of digits found to the right of the decimal place to represent the fractional part of this currency (assumes a base of 10).
+  """
+  exponent: Int!
+
+  """Plain-language representation."""
+  name: String!
+
+  """Plural version of currency name."""
+  plural: String!
+
+  """Symbol used to denote that a number is a monetary value."""
+  symbol: String!
+}
+
+"""Currency codes based on ISO 4217."""
+enum CurrencyCode {
+  """UAE dirham"""
+  AED
+
+  """Afghani"""
+  AFN
+
+  """Lek"""
+  ALL
+
+  """Armenian dram"""
+  AMD
+
+  """Netherlands Antillean Guilder"""
+  ANG
+
+  """Kwanza"""
+  AOA
+
+  """Argentinian peso"""
+  ARS
+
+  """Australian dollar"""
+  AUD
+
+  """Aruban Guilder"""
+  AWG
+
+  """New Manat"""
+  AZN
+
+  """Convertible Marks"""
+  BAM
+
+  """Barbados dollar"""
+  BBD
+
+  """Taka"""
+  BDT
+
+  """Lev"""
+  BGN
+
+  """Bahraini dinar"""
+  BHD
+
+  """Burundi franc"""
+  BIF
+
+  """Bermuda dollar"""
+  BMD
+
+  """Brunei dollar"""
+  BND
+
+  """Boliviano"""
+  BOB
+
+  """Real"""
+  BRL
+
+  """Bahamian dollar"""
+  BSD
+
+  """Ngultrum"""
+  BTN
+
+  """Pula"""
+  BWP
+
+  """Belarussian rouble"""
+  BYR
+
+  """Belize dollar"""
+  BZD
+
+  """Canadian dollar"""
+  CAD
+
+  """Franc congolais"""
+  CDF
+
+  """Swiss franc"""
+  CHF
+
+  """Chilean peso"""
+  CLP
+
+  """Ren-Min-Bi yuan"""
+  CNY
+
+  """Colombian peso"""
+  COP
+
+  """Costa Rican colon"""
+  CRC
+
+  """Cuban peso"""
+  CUP
+
+  """Cape Verde escudo"""
+  CVE
+
+  """Czech koruna"""
+  CZK
+
+  """Djibouti franc"""
+  DJF
+
+  """Danish krone"""
+  DKK
+
+  """Dominican peso"""
+  DOP
+
+  """Algerian dinar"""
+  DZD
+
+  """Estonian kroon"""
+  EEK
+
+  """Egyptian pound"""
+  EGP
+
+  """Nakfa"""
+  ERN
+
+  """Ethiopian birr"""
+  ETB
+
+  """Euro"""
+  EUR
+
+  """Fiji dollar"""
+  FJD
+
+  """Falkland Islands (Malvinas) Pound"""
+  FKP
+
+  """Pound sterling"""
+  GBP
+
+  """Lari"""
+  GEL
+
+  """Ghana Cedi"""
+  GHS
+
+  """Gibraltar pound"""
+  GIP
+
+  """Dalasi"""
+  GMD
+
+  """Guinean franc"""
+  GNF
+
+  """Quetzal"""
+  GTQ
+
+  """Guinean bissau Peso"""
+  GWP
+
+  """Guyana dollar"""
+  GYD
+
+  """Hong Kong dollar"""
+  HKD
+
+  """Lempira"""
+  HNL
+
+  """Kuna"""
+  HRK
+
+  """Haitian gourde"""
+  HTG
+
+  """Forint"""
+  HUF
+
+  """Rupiah"""
+  IDR
+
+  """New Israeli sheqel"""
+  ILS
+
+  """Indian rupee"""
+  INR
+
+  """Iraqi dinar"""
+  IQD
+
+  """Iranian rial"""
+  IRR
+
+  """Icelandic Krona"""
+  ISK
+
+  """Jamaican dollar"""
+  JMD
+
+  """Jordanian dinar"""
+  JOD
+
+  """Yen"""
+  JPY
+
+  """Kenyan shilling"""
+  KES
+
+  """Kyrgyz Som"""
+  KGS
+
+  """Riel"""
+  KHR
+
+  """Comoro franc"""
+  KMF
+
+  """Won"""
+  KRW
+
+  """Kuwaiti dinar"""
+  KWD
+
+  """Cayman Islands dollar"""
+  KYD
+
+  """Tenge"""
+  KZT
+
+  """Kip"""
+  LAK
+
+  """Lebanese pound"""
+  LBP
+
+  """Sri Lankan rupee"""
+  LKR
+
+  """Liberian dollar"""
+  LRD
+
+  """Loti"""
+  LSL
+
+  """Lithuanian litus"""
+  LTL
+
+  """Latvian lats"""
+  LVL
+
+  """Libyan dinar"""
+  LYD
+
+  """Moroccan dirham"""
+  MAD
+
+  """Moldovan leu"""
+  MDL
+
+  """Malagasy Ariary"""
+  MGA
+
+  """Denar"""
+  MKD
+
+  """Kyat"""
+  MMK
+
+  """Tugrik"""
+  MNT
+
+  """Pataca"""
+  MOP
+
+  """Ouguiya"""
+  MRO
+
+  """Ouguiya"""
+  MRU
+
+  """Mauritian rupee"""
+  MUR
+
+  """Rufiyaa"""
+  MVR
+
+  """Kwacha"""
+  MWK
+
+  """Mexican peso"""
+  MXN
+
+  """Malaysian ringgit"""
+  MYR
+
+  """Metical"""
+  MZN
+
+  """Namibian dollar"""
+  NAD
+
+  """Naira"""
+  NGN
+
+  """Cordoba Oro"""
+  NIO
+
+  """Norwegian krone"""
+  NOK
+
+  """Nepalese rupee"""
+  NPR
+
+  """New Zealand dollar"""
+  NZD
+
+  """Omani rial"""
+  OMR
+
+  """Balboa"""
+  PAB
+
+  """Nuevo Sol"""
+  PEN
+
+  """Kina"""
+  PGK
+
+  """Philippine peso"""
+  PHP
+
+  """Pakistani rupee"""
+  PKR
+
+  """Zloty"""
+  PLN
+
+  """Guarani"""
+  PYG
+
+  """Qatari riyal"""
+  QAR
+
+  """New Leu"""
+  RON
+
+  """Serbian Dinar"""
+  RSD
+
+  """Russian rouble"""
+  RUB
+
+  """Rwanda franc"""
+  RWF
+
+  """Saudi riyal"""
+  SAR
+
+  """Solomon Islands Dollar"""
+  SBD
+
+  """Seychelles rupee"""
+  SCR
+
+  """Sudanese Pound"""
+  SDG
+
+  """Swedish Krona"""
+  SEK
+
+  """Singapore dollar"""
+  SGD
+
+  """Saint Helena Pound"""
+  SHP
+
+  """Leone"""
+  SLL
+
+  """Somali shilling"""
+  SOS
+
+  """Surinam dollar"""
+  SRD
+
+  """South Sudanese pound"""
+  SSP
+
+  """Dobra"""
+  STD
+
+  """El Salvador colon"""
+  SVC
+
+  """Syrian pound"""
+  SYP
+
+  """Lilangeni"""
+  SZL
+
+  """Baht"""
+  THB
+
+  """Somoni"""
+  TJS
+
+  """Manat"""
+  TMM
+
+  """Tunisian dinar"""
+  TND
+
+  """Pa'anga"""
+  TOP
+
+  """Turkish Lira"""
+  TRY
+
+  """Trinidad and Tobago dollar"""
+  TTD
+
+  """Taiwan New Dollar"""
+  TWD
+
+  """Tanzanian shilling"""
+  TZS
+
+  """Hryvnia"""
+  UAH
+
+  """Ugandan shilling"""
+  UGX
+
+  """United States dollar"""
+  USD
+
+  """Uruguayo peso"""
+  UYU
+
+  """Uzbekistan sum"""
+  UZS
+
+  """Bolivar Fuerte"""
+  VEF
+
+  """Dong"""
+  VND
+
+  """Vatu"""
+  VUV
+
+  """Samoan Tala"""
+  WST
+
+  """CFA Franc - BEAC"""
+  XAF
+
+  """Eastern Caribbean dollar"""
+  XCD
+
+  """CFA franc - BCEAO"""
+  XOF
+
+  """Comptoirs Francais du Pacifique Francs"""
+  XPF
+
+  """Yemeni rial"""
+  YER
+
+  """Rand"""
+  ZAR
+
+  """Kwacha"""
+  ZMK
+
+  """Kwacha"""
+  ZMW
+
+  """Zimbabwean dollar"""
+  ZWD
+}
+
+"""A customer of the business."""
+type Customer implements BusinessNode & Node {
+  """Address of the customer."""
+  address: Address
+
+  """Business that the customer belongs to."""
+  business: Business!
+
+  """When the customer was created."""
+  createdAt: DateTime!
+
+  """Default currency used by the customer."""
+  currency: Currency
+
+  """
+  User defined id for the customer. Commonly referred to as Account Number.
+  """
+  displayId: String
+
+  """Email of the principal contact."""
+  email: String
+
+  """Fax number of the customer."""
+  fax: String
+
+  """First name of the principal contact."""
+  firstName: String
+
+  """Unique identifier for the customer."""
+  id: ID!
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+
+  """Internal notes about the customer."""
+  internalNotes: String
+
+  """Whether or not the customer is archived."""
+  isArchived: Boolean
+
+  """Last name of the principal contact."""
+  lastName: String
+
+  """Mobile telephone number of the principal contact."""
+  mobile: String
+
+  """When the customer was last modified."""
+  modifiedAt: DateTime!
+
+  """Name or business name of the customer."""
+  name: String!
+
+  """Amount due on customer's invoices."""
+  outstandingAmount: Money!
+
+  """Amount due on customer's invoices with due date that have passed."""
+  overdueAmount: Money!
+
+  """Telephone number of the customer."""
+  phone: String
+
+  """Details for shipping to the customer."""
+  shippingDetails: CustomerShippingDetails
+
+  """Toll-free number of the customer."""
+  tollFree: String
+
+  """Website address of the customer."""
+  website: String
+}
+
+"""Customer connection."""
+type CustomerConnection {
+  """List of customers."""
+  edges: [CustomerEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Input to the `customerCreate` mutation."""
+input CustomerCreateInput {
+  """Address"""
+  address: AddressInput
+
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """Default currency used by the customer."""
+  currency: CurrencyCode
+
+  """User defined id for the customer."""
+  displayId: String
+
+  """Email of the principal contact."""
+  email: String
+
+  """Fax number of the customer."""
+  fax: String
+
+  """First name of the principal contact."""
+  firstName: String
+
+  """Internal notes about the customer."""
+  internalNotes: String
+
+  """Last name of the principal contact."""
+  lastName: String
+
+  """Mobile telephone number of the principal contact."""
+  mobile: String
+
+  """Name or business name of the customer."""
+  name: String!
+
+  """Telephone number of the customer."""
+  phone: String
+
+  """Details for shipping to the customer."""
+  shippingDetails: CustomerShippingDetailsInput
+
+  """Toll-free number of the customer."""
+  tollFree: String
+
+  """Website address of the customer."""
+  website: String
+}
+
+"""Output of the `customerCreate` mutation."""
+type CustomerCreateOutput {
+  """Customer that was created."""
+  customer: Customer
+
+  """Indicates whether the customer was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Input to the `customerDelete` mutation."""
+input CustomerDeleteInput {
+  """The unique identifier for the customer."""
+  id: ID!
+}
+
+"""Output of the `customerDelete` mutation."""
+type CustomerDeleteOutput {
+  """Indicates whether the customer was successfully deleted."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Customer edge."""
+type CustomerEdge {
+  """A customer."""
+  node: Customer
+}
+
+"""Input to the `customerPatch` mutation."""
+input CustomerPatchInput {
+  """Address"""
+  address: AddressInput
+
+  """Default currency used by the customer."""
+  currency: CurrencyCode
+
+  """User defined id for the customer."""
+  displayId: String
+
+  """Email of the principal contact."""
+  email: String
+
+  """Fax number of the customer."""
+  fax: String
+
+  """First name of the principal contact."""
+  firstName: String
+
+  """The unique identifier for the customer."""
+  id: ID!
+
+  """Internal notes about the customer."""
+  internalNotes: String
+
+  """Last name of the principal contact."""
+  lastName: String
+
+  """Mobile telephone number of the principal contact."""
+  mobile: String
+
+  """Name or business name of the customer."""
+  name: String
+
+  """Telephone number of the customer."""
+  phone: String
+
+  """Details for shipping to the customer."""
+  shippingDetails: CustomerPatchShippingDetailsInput
+
+  """Toll-free number of the customer."""
+  tollFree: String
+
+  """Website address of the customer."""
+  website: String
+}
+
+"""Output of the `customerPatch` mutation."""
+type CustomerPatchOutput {
+  """Customer that was patched."""
+  customer: Customer
+
+  """Indicates whether the customer was successfully patched."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Shipping details related to a customer."""
+input CustomerPatchShippingDetailsInput {
+  """Address of the customer."""
+  address: AddressInput
+
+  """Delivery instructions for handling."""
+  instructions: String
+
+  """Name or business name of the customer."""
+  name: String
+
+  """Telephone number of the customer."""
+  phone: String
+}
+
+"""Shipping details related to a customer."""
+type CustomerShippingDetails {
+  """Address of the customer."""
+  address: Address
+
+  """Delivery instructions for handling."""
+  instructions: String
+
+  """Name or business name of the customer."""
+  name: String
+
+  """Telephone number of the customer."""
+  phone: String
+}
+
+"""Shipping details related to a customer."""
+input CustomerShippingDetailsInput {
+  """Address of the customer."""
+  address: AddressInput
+
+  """Delivery instructions for handling."""
+  instructions: String
+
+  """Name or business name of the customer."""
+  name: String
+
+  """Telephone number of the customer."""
+  phone: String
+}
+
+"""Options by which customers can be ordered."""
+enum CustomerSort {
+  """Ascending by creation time."""
+  CREATED_AT_ASC
+
+  """Descending by creation time."""
+  CREATED_AT_DESC
+
+  """Ascending by modified time."""
+  MODIFIED_AT_ASC
+
+  """Descending by modified time."""
+  MODIFIED_AT_DESC
+
+  """Ascending by name."""
+  NAME_ASC
+
+  """Descending by name."""
+  NAME_DESC
+}
+
+"""ISO-8601 date object. Format returned will follow `yyyy-MM-dd`."""
+scalar Date
+
+"""
+ISO-8601 date and time object. Format returned will follow `yyyy-MM-ddThh:mm:ss.sssZ` where the timezone is UTC.
+"""
+scalar DateTime
+
+"""
+A signed decimal number, which supports arbitrary precision and is serialized as a string. Example value: `14.99`.
+"""
+scalar Decimal
+
+"""
+An approximate bill given to a buyer indicating the products or services, quantities, and expected prices (not a request for payment).
+"""
+type Estimate implements BusinessNode & Node {
+  """Business that the Estimate belongs to"""
+  business: Business!
+
+  """Unique identifier for the estimate."""
+  id: ID!
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+}
+
+"""A fixed discount applied to an Invoice."""
+type FixedInvoiceDiscount implements InvoiceDiscount {
+  """The amount of the discount."""
+  amount: Decimal
+
+  """When the invoice discount was created."""
+  createdAt: DateTime!
+
+  """When the invoice discount was last modified."""
+  modifiedAt: DateTime!
+
+  """A description of the discount."""
+  name: String
+}
+
+"""General settings on an invoice and estimate."""
+type GeneralSettings {
+  """Color to represent the brand of the business."""
+  accentColor: HexColorCode
+
+  """Logo of the business."""
+  logoUrl: URL
+}
+
+"""
+A field whose value is a hex color code: https://en.wikipedia.org/wiki/Web_colors.
+"""
+scalar HexColorCode
+
+"""Mutation validation error."""
+type InputError {
+  """Error code."""
+  code: String
+
+  """Error message."""
+  message: String
+
+  """Path to the input value."""
+  path: [String!]
+}
+
+"""
+Document issued to a buyer for payment indicating the products or services, quantities, and agreed prices.
+"""
+type Invoice implements BusinessNode & Node {
+  """Invoice total less amount already paid."""
+  amountDue: Money!
+
+  """Total of all payments so far made against this invoice."""
+  amountPaid: Money!
+
+  """
+  The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice.
+  """
+  amountTitle: String!
+
+  """Business that the invoice belongs to."""
+  business: Business!
+
+  """When the invoice was created."""
+  createdAt: DateTime!
+
+  """Currency of the invoice."""
+  currency: Currency!
+
+  """Customer the invoice is for."""
+  customer: Customer!
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by American Express.
+  """
+  disableAmexPayments: Boolean!
+
+  """
+  Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment.
+  """
+  disableBankPayments: Boolean!
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card.
+  """
+  disableCreditCardPayments: Boolean!
+
+  """Total value of all discounts."""
+  discountTotal: Money!
+
+  """Invoice discounts."""
+  discounts: [InvoiceDiscount!]
+
+  """Date when payment is due."""
+  dueDate: Date!
+
+  """
+  Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions.
+  """
+  exchangeRate: Decimal!
+
+  """Invoice footer text."""
+  footer: String
+
+  """Indicates whether item's amount is hidden in the line items listing."""
+  hideAmount: Boolean!
+
+  """
+  Indicates whether item's description in item column is hidden in the line items listing.
+  """
+  hideDescription: Boolean!
+
+  """
+  Indicates whether item's product name in item column is hidden in the line items listing.
+  """
+  hideName: Boolean!
+
+  """Indicates whether item's price is hidden in the line items listing."""
+  hidePrice: Boolean!
+
+  """Indicates whether item's unit is hidden in the line items listing."""
+  hideUnit: Boolean!
+
+  """Unique identifier for the invoice."""
+  id: ID!
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+
+  """Date when invoice is issued."""
+  invoiceDate: Date!
+
+  """Unique number assigned to the invoice."""
+  invoiceNumber: String!
+
+  """The label for the 'Item' column in the line items listing."""
+  itemTitle: String!
+
+  """
+  The line items (product, unit and price) that make up the invoiced sale.
+  """
+  items: [InvoiceItem!]
+
+  """When the invoice was last sent."""
+  lastSentAt: DateTime
+
+  """How the invoice was last sent."""
+  lastSentVia: InvoiceSendMethod
+
+  """When the invoice was last viewed by the customer."""
+  lastViewedAt: DateTime
+
+  """Invoice memo (notes) text."""
+  memo: String
+
+  """When the invoice was last modified."""
+  modifiedAt: DateTime!
+
+  """URL to access PDF representation of the invoice."""
+  pdfUrl: String!
+
+  """Purchase order or sales order number for the invoice."""
+  poNumber: String
+
+  """
+  The label for the 'Price' column in the listing of line items on the invoice.
+  """
+  priceTitle: String!
+
+  """
+  Indicates whether the customer is required to accept the terms of service.
+  """
+  requireTermsOfServiceAgreement: Boolean!
+
+  """Entity that was the precursor to the invoice."""
+  source: InvoiceSource
+
+  """Status of the Invoice."""
+  status: InvoiceStatus!
+
+  """Invoice subheading text."""
+  subhead: String
+
+  """Pretax total."""
+  subtotal: Money!
+
+  """Total of all sales taxes on all line items within the invoice."""
+  taxTotal: Money!
+
+  """Invoice title at the top of the document."""
+  title: String!
+
+  """Total value of the invoice including sales taxes."""
+  total: Money!
+
+  """
+  The label for the 'Unit' column in the listing of line items on the invoice.
+  """
+  unitTitle: String!
+
+  """URL to view the invoice online as seen by a customer."""
+  viewUrl: String!
+}
+
+"""Input to the `invoiceApprove` mutation."""
+input InvoiceApproveInput {
+  """The unique identifier for the invoice."""
+  invoiceId: ID!
+}
+
+"""Output of the `invoiceApprove` mutation."""
+type InvoiceApproveOutput {
+  """Indicates whether the invoice was successfully approved."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was approved."""
+  invoice: Invoice
+}
+
+"""Input to the `invoiceClone` mutation."""
+input InvoiceCloneInput {
+  """The unique identifier for the invoice."""
+  invoiceId: ID!
+}
+
+"""Output of the `invoiceClone` mutation."""
+type InvoiceCloneOutput {
+  """Indicates whether the invoice was successfully cloned."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was cloned."""
+  invoice: Invoice
+}
+
+"""Invoice connection."""
+type InvoiceConnection {
+  """List of invoices."""
+  edges: [InvoiceEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Input to the `invoiceCreate` mutation."""
+input InvoiceCreateInput {
+  """
+  The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice. If not provided, will use the business's default invoice column amount title.
+  """
+  amountTitle: String
+
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """
+  Currency of the invoice. If not provided, will use the business's default currency.
+  """
+  currency: CurrencyCode
+
+  """The customer identifier to associate with invoice."""
+  customerId: ID!
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by american express payment. If not provided, will use the business's default invoice settings american express payment state.
+  """
+  disableAmexPayments: Boolean
+
+  """
+  Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment. If not provided, will use the business's default invoice bank payment state.
+  """
+  disableBankPayments: Boolean
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card. If not provided, will use the business's default invoice credit card payment state.
+  """
+  disableCreditCardPayments: Boolean
+
+  """The discounts applied to the invoice (currently limited to max 1)."""
+  discounts: [InvoiceDiscountInput!]
+
+  """
+  Date when payment is due. If not provided, will apply the business's default invoice payment terms to `invoiceDate` value.
+  """
+  dueDate: Date
+
+  """
+  Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions.
+  """
+  exchangeRate: Decimal
+
+  """
+  Invoice footer text. If not provided, will use the business's default invoice footer.
+  """
+  footer: String
+
+  """
+  Indicates whether item's amount is hidden in the line items listing. If not provided, will use the business's default invoice item amount visibility.
+  """
+  hideAmount: Boolean
+
+  """
+  Indicates whether item's description in item column is hidden in the line items listing. If not provided, will use the business's default invoice item description visibility.
+  """
+  hideDescription: Boolean
+
+  """
+  Indicates whether item's product name in item column is hidden in the line items listing. If not provided, will use the business's default invoice item name visibility.
+  """
+  hideName: Boolean
+
+  """
+  Indicates whether item's price is hidden in the line items listing. If not provided, will use the business's default invoice item price visibility.
+  """
+  hidePrice: Boolean
+
+  """
+  Indicates whether item's unit is hidden in the line items listing. If not provided, will use the business's default invoice item unit visibility.
+  """
+  hideUnit: Boolean
+
+  """Date when invoice is issued. If not provided, will use today's date."""
+  invoiceDate: Date
+
+  """
+  Unique number assigned to the invoice. If not provided, will find the current largest invoice number and add 1.
+  """
+  invoiceNumber: String
+
+  """
+  The label for the 'Item' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column item title.
+  """
+  itemTitle: String
+
+  """
+  The line items (product, unit and price) that make up the invoiced sale.
+  """
+  items: [InvoiceCreateItemInput!]
+
+  """
+  Invoice memo (notes) text. If not provided, will use the business's default invoice memo.
+  """
+  memo: String
+
+  """Purchase order or sales order number for the invoice."""
+  poNumber: String
+
+  """
+  The label for the 'Price' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column price title.
+  """
+  priceTitle: String
+
+  """
+  Indicates whether the customer is required to accept the terms of service.
+  """
+  requireTermsOfServiceAgreement: Boolean
+
+  """Status of the Invoice."""
+  status: InvoiceCreateStatus = DRAFT
+
+  """
+  Invoice subheading text. If not provided, will use the business's default invoice subheading.
+  """
+  subhead: String
+
+  """
+  Invoice title at the top of the document. If not provided, will use the business's default invoice title.
+  """
+  title: String
+
+  """
+  The label for the 'Unit' column in the listing of line items on the invoice. If not provided, will use the business's default invoice column unit title.
+  """
+  unitTitle: String
+}
+
+"""Invoice line item."""
+input InvoiceCreateItemInput {
+  """Override product's description."""
+  description: String
+
+  """Associated product."""
+  productId: ID!
+
+  """
+  Number of units (rounded to nearest 8 decimal places with ties going away from zero).
+  """
+  quantity: Decimal
+
+  """
+  Taxes. To have the product's default sales taxes applied, provide `undefined` as the value.
+  """
+  taxes: [InvoiceCreateItemTaxInput!]
+
+  """
+  Override product's unitPrice. Price per unit in the major currency unit (rounded to nearest 8 decimal places with ties going away from zero).
+  """
+  unitPrice: Decimal
+}
+
+"""Invoice line item's sales tax."""
+input InvoiceCreateItemTaxInput {
+  """
+  *DEPRECATED - DO NOT USE* Sales Tax Amount is calculated by Wave using your Sales Tax settings.
+  """
+  amount: Decimal
+
+  """Sales tax."""
+  salesTaxId: ID!
+}
+
+"""Output of the `invoiceCreate` mutation."""
+type InvoiceCreateOutput {
+  """Indicates whether the invoice was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was created."""
+  invoice: Invoice
+}
+
+"""Status of an invoice."""
+enum InvoiceCreateStatus {
+  """The invoice is still a draft."""
+  DRAFT
+
+  """The invoice was saved."""
+  SAVED
+}
+
+"""Input to the `invoiceDelete` mutation."""
+input InvoiceDeleteInput {
+  """The unique identifier for the invoice."""
+  invoiceId: ID!
+}
+
+"""Output of the `invoiceDelete` mutation."""
+type InvoiceDeleteOutput {
+  """Indicates whether the invoice was successfully deleted."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Common base properties of InvoiceDiscounts."""
+interface InvoiceDiscount {
+  """When the invoice discount was created."""
+  createdAt: DateTime!
+
+  """When the invoice discount was last modified."""
+  modifiedAt: DateTime!
+
+  """A description of the discount."""
+  name: String
+}
+
+"""Invoice Discount."""
+input InvoiceDiscountInput {
+  """Discount amount (for FIXED-type discounts)."""
+  amount: Decimal
+
+  """Discount type."""
+  discountType: InvoiceDiscountType!
+
+  """Discount name."""
+  name: String
+
+  """Discount percentage (for PERCENTAGE-type discounts)."""
+  percentage: Decimal
+}
+
+"""Type of invoice discount."""
+enum InvoiceDiscountType {
+  """Fixed dollar amount discount."""
+  FIXED
+
+  """Type of invoice discount."""
+  PERCENTAGE
+}
+
+"""Invoice edge."""
+type InvoiceEdge {
+  """An invoice."""
+  node: Invoice!
+}
+
+"""Business invoice and estimates settings information."""
+type InvoiceEstimateSettings {
+  """Settings applied to both invoices and estimates."""
+  generalSettings: GeneralSettings!
+}
+
+"""Invoice line item."""
+type InvoiceItem {
+  """Income account."""
+  account: Account!
+
+  """Detailed description."""
+  description: String
+
+  """Price per unit."""
+  price: Decimal! @deprecated(reason: "Use unitPrice to avoid ambiguity in how the value relates to quantity and the subtotal.")
+
+  """Associated product."""
+  product: Product!
+
+  """Number of units."""
+  quantity: Decimal!
+
+  """Pretax total."""
+  subtotal: Money!
+
+  """Taxes."""
+  taxes: [InvoiceItemTax!]!
+
+  """Total including sales taxes."""
+  total: Money!
+
+  """Price per unit in the major currency unit."""
+  unitPrice: Decimal!
+}
+
+"""Invoice line item's sales tax."""
+type InvoiceItemTax {
+  """Sales tax amount."""
+  amount: Money
+
+  """Sales tax rate."""
+  rate: Decimal @deprecated(reason: "Use `salesTax.rate`. `rate` will be removed on Oct 20th 2022.")
+
+  """Sales tax."""
+  salesTax: SalesTax!
+}
+
+"""Input to the `invoiceMarkSent` mutation."""
+input InvoiceMarkSentInput {
+  """The unique identifier for the invoice."""
+  invoiceId: ID!
+
+  """How the invoice was sent."""
+  sendMethod: InvoiceSendMethod!
+
+  """When the invoice was sent."""
+  sentAt: DateTime
+}
+
+"""Output of the `invoiceMarkSent` mutation."""
+type InvoiceMarkSentOutput {
+  """Indicates whether the invoice was successfully marked as sent."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was marked as sent."""
+  invoice: Invoice
+}
+
+"""
+Input to the `invoicePatch` mutation. For each value if it's not provided - do not update it.
+"""
+input InvoicePatchInput {
+  """
+  The label for the 'Amount' (= unit x price) column in the listing of line items on the invoice.
+  """
+  amountTitle: String
+
+  """Currency of the invoice."""
+  currency: CurrencyCode
+
+  """The customer identifier to associate with invoice."""
+  customerId: ID
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by american express payment.
+  """
+  disableAmexPayments: Boolean
+
+  """
+  Within a business that is enabled to accept bank payments, indicates if this individual invoice has been marked to not be payable by bank payment.
+  """
+  disableBankPayments: Boolean
+
+  """
+  Within a business that is enabled to accept credit card payments, indicates if this individual invoice has been marked to not be payable by card.
+  """
+  disableCreditCardPayments: Boolean
+
+  """The discounts applied to the invoice (currently limited to max 1)."""
+  discounts: [InvoiceDiscountInput!]
+
+  """Date when payment is due."""
+  dueDate: Date
+
+  """
+  Exchange rate to business's currency from the invoice's currency. Used to value the invoice income within Wave's accounting transactions.
+  """
+  exchangeRate: Decimal
+
+  """Invoice footer text."""
+  footer: String
+
+  """Indicates whether item's amount is hidden in the line items listing."""
+  hideAmount: Boolean
+
+  """
+  Indicates whether item's description in item column is hidden in the line items listing.
+  """
+  hideDescription: Boolean
+
+  """
+  Indicates whether item's product name in item column is hidden in the line items listing.
+  """
+  hideName: Boolean
+
+  """Indicates whether item's price is hidden in the line items listing."""
+  hidePrice: Boolean
+
+  """Indicates whether item's unit is hidden in the line items listing."""
+  hideUnit: Boolean
+
+  """Unique identifier for the invoice."""
+  id: ID!
+
+  """Date when invoice is issued."""
+  invoiceDate: Date
+
+  """Unique number assigned to the invoice."""
+  invoiceNumber: String
+
+  """
+  The label for the 'Item' column in the listing of line items on the invoice.
+  """
+  itemTitle: String
+
+  """
+  The line items (product, unit and price) that make up the invoiced sale. If provided, it would replace all items with given ones.
+  """
+  items: [InvoiceCreateItemInput!]
+
+  """Invoice memo (notes) text."""
+  memo: String
+
+  """Purchase order or sales order number for the invoice."""
+  poNumber: String
+
+  """
+  The label for the 'Price' column in the listing of line items on the invoice.
+  """
+  priceTitle: String
+
+  """
+  Indicates whether the customer is required to accept the terms of service.
+  """
+  requireTermsOfServiceAgreement: Boolean
+
+  """Status of the Invoice."""
+  status: InvoiceCreateStatus
+
+  """Invoice subheading text."""
+  subhead: String
+
+  """Invoice title at the top of the document."""
+  title: String
+
+  """
+  The label for the 'Unit' column in the listing of line items on the invoice.
+  """
+  unitTitle: String
+}
+
+"""Output of the `invoicePatch` mutation."""
+type InvoicePatchOutput {
+  """Indicates whether the invoice was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was created."""
+  invoice: Invoice
+}
+
+"""Input to the `invoiceSend` mutation."""
+input InvoiceSendInput {
+  """Include a PDF of the invoice as an attachment."""
+  attachPDF: Boolean! = false
+
+  """Carbon copy email."""
+  ccMyself: Boolean
+
+  """Email address from"""
+  fromAddress: String
+
+  """The unique identifier for the invoice."""
+  invoiceId: ID!
+
+  """Message body of the email."""
+  message: String
+
+  """Subject line of the email."""
+  subject: String
+
+  """Email addresses to receive an email."""
+  to: [String!]!
+}
+
+"""Invoice send method."""
+enum InvoiceSendMethod {
+  """Export PDF."""
+  EXPORT_PDF
+
+  """Gmail"""
+  GMAIL
+
+  """Marked as sent."""
+  MARKED_SENT
+
+  """Not sent."""
+  NOT_SENT
+
+  """Outlook."""
+  OUTLOOK
+
+  """Shared link."""
+  SHARED_LINK
+
+  """Skipped."""
+  SKIPPED
+
+  """Wave."""
+  WAVE
+
+  """Yahoo."""
+  YAHOO
+}
+
+"""Output of the `invoiceSend` mutation."""
+type InvoiceSendOutput {
+  """Indicates whether the invoice was successfully queued for sending."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Invoice that was sent."""
+  invoice: Invoice
+}
+
+"""Options by which invoices can be ordered."""
+enum InvoiceSort {
+  """Ascending by amount due."""
+  AMOUNT_DUE_ASC
+
+  """Descending by amount due."""
+  AMOUNT_DUE_DESC
+
+  """Ascending by amount paid."""
+  AMOUNT_PAID_ASC
+
+  """Descending by amount paid."""
+  AMOUNT_PAID_DESC
+
+  """Ascending by creation time."""
+  CREATED_AT_ASC
+
+  """Descending by creation time."""
+  CREATED_AT_DESC
+
+  """Ascending by customer's name."""
+  CUSTOMER_NAME_ASC
+
+  """Descending by customer's name."""
+  CUSTOMER_NAME_DESC
+
+  """Ascending by due date."""
+  DUE_AT_ASC
+
+  """Descending by due date."""
+  DUE_AT_DESC
+
+  """Ascending by invoice date."""
+  INVOICE_DATE_ASC
+
+  """Descending by invoice date."""
+  INVOICE_DATE_DESC
+
+  """Ascending by invoice number."""
+  INVOICE_NUMBER_ASC
+
+  """Descending by invoice number."""
+  INVOICE_NUMBER_DESC
+
+  """Ascending by modified date."""
+  MODIFIED_AT_ASC
+
+  """Descending by modified date."""
+  MODIFIED_AT_DESC
+
+  """Ascending by status."""
+  STATUS_ASC
+
+  """Descending by status."""
+  STATUS_DESC
+
+  """Ascending by total amount."""
+  TOTAL_ASC
+
+  """Descending by total amount."""
+  TOTAL_DESC
+}
+
+"""
+Specifies either the invoice is made from estimate, is recurring, or created manually.
+"""
+union InvoiceSource = Estimate | NewEstimate | RecurringInvoice
+
+"""Status of an invoice."""
+enum InvoiceStatus {
+  """The invoice is still a draft."""
+  DRAFT
+
+  """The invoice is overdue."""
+  OVERDUE
+
+  """The invoice was overpaid."""
+  OVERPAID
+
+  """The invoice was paid."""
+  PAID
+
+  """The invoice was partially paid."""
+  PARTIAL
+
+  """The invoice was saved."""
+  SAVED
+
+  """The invoice was sent."""
+  SENT
+
+  """The invoice is unpaid."""
+  UNPAID
+
+  """The invoice was viewed."""
+  VIEWED
+}
+
+"""
+The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
+"""
+scalar JSON
+
+"""A medium of exchange in common use."""
+type Money {
+  """Currency"""
+  currency: Currency!
+
+  """Value represented in only the minor currency unit."""
+  minorUnitValue: Decimal!
+
+  """Value represented in only the minor currency unit."""
+  raw: Int! @deprecated(reason: "Use `minorUnitValue` instead, as `raw` can overflow for large numbers.")
+
+  """
+  Amount represented as a combination of the major and minor currency unit (uses a decimal separator).
+  """
+  value: String!
+}
+
+"""Input representing a deposit."""
+input MoneyDepositTransactionCreateDepositInput {
+  """Id of the account."""
+  accountId: ID!
+
+  """Date of the transaction."""
+  amount: Float!
+}
+
+"""Fee input."""
+input MoneyDepositTransactionCreateFeeInput {
+  """ID of the account associated with the fee."""
+  accountId: ID!
+
+  """Amount."""
+  amount: Float!
+}
+
+"""Input of the moneyDepositTransactionCreate Mutation"""
+input MoneyDepositTransactionCreateInput {
+  """Id of the business."""
+  businessId: ID!
+
+  """Transaction timestamp."""
+  createdAt: DateTime
+
+  """Date of the transaction."""
+  date: Date!
+
+  """Deposit account and amount."""
+  deposit: MoneyDepositTransactionCreateDepositInput!
+
+  """Description for the transaction."""
+  description: String!
+
+  """ID of the transaction in an external system."""
+  externalId: String
+
+  """Fees."""
+  fees: [MoneyDepositTransactionCreateFeeInput!]
+
+  """Line items."""
+  lineItems: [MoneyDepositTransactionCreateLineItemInput!]!
+
+  """Extra notes about the transaction."""
+  notes: String
+
+  """Origin of the transaction."""
+  origin: TransactionOrigin!
+}
+
+"""Line item input."""
+input MoneyDepositTransactionCreateLineItemInput {
+  """ID of the account associated with the line item."""
+  accountId: ID!
+
+  """Amount."""
+  amount: Float!
+
+  """ID of the customer associated with the line item."""
+  customerId: ID
+
+  """Taxes applied to the line item."""
+  taxes: [TransactionCreateSalesTaxInput!]!
+}
+
+"""Output of the moneyDepositTransactionCreate Mutation"""
+type MoneyDepositTransactionCreateOutput {
+  """Whether or not the transaction was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+}
+
+"""Anchor input."""
+input MoneyTransactionCreateAnchorInput {
+  """ID of the anchor account."""
+  accountId: ID!
+
+  """Amount of the transaction (unsigned)."""
+  amount: Decimal!
+
+  """Direction of a transaction"""
+  direction: TransactionDirection!
+}
+
+"""Input of the `moneyTransactionCreate` Mutation"""
+input MoneyTransactionCreateInput {
+  """Anchor item."""
+  anchor: MoneyTransactionCreateAnchorInput!
+
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """Date of the transaction."""
+  date: Date!
+
+  """Description for the transaction."""
+  description: String!
+
+  """
+  ID of the transaction in an external system. If you don't have one, generate a UUID and provide it.
+  """
+  externalId: String!
+
+  """Line items."""
+  lineItems: [MoneyTransactionCreateLineItemInput!]!
+
+  """Extra notes about the transaction."""
+  notes: String
+}
+
+"""Line item input."""
+input MoneyTransactionCreateLineItemInput {
+  """ID of the account associated with the line item."""
+  accountId: ID!
+
+  """Amount of the line item (unsigned)."""
+  amount: Decimal!
+
+  """How the account should change in relation to the amount."""
+  balance: BalanceType! = INCREASE
+
+  """ID of the customer associated with the line item."""
+  customerId: ID
+
+  """Optional description for line item."""
+  description: String
+
+  """Taxes applied to the line item."""
+  taxes: [MoneyTransactionCreateSalesTaxInput!]
+}
+
+"""Output of the `moneyTransactionCreate` Mutation"""
+type MoneyTransactionCreateOutput {
+  """Whether or not the transaction was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Created transaction."""
+  transaction: Transaction
+}
+
+"""Sales tax input."""
+input MoneyTransactionCreateSalesTaxInput {
+  """Override the amount of the tax (unsigned)."""
+  amount: Decimal!
+
+  """ID of the sales tax."""
+  salesTaxId: ID!
+}
+
+"""Input for creating a money transaction."""
+input MoneyTransactionDetails {
+  """Anchor item."""
+  anchor: MoneyTransactionCreateAnchorInput!
+
+  """Date of the transaction."""
+  date: Date!
+
+  """Description for the transaction."""
+  description: String!
+
+  """
+  ID of the transaction in an external system. If you don't have one, generate a UUID and provide it.
+  """
+  externalId: String!
+
+  """Line items."""
+  lineItems: [MoneyTransactionCreateLineItemInput!]!
+
+  """Extra notes about the transaction."""
+  notes: String
+}
+
+"""Input of the `moneyTransactionsCreate` Mutation"""
+input MoneyTransactionsCreateInput {
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """Array of transactions to create."""
+  transactions: [MoneyTransactionDetails!]!
+}
+
+"""Output of the `moneyTransactionsCreate` Mutation"""
+type MoneyTransactionsCreateOutput {
+  """Whether or not all transactions were successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Created transactions."""
+  transactions: [Transaction]
+}
+
+"""The schema’s entry point for mutations."""
+type Mutation {
+  """No-op placeholder for code generation."""
+  _: Boolean
+
+  """Archive an account."""
+  accountArchive(input: AccountArchiveInput!): AccountArchiveOutput
+
+  """Create an account."""
+  accountCreate(input: AccountCreateInput!): AccountCreateOutput
+
+  """Patch an account."""
+  accountPatch(input: AccountPatchInput!): AccountPatchOutput
+
+  """Create a customer."""
+  customerCreate(input: CustomerCreateInput!): CustomerCreateOutput
+
+  """Delete customer."""
+  customerDelete(input: CustomerDeleteInput!): CustomerDeleteOutput
+
+  """Patch a customer."""
+  customerPatch(input: CustomerPatchInput!): CustomerPatchOutput
+
+  """Approve an invoice."""
+  invoiceApprove(input: InvoiceApproveInput!): InvoiceApproveOutput
+
+  """Clones an invoice."""
+  invoiceClone(input: InvoiceCloneInput!): InvoiceCloneOutput
+
+  """Create an invoice."""
+  invoiceCreate(input: InvoiceCreateInput!): InvoiceCreateOutput
+
+  """Delete an invoice."""
+  invoiceDelete(input: InvoiceDeleteInput!): InvoiceDeleteOutput
+
+  """Mark the invoice as sent."""
+  invoiceMarkSent(input: InvoiceMarkSentInput!): InvoiceMarkSentOutput
+
+  """Patch an invoice."""
+  invoicePatch(input: InvoicePatchInput!): InvoicePatchOutput
+
+  """Send an invoice. Requires `Business.emailSendEnabled` to be true."""
+  invoiceSend(input: InvoiceSendInput!): InvoiceSendOutput
+
+  """Create a money transaction."""
+  moneyDepositTransactionCreate(input: MoneyDepositTransactionCreateInput!): MoneyDepositTransactionCreateOutput @deprecated(reason: "Not available for public use at this time.")
+
+  """
+  **BETA**: Create money transaction. Requires `isClassicAccounting` to be `false`.
+  """
+  moneyTransactionCreate(input: MoneyTransactionCreateInput!): MoneyTransactionCreateOutput
+
+  """
+  **BETA**: Bulk create money transactions. Requires `isClassicAccounting` to be `false`.
+  """
+  moneyTransactionsCreate(input: MoneyTransactionsCreateInput!): MoneyTransactionsCreateOutput
+
+  """Archive a product."""
+  productArchive(input: ProductArchiveInput!): ProductArchiveOutput
+
+  """Create a product."""
+  productCreate(input: ProductCreateInput!): ProductCreateOutput
+
+  """Patch a product."""
+  productPatch(input: ProductPatchInput!): ProductPatchOutput
+
+  """Archive a sales tax."""
+  salesTaxArchive(input: SalesTaxArchiveInput!): SalesTaxArchiveOutput!
+
+  """Create a sales tax."""
+  salesTaxCreate(input: SalesTaxCreateInput!): SalesTaxCreateOutput!
+
+  """Update a sales tax."""
+  salesTaxPatch(input: SalesTaxPatchInput!): SalesTaxPatchOutput!
+}
+
+"""An estimate created in our new platform."""
+type NewEstimate implements BusinessNode & Node {
+  """Business that the Estimate belongs to"""
+  business: Business!
+
+  """Unique identifier for the estimate."""
+  id: ID!
+}
+
+"""An object with an `ID`."""
+interface Node {
+  """ID of the object."""
+  id: ID!
+}
+
+"""An OAuth application."""
+type OAuthApplication implements Node {
+  """
+  The client identifier issued to the client during the registration process.
+  """
+  clientId: String!
+
+  """When the application was created."""
+  createdAt: DateTime!
+
+  """A description of the application."""
+  description: String
+
+  """
+  Additional data for the application.
+  - If the requested `clientId` does not match that of the current OAuth application, `extraData` will not be returned.
+  """
+  extraData: JSON
+
+  """The unique identifier for the application."""
+  id: ID!
+
+  """The URL to the application logo."""
+  logoUrl: URL
+
+  """When the application was last modified."""
+  modifiedAt: DateTime!
+
+  """The name of the application."""
+  name: String!
+}
+
+"""Information about pagination in a connection."""
+type OffsetPageInfo {
+  """Current page number."""
+  currentPage: Int!
+
+  """Total number of nodes in the connection."""
+  totalCount: Int
+
+  """Total number of pages in the connection."""
+  totalPages: Int
+}
+
+"""Forms of business ownership."""
+enum OrganizationalType {
+  """Corporation"""
+  CORPORATION
+
+  """Partnership"""
+  PARTNERSHIP
+
+  """Sole Proprietorship"""
+  SOLE_PROPRIETORSHIP
+}
+
+"""A percentage discount applied to an Invoice."""
+type PercentageInvoiceDiscount implements InvoiceDiscount {
+  """When the invoice discount was created."""
+  createdAt: DateTime!
+
+  """When the invoice discount was last modified."""
+  modifiedAt: DateTime!
+
+  """A description of the discount."""
+  name: String
+
+  """The percentage of the discount."""
+  percentage: Decimal
+}
+
+"""
+Product (or service) that a business sells to a customer or purchases from a vendor.
+"""
+type Product implements BusinessNode & Node {
+  """Business that the product belongs to."""
+  business: Business!
+
+  """When the product was created."""
+  createdAt: DateTime!
+
+  """Default sales taxes to apply on product."""
+  defaultSalesTaxes: [SalesTax!]!
+
+  """Description of the product."""
+  description: String
+
+  """The expense account to associate with this product, set when isBought."""
+  expenseAccount: Account
+
+  """Unique identifier for the product."""
+  id: ID!
+
+  """The income account to associate with this product, set when isSold."""
+  incomeAccount: Account
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+
+  """Is the product hidden from view by default."""
+  isArchived: Boolean!
+
+  """
+  Is product bought by the business. Allow this product or service to be added to Bills.
+  """
+  isBought: Boolean!
+
+  """
+  Is product sold by the business. Allow this product or service to be added to Invoices.
+  """
+  isSold: Boolean!
+
+  """When the product was last modified."""
+  modifiedAt: DateTime!
+
+  """Name of the product."""
+  name: String!
+
+  """Price per unit in the major currency unit."""
+  unitPrice: Decimal!
+}
+
+"""Input to the `productArchive` mutation."""
+input ProductArchiveInput {
+  """The unique identifier for the product."""
+  id: ID!
+}
+
+"""Output of the `productArchive` mutation."""
+type ProductArchiveOutput {
+  """Indicates whether the product was successfully deleted."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Product that was archived."""
+  product: Product
+}
+
+"""Product connection."""
+type ProductConnection {
+  """List of products."""
+  edges: [ProductEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Input to the `productCreate` mutation."""
+input ProductCreateInput {
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """Default sales taxes to apply on product."""
+  defaultSalesTaxIds: [ID!]
+
+  """Product description."""
+  description: String
+
+  """
+  Expense account to associate with this product. Account must be one of subtypes: `EXPENSE`, `COST_OF_GOODS_SOLD`, `PAYMENT_PROCESSING_FEES`, `PAYROLL_EXPENSES`.
+  """
+  expenseAccountId: ID
+
+  """
+  Income account to associate with this product. Account must be one of subtypes: `INCOME`, `DISCOUNTS`, `OTHER_INCOME`.
+  """
+  incomeAccountId: ID
+
+  """Name of the product."""
+  name: String!
+
+  """
+  Price per unit in the major currency unit (rounded to nearest 5 decimal places with ties going away from zero).
+  """
+  unitPrice: Decimal!
+}
+
+"""Output of the `productCreate` mutation."""
+type ProductCreateOutput {
+  """Indicates whether the product was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Product that was created."""
+  product: Product
+}
+
+"""Product edge."""
+type ProductEdge {
+  """A product."""
+  node: Product!
+}
+
+"""Input to the `productPatch` mutation."""
+input ProductPatchInput {
+  """Default sales taxes to apply on product."""
+  defaultSalesTaxIds: [ID!]
+
+  """Description of the product."""
+  description: String
+
+  """
+  Expense account to associate with this product. Account must be one of subtypes: `EXPENSE`, `COST_OF_GOODS_SOLD`, `PAYMENT_PROCESSING_FEES`, `PAYROLL_EXPENSES`.
+  """
+  expenseAccountId: ID
+
+  """The unique identifier for the product."""
+  id: ID!
+
+  """
+  Income account to associate with this product. Account must be one of subtypes: `INCOME`, `DISCOUNTS`, `OTHER_INCOME`.
+  """
+  incomeAccountId: ID
+
+  """Name of the product."""
+  name: String
+
+  """
+  Price per unit in the major currency unit (rounded to nearest 5 decimal places with ties going away from zero).
+  """
+  unitPrice: Decimal
+}
+
+"""Output of the `productPatch` mutation."""
+type ProductPatchOutput {
+  """Indicates whether the product was successfully patched."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Product that was updated."""
+  product: Product
+}
+
+"""Options by which products can be ordered."""
+enum ProductSort {
+  """Ascending by creation time."""
+  CREATED_AT_ASC
+
+  """Descending by creation time."""
+  CREATED_AT_DESC
+
+  """Ascending by modified time."""
+  MODIFIED_AT_ASC
+
+  """Descending by modified time."""
+  MODIFIED_AT_DESC
+
+  """Ascending by name."""
+  NAME_ASC
+
+  """Descending by name."""
+  NAME_DESC
+}
+
+"""A state/county/province/region."""
+type Province {
+  """[ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) identifier."""
+  code: String!
+
+  """Plain-lanuage representaton."""
+  name: String!
+
+  """Informal name for identification."""
+  slug: String @deprecated(reason: "Nonstandard values. Use code instead.")
+}
+
+"""The schema’s entry point for queries."""
+type Query {
+  """No-op placeholder for code generation."""
+  _: Boolean
+
+  """List subtypes of accounts."""
+  accountSubtypes: [AccountSubtype!]!
+
+  """List types of accounts."""
+  accountTypes: [AccountType!]!
+
+  """Get a business."""
+  business(
+    """
+    ID of business.
+    - If defined, it will fetch that business.
+    - If not defined and the access token is restricted to a single business, it will fetch that business.
+    - If not defined and the access token can access multiple businesses, it will fetch the user's default business. To set a default business see https://support.waveapps.com/hc/en-us/articles/208621226.
+    """
+    id: ID
+  ): Business
+
+  """List businesses."""
+  businesses(
+    """
+    Filter by archived status. If not provided, excludes archived businesses by default.
+    """
+    isArchived: Boolean
+
+    """1-based page number to retrieve."""
+    page: Int = 1
+
+    """Limit on how many items each page should return."""
+    pageSize: Int = 10
+  ): BusinessConnection
+
+  """List countries."""
+  countries: [Country!]!
+
+  """Get a country."""
+  country(
+    """Code of country."""
+    code: CountryCode!
+  ): Country
+
+  """List currencies."""
+  currencies: [Currency!]!
+
+  """Get a currency."""
+  currency(
+    """Code of currency."""
+    code: CurrencyCode!
+  ): Currency
+
+  """Get the current OAuth application."""
+  oAuthApplication: OAuthApplication
+
+  """Get a province."""
+  province(
+    """Code of province."""
+    code: String!
+  ): Province
+
+  """The currently authenticated user."""
+  user: User
+}
+
+"""
+A template that can be used to generate and possibly pay an invoice at regular intervals.
+"""
+type RecurringInvoice implements BusinessNode & Node {
+  """Business that the RecurringInvoice belongs to"""
+  business: Business!
+
+  """Unique identifier for the recurring invoice."""
+  id: ID!
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+}
+
+"""
+A tax paid to a taxing authority for the sales of certain goods and services.
+"""
+type SalesTax implements BusinessNode & Node {
+  """A short form or code representing the sales tax."""
+  abbreviation: String!
+
+  """Business that the sales tax belongs to."""
+  business: Business!
+
+  """When the sales tax was created."""
+  createdAt: DateTime!
+
+  """User defined description for the sales tax."""
+  description: String
+
+  """The unique identifier for the sales tax."""
+  id: ID!
+
+  """The primary key used internally at Wave."""
+  internalId: String @deprecated(reason: "Exposed internal IDs will eventually be removed in favor of global ID. Use Node.id instead.")
+
+  """Is the sales tax hidden from view by default."""
+  isArchived: Boolean!
+
+  """
+  Is a compound tax, or stacked tax. This tax is calculated on top of the subtotal and other tax amounts.
+  """
+  isCompound: Boolean!
+
+  """
+  Is a recoverable tax. It is recoverable if you can deduct the tax that you as a business paid from the tax that you have collected.
+  """
+  isRecoverable: Boolean!
+
+  """When the sales tax was last modified."""
+  modifiedAt: DateTime!
+
+  """Name of the tax."""
+  name: String!
+
+  """
+  Tax rate effective on 'for' date, or current date if no parameter, as a decimal (e.g. 0.15 represents 15%).
+  """
+  rate(for: Date): Decimal!
+
+  """Tax rates with their effective dates of application"""
+  rates: [SalesTaxRate!]!
+
+  """Display tax number beside the tax name on an invoice."""
+  showTaxNumberOnInvoices: Boolean!
+
+  """The tax's issued identification number from a taxing authority."""
+  taxNumber: String
+}
+
+"""Input to the `salesTaxArchive` mutation."""
+input SalesTaxArchiveInput {
+  """The unique identifier for the sales tax."""
+  id: ID!
+}
+
+"""Output of the `salesTaxArchive` mutation."""
+type SalesTaxArchiveOutput {
+  """Indicates whether the sales tax was successfully deleted."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Sales tax that was archived."""
+  salesTax: SalesTax
+}
+
+"""Sales tax connection."""
+type SalesTaxConnection {
+  """List of sales taxes."""
+  edges: [SalesTaxEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Input to the `salesTaxCreate` mutation."""
+input SalesTaxCreateInput {
+  """
+  An short form or code representing the sales tax. Max 10 characters, and MUST BE UNIQUE within business.
+  """
+  abbreviation: String!
+
+  """The unique identifier for the business."""
+  businessId: ID!
+
+  """User defined description for the sales tax."""
+  description: String
+
+  """
+  Is a compound tax, or stacked tax. This tax is calculated on top of the subtotal and other tax amounts.
+  """
+  isCompound: Boolean
+
+  """
+  Is a recoverable tax. It is recoverable if you can deduct the tax that you as a business paid from the tax that you have collected.
+  """
+  isRecoverable: Boolean
+
+  """Name of the tax."""
+  name: String!
+
+  """
+  The current rate, as a decimal (e.g. 0.15 represents 15%; rounded to nearest 6 decimal places with ties going away from zero).
+  """
+  rate: Decimal!
+
+  """Display tax number beside the tax name on an invoice."""
+  showTaxNumberOnInvoices: Boolean
+
+  """The tax's issued identification number from a taxing authority."""
+  taxNumber: String
+}
+
+"""Output of the `salesTaxCreate` mutation."""
+type SalesTaxCreateOutput {
+  """Indicates whether the sales tax was successfully created."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Sales tax that was created."""
+  salesTax: SalesTax
+}
+
+"""Sales tax edge."""
+type SalesTaxEdge {
+  """A sales tax."""
+  node: SalesTax
+}
+
+"""Input to the `salesTaxPatch` mutation."""
+input SalesTaxPatchInput {
+  """An short form or code representing the sales tax"""
+  abbreviation: String
+
+  """User defined description for the sales tax."""
+  description: String
+
+  """The unique identifier for the sales tax."""
+  id: ID!
+
+  """Name of the tax."""
+  name: String
+
+  """Tax rate information."""
+  rates: [SalesTaxRateInput!]
+
+  """Display tax number beside the tax name on an invoice."""
+  showTaxNumberOnInvoices: Boolean
+
+  """The tax's issued identification number from a taxing authority."""
+  taxNumber: String
+}
+
+"""Output of the `salesTaxPatch` mutation."""
+type SalesTaxPatchOutput {
+  """Indicates whether the sales tax was successfully patched."""
+  didSucceed: Boolean!
+
+  """Mutation validation errors."""
+  inputErrors: [InputError!]
+
+  """Sales tax that was patched."""
+  salesTax: SalesTax
+}
+
+"""
+A Sales Tax rate with effective date. New entry for each change of rate.
+"""
+type SalesTaxRate {
+  """Date from which the sales tax rate applies."""
+  effective: Date!
+
+  """
+  Tax rate applying from the effective date as a decimal (e.g. 0.15 represents 15%).
+  """
+  rate: Decimal!
+}
+
+"""Sales tax rate input for the `salesTaxPatch` mutation"""
+input SalesTaxRateInput {
+  """Date from which the sales tax rate applies."""
+  effective: Date!
+
+  """
+  Tax rate applying from the effective date as a decimal (e.g. 0.15 represents 15%).
+  """
+  rate: Decimal!
+}
+
+"""Wave's schemas."""
+enum Schema {
+  """Available only to HR Block integration."""
+  HRBLOCK
+
+  """Available only to Wave."""
+  INTERNAL
+
+  """Available to all third parties."""
+  PUBLIC
+
+  """Available only to Wave staff."""
+  STAFF
+}
+
+"""An created transaction."""
+type Transaction {
+  """Unique identifier for the transaction."""
+  id: ID!
+}
+
+"""Sales tax input."""
+input TransactionCreateSalesTaxInput {
+  """Tax Abbreviation."""
+  abbreviation: String!
+
+  """Tax Amount."""
+  amount: Float!
+}
+
+"""Represents the direction of a transaction."""
+enum TransactionDirection {
+  """To put in."""
+  DEPOSIT
+
+  """To remove from."""
+  WITHDRAWAL
+}
+
+"""Represents the origin of a transaction."""
+enum TransactionOrigin {
+  """Manually created transaction."""
+  MANUAL
+
+  """Transaction created through Zapier."""
+  ZAPIER
+}
+
+"""
+A field whose value conforms to the standard URL format as specified in RFC3986: https://www.ietf.org/rfc/rfc3986.txt.
+"""
+scalar URL
+
+"""A user is an individual's account."""
+type User implements Node {
+  """When the user was created."""
+  createdAt: DateTime!
+
+  """The user's primary email address."""
+  defaultEmail: String
+
+  """The user's first name."""
+  firstName: String
+
+  """The unique identifier for the user."""
+  id: ID!
+
+  """The user's last name."""
+  lastName: String
+
+  """When the user was last modified."""
+  modifiedAt: DateTime!
+}
+
+"""A vendor of the business."""
+type Vendor implements BusinessNode & Node {
+  """The address of the vendor."""
+  address: Address
+
+  """Business that the vendor belongs to."""
+  business: Business!
+
+  """When the vendor was created."""
+  createdAt: DateTime!
+
+  """Default currency used by the vendor."""
+  currency: Currency
+
+  """
+  User defined id for the vendor. Commonly referred to as Account Number.
+  """
+  displayId: String
+
+  """Email of the principal vendor."""
+  email: String
+
+  """Fax number of the vendor."""
+  fax: String
+
+  """The first name of the principal contact."""
+  firstName: String
+
+  """Unique identifier for the customer."""
+  id: ID!
+
+  """Internal notes about the vendor."""
+  internalNotes: String
+
+  """Whether or not the vendor is archived."""
+  isArchived: Boolean
+
+  """The last name of the principal contact."""
+  lastName: String
+
+  """The mobile number of the vendor."""
+  mobile: String
+
+  """When the vendor was last modified."""
+  modifiedAt: DateTime!
+
+  """Name or business name of the vendor."""
+  name: String!
+
+  """The phone number of the vendor."""
+  phone: String
+
+  """Details for shipping to the vendor."""
+  shippingDetails: VendorShippingDetails
+
+  """Toll-free number of the vendor."""
+  tollFree: String
+
+  """Website address of the vendor."""
+  website: String
+}
+
+"""Vendor connection."""
+type VendorConnection {
+  """List of vendors."""
+  edges: [VendorEdge!]!
+
+  """Information about pagination."""
+  pageInfo: OffsetPageInfo!
+}
+
+"""Vendor edge."""
+type VendorEdge {
+  """A vendor."""
+  node: Vendor!
+}
+
+"""Shipping details related to a vendor."""
+type VendorShippingDetails {
+  """Address of the vendor."""
+  address: Address
+
+  """Delivery instructions for handling."""
+  instructions: String
+
+  """Name or business name of the vendor."""
+  name: String
+
+  """Telephone number of the vendor."""
+  phone: String
+}
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/lib/server/teamDataLoader.ts b/src/lib/server/teamDataLoader.ts
new file mode 100644
index 0000000..767cf00
--- /dev/null
+++ b/src/lib/server/teamDataLoader.ts
@@ -0,0 +1,96 @@
+import type { ServicesForTeam$input, ProjectsForTeam$input } from '$houdini';
+import { fromGlobalId } from '$lib/utils/relay';
+import { getMonthDateRange } from '$lib/utils/date';
+
+export interface TeamDataParams {
+	teamProfileId: string; // Relay global ID - will be decoded to UUID
+	month: string; // YYYY-MM format
+}
+
+export interface StatusVariables<T> {
+	scheduled: T;
+	inProgress: T;
+	completed: T;
+}
+
+/**
+ * Build GraphQL variables for all service status categories
+ */
+export function buildAllServiceVariables(
+	params: TeamDataParams
+): StatusVariables<ServicesForTeam$input> {
+	const { start, end } = getMonthDateRange(params.month);
+	const baseDateFilter = { gte: start, lte: end };
+	const teamProfileId = fromGlobalId(params.teamProfileId);
+
+	return {
+		scheduled: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'SCHEDULED' }
+			},
+			ordering: 'ASC',
+			first: 20
+		},
+		inProgress: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'IN_PROGRESS' }
+			},
+			ordering: 'DESC',
+			first: 50 // Load all - typically small number
+		},
+		completed: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'COMPLETED' }
+			},
+			ordering: 'DESC',
+			first: 20
+		}
+	};
+}
+
+/**
+ * Build GraphQL variables for all project status categories
+ */
+export function buildAllProjectVariables(
+	params: TeamDataParams
+): StatusVariables<ProjectsForTeam$input> {
+	const { start, end } = getMonthDateRange(params.month);
+	const baseDateFilter = { gte: start, lte: end };
+	const teamProfileId = fromGlobalId(params.teamProfileId);
+
+	return {
+		scheduled: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'SCHEDULED' }
+			},
+			ordering: 'ASC',
+			first: 20
+		},
+		inProgress: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'IN_PROGRESS' }
+			},
+			ordering: 'DESC',
+			first: 50 // Load all - typically small number
+		},
+		completed: {
+			teamProfileId,
+			filters: {
+				date: baseDateFilter,
+				status: { exact: 'COMPLETED' }
+			},
+			ordering: 'DESC',
+			first: 20
+		}
+	};
+}
diff --git a/src/lib/services/calendar.ts b/src/lib/services/calendar.ts
new file mode 100644
index 0000000..db5059c
--- /dev/null
+++ b/src/lib/services/calendar.ts
@@ -0,0 +1,219 @@
+import { PUBLIC_CALENDAR_API_URL, PUBLIC_CALENDAR_API_KEY } from '$env/static/public';
+
+// Types matching the scheduler microservice API
+
+export interface EventDateTime {
+	dateTime?: string; // ISO 8601 datetime (e.g., "2023-06-15T10:00:00Z")
+	date?: string; // For all-day events (YYYY-MM-DD format)
+	timeZone?: string; // Optional timezone (e.g., "UTC", "America/New_York")
+}
+
+export interface Attendee {
+	email: string;
+	displayName?: string;
+	optional?: boolean;
+}
+
+export interface EventReminder {
+	method: 'email' | 'popup'; // Notification method
+	minutes: number; // Minutes before event to send reminder
+}
+
+export interface EventReminders {
+	useDefault: boolean; // Whether to use the calendar's default reminders
+	overrides?: EventReminder[]; // Custom reminders (only used if useDefault is false)
+}
+
+export interface CalendarEvent {
+	id: string;
+	summary: string;
+	description?: string;
+	location?: string;
+	start: EventDateTime;
+	end: EventDateTime;
+	attendees?: Attendee[];
+	reminders?: EventReminders;
+	colorId?: string;
+	htmlLink?: string;
+	created?: string;
+	updated?: string;
+}
+
+// Google Calendar color IDs and their display values
+export const EVENT_COLORS = [
+	{ id: '1', name: 'Lavender', bg: 'bg-purple-300', text: 'text-purple-900' },
+	{ id: '2', name: 'Sage', bg: 'bg-green-300', text: 'text-green-900' },
+	{ id: '3', name: 'Grape', bg: 'bg-violet-400', text: 'text-violet-900' },
+	{ id: '4', name: 'Flamingo', bg: 'bg-pink-400', text: 'text-pink-900' },
+	{ id: '5', name: 'Banana', bg: 'bg-yellow-300', text: 'text-yellow-900' },
+	{ id: '6', name: 'Tangerine', bg: 'bg-orange-400', text: 'text-orange-900' },
+	{ id: '7', name: 'Peacock', bg: 'bg-cyan-500', text: 'text-cyan-900' },
+	{ id: '8', name: 'Graphite', bg: 'bg-gray-400', text: 'text-gray-900' },
+	{ id: '9', name: 'Blueberry', bg: 'bg-blue-500', text: 'text-blue-100' },
+	{ id: '10', name: 'Basil', bg: 'bg-emerald-600', text: 'text-emerald-100' },
+	{ id: '11', name: 'Tomato', bg: 'bg-red-500', text: 'text-red-100' }
+] as const;
+
+export function getEventColor(colorId?: string) {
+	return EVENT_COLORS.find((c) => c.id === colorId) ?? null;
+}
+
+export interface CreateEventInput {
+	id?: string; // Optional custom ID (5-1024 chars, a-v + 0-9 only)
+	summary: string;
+	description?: string;
+	location?: string;
+	start: EventDateTime;
+	end: EventDateTime;
+	attendees?: Attendee[];
+	reminders?: EventReminders;
+	colorId?: string;
+}
+
+export interface UpdateEventInput {
+	summary?: string;
+	description?: string;
+	location?: string;
+	start?: EventDateTime;
+	end?: EventDateTime;
+	attendees?: Attendee[];
+	reminders?: EventReminders;
+	colorId?: string;
+}
+
+export interface ListEventsParams {
+	timeMin?: string; // RFC3339 format
+	timeMax?: string; // RFC3339 format
+	maxResults?: number;
+	q?: string; // Search query
+}
+
+export interface CalendarError {
+	error: string;
+	message: string;
+}
+
+class CalendarService {
+	private baseUrl: string;
+	private apiKey: string;
+
+	constructor() {
+		this.baseUrl = PUBLIC_CALENDAR_API_URL;
+		this.apiKey = PUBLIC_CALENDAR_API_KEY;
+	}
+
+	private async request<T>(
+		endpoint: string,
+		options: RequestInit = {}
+	): Promise<{ data?: T; error?: CalendarError }> {
+		const url = `${this.baseUrl}${endpoint}`;
+
+		const headers: HeadersInit = {
+			'X-API-Key': this.apiKey,
+			'Content-Type': 'application/json',
+			...options.headers
+		};
+
+		try {
+			const response = await fetch(url, {
+				...options,
+				headers
+			});
+
+			// Handle 204 No Content (for delete operations)
+			if (response.status === 204) {
+				return { data: undefined };
+			}
+
+			const data = await response.json();
+
+			if (!response.ok) {
+				return { error: data as CalendarError };
+			}
+
+			return { data: data as T };
+		} catch (err) {
+			console.error('Calendar API error:', err);
+			return {
+				error: {
+					error: 'NetworkError',
+					message: err instanceof Error ? err.message : 'Unknown network error'
+				}
+			};
+		}
+	}
+
+	/**
+	 * List calendar events with optional filters
+	 */
+	async listEvents(params: ListEventsParams = {}): Promise<{
+		data?: CalendarEvent[];
+		error?: CalendarError;
+	}> {
+		const searchParams = new URLSearchParams();
+
+		if (params.timeMin) searchParams.set('timeMin', params.timeMin);
+		if (params.timeMax) searchParams.set('timeMax', params.timeMax);
+		if (params.maxResults) searchParams.set('maxResults', params.maxResults.toString());
+		if (params.q) searchParams.set('q', params.q);
+
+		const queryString = searchParams.toString();
+		const endpoint = `/events${queryString ? `?${queryString}` : ''}`;
+
+		return this.request<CalendarEvent[]>(endpoint);
+	}
+
+	/**
+	 * Get a single calendar event by ID
+	 */
+	async getEvent(eventId: string): Promise<{ data?: CalendarEvent; error?: CalendarError }> {
+		return this.request<CalendarEvent>(`/events/${eventId}`);
+	}
+
+	/**
+	 * Create a new calendar event
+	 */
+	async createEvent(
+		input: CreateEventInput
+	): Promise<{ data?: CalendarEvent; error?: CalendarError }> {
+		return this.request<CalendarEvent>('/events', {
+			method: 'POST',
+			body: JSON.stringify(input)
+		});
+	}
+
+	/**
+	 * Update an existing calendar event (partial updates supported)
+	 */
+	async updateEvent(
+		eventId: string,
+		input: UpdateEventInput
+	): Promise<{ data?: CalendarEvent; error?: CalendarError }> {
+		return this.request<CalendarEvent>(`/events/${eventId}`, {
+			method: 'PUT',
+			body: JSON.stringify(input)
+		});
+	}
+
+	/**
+	 * Delete a calendar event
+	 */
+	async deleteEvent(eventId: string): Promise<{ error?: CalendarError }> {
+		return this.request<void>(`/events/${eventId}`, {
+			method: 'DELETE'
+		});
+	}
+
+	/**
+	 * Health check for the calendar service
+	 */
+	async healthCheck(): Promise<{ data?: { status: string }; error?: CalendarError }> {
+		return this.request<{ status: string }>('/health');
+	}
+}
+
+// Export singleton instance
+export const calendarService = new CalendarService();
+
+// Export class for testing or custom instances
+export { CalendarService };
diff --git a/src/lib/services/email.ts b/src/lib/services/email.ts
new file mode 100644
index 0000000..104c886
--- /dev/null
+++ b/src/lib/services/email.ts
@@ -0,0 +1,307 @@
+import { PUBLIC_EMAIL_API_URL, PUBLIC_EMAIL_API_KEY } from '$env/static/public';
+
+// Types matching the emailer microservice API
+
+export interface EmailError {
+	error: string;
+	message: string;
+}
+
+export interface EmailAttachment {
+	filename: string;
+	content: string; // base64 encoded
+	contentType: string;
+}
+
+export interface SendEmailInput {
+	to: string[];
+	cc?: string[];
+	bcc?: string[];
+	subject: string;
+	body: string;
+	contentType?: 'text/html' | 'text/plain';
+	fromName?: string;
+	attachments?: EmailAttachment[];
+}
+
+export interface EmailHeader {
+	name: string;
+	value: string;
+}
+
+export interface EmailBody {
+	attachmentId?: string;
+	size?: number;
+	data?: string; // base64 encoded
+}
+
+export interface EmailPayload {
+	partId?: string;
+	mimeType?: string;
+	filename?: string;
+	headers?: EmailHeader[];
+	body?: EmailBody;
+	parts?: EmailPayload[];
+}
+
+export interface EmailMessage {
+	id: string;
+	threadId: string;
+	labelIds?: string[];
+	snippet?: string;
+	payload?: EmailPayload;
+	sizeEstimate?: number;
+	historyId?: string;
+	internalDate?: string;
+}
+
+export interface EmailMessageRef {
+	id: string;
+	threadId: string;
+}
+
+export interface ListEmailsResponse {
+	messages?: EmailMessageRef[];
+	nextPageToken?: string;
+	resultSizeEstimate?: number;
+}
+
+export interface ListEmailsParams {
+	q?: string; // Gmail search query
+	maxResults?: number;
+	pageToken?: string;
+	labelIds?: string[];
+	includeSpamTrash?: boolean;
+}
+
+export interface EmailTemplate {
+	templateId: string;
+	subjectTemplate: string;
+	bodyTemplate: string;
+	variables: Record<string, string>;
+}
+
+export interface SendTemplateInput {
+	to: string[];
+	cc?: string[];
+	bcc?: string[];
+	templateId: string;
+	variables: Record<string, string>;
+}
+
+class EmailService {
+	private readonly baseUrl: string;
+	private readonly apiKey: string;
+
+	constructor() {
+		this.baseUrl = PUBLIC_EMAIL_API_URL;
+		this.apiKey = PUBLIC_EMAIL_API_KEY;
+	}
+
+	private async request<T>(
+		endpoint: string,
+		options: RequestInit = {},
+		impersonateUser?: string
+	): Promise<{ data?: T; error?: EmailError }> {
+		const url = `${this.baseUrl}${endpoint}`;
+
+		const headers: HeadersInit = {
+			'X-API-Key': this.apiKey,
+			'Content-Type': 'application/json',
+			...options.headers
+		};
+
+		if (impersonateUser) {
+			(headers as Record<string, string>)['X-Impersonate-User'] = impersonateUser;
+		}
+
+		try {
+			const response = await fetch(url, {
+				...options,
+				headers
+			});
+
+			// Handle 204 No Content (for delete operations)
+			if (response.status === 204) {
+				return { data: undefined };
+			}
+
+			const data = await response.json();
+
+			if (!response.ok) {
+				return { error: data as EmailError };
+			}
+
+			return { data: data as T };
+		} catch (err) {
+			console.error('Email API error:', err);
+			return {
+				error: {
+					error: 'NetworkError',
+					message: err instanceof Error ? err.message : 'Unknown network error'
+				}
+			};
+		}
+	}
+
+	/**
+	 * Send an email
+	 */
+	async sendEmail(
+		input: SendEmailInput,
+		impersonateUser?: string
+	): Promise<{ data?: EmailMessage; error?: EmailError }> {
+		return this.request<EmailMessage>(
+			'/emails',
+			{
+				method: 'POST',
+				body: JSON.stringify(input)
+			},
+			impersonateUser
+		);
+	}
+
+	/**
+	 * List emails with optional filters
+	 */
+	async listEmails(
+		params: ListEmailsParams = {},
+		impersonateUser?: string
+	): Promise<{ data?: ListEmailsResponse; error?: EmailError }> {
+		const searchParams = new URLSearchParams();
+
+		if (params.q) searchParams.set('q', params.q);
+		if (params.maxResults) searchParams.set('maxResults', params.maxResults.toString());
+		if (params.pageToken) searchParams.set('pageToken', params.pageToken);
+		if (params.labelIds) {
+			params.labelIds.forEach((id) => searchParams.append('labelIds', id));
+		}
+		if (params.includeSpamTrash !== undefined) {
+			searchParams.set('includeSpamTrash', params.includeSpamTrash.toString());
+		}
+
+		const queryString = searchParams.toString();
+		const endpoint = `/emails${queryString ? `?${queryString}` : ''}`;
+
+		return this.request<ListEmailsResponse>(endpoint, {}, impersonateUser);
+	}
+
+	/**
+	 * Get a single email by ID
+	 */
+	async getEmail(
+		emailId: string,
+		impersonateUser?: string
+	): Promise<{ data?: EmailMessage; error?: EmailError }> {
+		return this.request<EmailMessage>(`/emails/${emailId}`, {}, impersonateUser);
+	}
+
+	/**
+	 * Delete an email
+	 */
+	async deleteEmail(emailId: string, impersonateUser?: string): Promise<{ error?: EmailError }> {
+		return this.request<void>(
+			`/emails/${emailId}`,
+			{
+				method: 'DELETE'
+			},
+			impersonateUser
+		);
+	}
+
+	/**
+	 * Mark an email as read
+	 */
+	async markAsRead(
+		emailId: string,
+		impersonateUser?: string
+	): Promise<{ data?: EmailMessage; error?: EmailError }> {
+		return this.request<EmailMessage>(
+			`/emails/${emailId}/read`,
+			{
+				method: 'POST'
+			},
+			impersonateUser
+		);
+	}
+
+	/**
+	 * Mark an email as unread
+	 */
+	async markAsUnread(
+		emailId: string,
+		impersonateUser?: string
+	): Promise<{ data?: EmailMessage; error?: EmailError }> {
+		return this.request<EmailMessage>(
+			`/emails/${emailId}/unread`,
+			{
+				method: 'POST'
+			},
+			impersonateUser
+		);
+	}
+
+	/**
+	 * List available email templates
+	 */
+	async listTemplates(): Promise<{ data?: string[]; error?: EmailError }> {
+		return this.request<string[]>('/templates');
+	}
+
+	/**
+	 * Get a template by ID
+	 */
+	async getTemplate(templateId: string): Promise<{ data?: EmailTemplate; error?: EmailError }> {
+		return this.request<EmailTemplate>(`/templates/${templateId}`);
+	}
+
+	/**
+	 * Send an email using a template
+	 */
+	async sendTemplate(
+		input: SendTemplateInput,
+		impersonateUser?: string
+	): Promise<{ data?: EmailMessage; error?: EmailError }> {
+		return this.request<EmailMessage>(
+			'/templates/send',
+			{
+				method: 'POST',
+				body: JSON.stringify(input)
+			},
+			impersonateUser
+		);
+	}
+
+	/**
+	 * Health check for the email service
+	 */
+	async healthCheck(): Promise<{ data?: { status: string; message: string }; error?: EmailError }> {
+		// Health endpoint is at root, not under /api/v1
+		const url = this.baseUrl.replace('/api/v1', '') + '/health';
+
+		try {
+			const response = await fetch(url);
+			const data = await response.json();
+
+			if (!response.ok) {
+				return { error: data as EmailError };
+			}
+
+			return { data: data as { status: string; message: string } };
+		} catch (err) {
+			console.error('Email API health check error:', err);
+			return {
+				error: {
+					error: 'NetworkError',
+					message: err instanceof Error ? err.message : 'Unknown network error'
+				}
+			};
+		}
+	}
+}
+
+// Export singleton instance
+export const emailService = new EmailService();
+
+// Export class for testing or custom instances
+export { EmailService };
diff --git a/src/lib/stores/assignServices.svelte.ts b/src/lib/stores/assignServices.svelte.ts
new file mode 100644
index 0000000..2edd4e3
--- /dev/null
+++ b/src/lib/stores/assignServices.svelte.ts
@@ -0,0 +1,895 @@
+import { AdminServicesStore, UpdateServiceStore, DeleteServiceStore } from '$houdini';
+import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+import { formatAddress, type AccountAddressInfo } from '$lib/utils/lookup';
+import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
+
+// Enriched service type
+export type EnrichedService = {
+	id: string;
+	date: string;
+	status: string;
+	notes: string | null;
+	teamMembers: { pk: string }[];
+	accountAddressId: string;
+	accountName: string;
+	addressName: string | null;
+	address: string | null;
+};
+
+export type ViewMode = 'date' | 'week' | 'account';
+export type TabType = 'unassigned' | 'readyToAssign' | 'assigned';
+export type ColumnType = TabType;
+
+export interface TeamProfile {
+	id: string;
+	fullName: string;
+	role: string;
+}
+
+export function createAssignServicesStore() {
+	// Services stores (mutation stores don't need state)
+	const servicesStore = new AdminServicesStore();
+	const updateServiceStore = new UpdateServiceStore();
+	const deleteServiceStore = new DeleteServiceStore();
+
+	// Store fetched services data
+	let servicesData = $state<
+		{
+			id: string;
+			date: string;
+			status: string;
+			notes: string | null;
+			accountAddressId: string;
+			teamMembers: { pk: string }[] | null;
+		}[]
+	>([]);
+
+	// External data (set via init)
+	const accountLookup = new SvelteMap<string, AccountAddressInfo>();
+	let teamProfiles = $state<TeamProfile[]>([]);
+
+	// Computed from team profiles
+	const dispatchProfile = $derived(teamProfiles.find((p) => p.role === 'ADMIN') ?? null);
+	const dispatchProfilePk = $derived(dispatchProfile ? fromGlobalId(dispatchProfile.id) : null);
+	const dispatchProfileGlobalId = $derived(dispatchProfile?.id ?? null);
+	const nonAdminTeamMembers = $derived(teamProfiles.filter((p) => p.role !== 'ADMIN'));
+
+	// UI State
+	let currentMonth = new SvelteDate();
+	let isLoading = $state(true);
+	let error = $state('');
+	let viewMode = $state<ViewMode>('date');
+	let activeTab = $state<TabType>('unassigned');
+
+	// Track services currently being updated
+	const updatingServices = new SvelteSet<string>();
+
+	// Track which service is being date-edited
+	let editingDateServiceId = $state<string | null>(null);
+
+	// Optimistic updates for team members
+	const optimisticUpdates = new SvelteMap<string, { pk: string }[]>();
+
+	// Staged team members (not yet submitted)
+	const stagedTeamMembers = new SvelteMap<string, string[]>();
+
+	// Track which service has dropdown open
+	let openTeamMemberDropdown = $state<string | null>(null);
+
+	// Track expanded groups per column
+	const expandedUnassigned = new SvelteSet<string>();
+	const expandedReadyToAssign = new SvelteSet<string>();
+	const expandedAssigned = new SvelteSet<string>();
+
+	// Bulk selection state per column
+	const selectedUnassigned = new SvelteSet<string>();
+	const selectedReadyToAssign = new SvelteSet<string>();
+	const selectedAssigned = new SvelteSet<string>();
+
+	// Bulk operation state
+	let isBulkOperating = $state(false);
+	let bulkSelectedTeamMember = $state<string | null>(null);
+	let showBulkTeamMemberDropdown = $state(false);
+
+	// Delete modal state
+	let showDeleteModal = $state(false);
+	let serviceToDelete = $state<{
+		id: string;
+		accountName: string;
+		date: string;
+	} | null>(null);
+	let isDeleting = $state(false);
+
+	// Initialize with external data
+	function init(lookup: Map<string, AccountAddressInfo>, profiles: TeamProfile[]) {
+		accountLookup.clear();
+		for (const [key, value] of lookup) {
+			accountLookup.set(key, value);
+		}
+		teamProfiles = profiles;
+	}
+
+	// Fetch services for current month
+	async function fetchServices() {
+		isLoading = true;
+		error = '';
+
+		const year = currentMonth.getFullYear();
+		const month = currentMonth.getMonth() + 1;
+		const startDate = `${year}-${String(month).padStart(2, '0')}-01`;
+		const lastDay = new SvelteDate(year, month, 0).getDate();
+		const endDate = `${year}-${String(month).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+
+		try {
+			const result = await servicesStore.fetch({
+				variables: {
+					filters: {
+						date: { gte: startDate, lte: endDate },
+						status: { exact: 'SCHEDULED' }
+					}
+				}
+			});
+			servicesData = result.data?.services ?? [];
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load services';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	// Enrich services with account info
+	const enrichedServices = $derived.by(() => {
+		const result: EnrichedService[] = [];
+
+		for (const service of servicesData) {
+			const accountInfo = service.accountAddressId
+				? accountLookup.get(service.accountAddressId)
+				: null;
+
+			if (!accountInfo) continue;
+
+			const teamMembers = optimisticUpdates.has(service.id)
+				? optimisticUpdates.get(service.id)!
+				: (service.teamMembers ?? []);
+
+			result.push({
+				id: service.id,
+				date: service.date,
+				status: service.status,
+				notes: service.notes,
+				teamMembers,
+				accountAddressId: service.accountAddressId,
+				accountName: accountInfo.accountName,
+				addressName: accountInfo.addressName ?? null,
+				address: formatAddress(accountInfo)
+			});
+		}
+
+		return result.sort((a, b) => a.date.localeCompare(b.date));
+	});
+
+	// Categorize services
+	const categorizedServices = $derived.by(() => {
+		const unassigned: EnrichedService[] = [];
+		const readyToAssign: EnrichedService[] = [];
+		const assigned: EnrichedService[] = [];
+
+		for (const service of enrichedServices) {
+			const hasTeam = service.teamMembers.length > 0;
+			const hasDispatch = dispatchProfilePk
+				? service.teamMembers.some((m) => m.pk === dispatchProfilePk)
+				: false;
+			const hasOthers = service.teamMembers.length > (hasDispatch ? 1 : 0);
+
+			if (!hasTeam) {
+				unassigned.push(service);
+			} else if (hasDispatch && hasOthers) {
+				assigned.push(service);
+			} else if (hasDispatch) {
+				readyToAssign.push(service);
+			} else {
+				unassigned.push(service);
+			}
+		}
+
+		return { unassigned, readyToAssign, assigned };
+	});
+
+	// Grouping functions
+	function groupByDate(services: EnrichedService[]): Map<string, EnrichedService[]> {
+		const groups = new SvelteMap<string, EnrichedService[]>();
+		for (const service of services) {
+			const date = new SvelteDate(service.date + 'T00:00:00');
+			const key = date.toLocaleDateString('en-US', {
+				weekday: 'short',
+				month: 'short',
+				day: 'numeric'
+			});
+			const existing = groups.get(key) ?? [];
+			existing.push(service);
+			groups.set(key, existing);
+		}
+		return groups;
+	}
+
+	function groupByWeek(services: EnrichedService[]): Map<string, EnrichedService[]> {
+		const groups = new SvelteMap<string, EnrichedService[]>();
+		for (const service of services) {
+			const date = new SvelteDate(service.date + 'T00:00:00');
+			const dayOfWeek = date.getDay();
+			const weekStart = new SvelteDate(date);
+			weekStart.setDate(date.getDate() - dayOfWeek);
+			const weekEnd = new SvelteDate(weekStart);
+			weekEnd.setDate(weekStart.getDate() + 6);
+
+			const key = `${weekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`;
+			const existing = groups.get(key) ?? [];
+			existing.push(service);
+			groups.set(key, existing);
+		}
+		return groups;
+	}
+
+	function groupByAccount(services: EnrichedService[]): Map<string, EnrichedService[]> {
+		const groups = new SvelteMap<string, EnrichedService[]>();
+		for (const service of services) {
+			const key = service.accountName;
+			const existing = groups.get(key) ?? [];
+			existing.push(service);
+			groups.set(key, existing);
+		}
+		return new SvelteMap([...groups.entries()].sort((a, b) => a[0].localeCompare(b[0])));
+	}
+
+	function getGroupedServices(services: EnrichedService[]): Map<string, EnrichedService[]> {
+		switch (viewMode) {
+			case 'date':
+				return groupByDate(services);
+			case 'week':
+				return groupByWeek(services);
+			case 'account':
+				return groupByAccount(services);
+		}
+	}
+
+	// Grouped data
+	const groupedUnassigned = $derived(getGroupedServices(categorizedServices.unassigned));
+	const groupedReadyToAssign = $derived(getGroupedServices(categorizedServices.readyToAssign));
+	const groupedAssigned = $derived(getGroupedServices(categorizedServices.assigned));
+
+	// Month navigation
+	function previousMonth() {
+		currentMonth = new SvelteDate(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
+	}
+
+	function nextMonth() {
+		currentMonth = new SvelteDate(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
+	}
+
+	function goToCurrentMonth() {
+		currentMonth = new SvelteDate();
+	}
+
+	const monthDisplay = $derived(
+		currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+	);
+
+	// Tab navigation
+	const tabOrder: TabType[] = ['unassigned', 'readyToAssign', 'assigned'];
+
+	function previousTab() {
+		const currentIndex = tabOrder.indexOf(activeTab);
+		activeTab = tabOrder[(currentIndex - 1 + tabOrder.length) % tabOrder.length];
+	}
+
+	function nextTab() {
+		const currentIndex = tabOrder.indexOf(activeTab);
+		activeTab = tabOrder[(currentIndex + 1) % tabOrder.length];
+	}
+
+	// Toggle group expansion
+	function toggleGroup(column: ColumnType, groupKey: string) {
+		const set =
+			column === 'unassigned'
+				? expandedUnassigned
+				: column === 'readyToAssign'
+					? expandedReadyToAssign
+					: expandedAssigned;
+		if (set.has(groupKey)) {
+			set.delete(groupKey);
+		} else {
+			set.add(groupKey);
+		}
+	}
+
+	// Reset expanded groups when view mode changes
+	function resetExpandedGroups() {
+		expandedUnassigned.clear();
+		expandedReadyToAssign.clear();
+		expandedAssigned.clear();
+	}
+
+	// Get team member names
+	function getTeamMemberNames(teamMembers: { pk: string }[]): string[] {
+		return teamMembers
+			.map((m) => {
+				const profile = teamProfiles.find((p) => fromGlobalId(p.id) === m.pk);
+				return profile?.fullName ?? null;
+			})
+			.filter((name): name is string => name !== null);
+	}
+
+	function getNonDispatchTeamMemberNames(teamMembers: { pk: string }[]): string[] {
+		return teamMembers
+			.filter((m) => m.pk !== dispatchProfilePk)
+			.map((m) => {
+				const profile = teamProfiles.find((p) => fromGlobalId(p.id) === m.pk);
+				return profile?.fullName ?? null;
+			})
+			.filter((name): name is string => name !== null);
+	}
+
+	// Service operations
+	// Helper to update servicesData after successful mutation
+	function updateServiceTeamMembers(serviceId: string, newTeamMembers: { pk: string }[]) {
+		servicesData = servicesData.map((s) =>
+			s.id === serviceId ? { ...s, teamMembers: newTeamMembers } : s
+		);
+	}
+
+	async function addDispatchToService(service: EnrichedService) {
+		if (!dispatchProfilePk || !dispatchProfileGlobalId) return;
+		if (updatingServices.has(service.id)) return;
+
+		const currentPks = service.teamMembers.map((m) => m.pk);
+		const newPks = [...currentPks, dispatchProfilePk];
+		const newTeamMembers = newPks.map((pk) => ({ pk }));
+		const teamMemberGlobalIds = newPks.map((pk) => toGlobalId('TeamProfileType', pk));
+
+		optimisticUpdates.set(service.id, newTeamMembers);
+		updatingServices.add(service.id);
+
+		try {
+			await updateServiceStore.mutate({
+				input: {
+					id: service.id,
+					teamMemberIds: teamMemberGlobalIds
+				}
+			});
+			updateServiceTeamMembers(service.id, newTeamMembers);
+			optimisticUpdates.delete(service.id);
+		} catch (e) {
+			optimisticUpdates.delete(service.id);
+			error = e instanceof Error ? e.message : 'Failed to add dispatch';
+		} finally {
+			updatingServices.delete(service.id);
+		}
+	}
+
+	async function removeDispatchFromService(service: EnrichedService) {
+		if (!dispatchProfilePk) return;
+		if (updatingServices.has(service.id)) return;
+
+		const newPks = service.teamMembers.map((m) => m.pk).filter((pk) => pk !== dispatchProfilePk);
+		const newTeamMembers = newPks.map((pk) => ({ pk }));
+		const teamMemberGlobalIds = newPks.map((pk) => toGlobalId('TeamProfileType', pk));
+
+		optimisticUpdates.set(service.id, newTeamMembers);
+		updatingServices.add(service.id);
+
+		try {
+			await updateServiceStore.mutate({
+				input: {
+					id: service.id,
+					teamMemberIds: teamMemberGlobalIds
+				}
+			});
+			updateServiceTeamMembers(service.id, newTeamMembers);
+			optimisticUpdates.delete(service.id);
+			stagedTeamMembers.delete(service.id);
+		} catch (e) {
+			optimisticUpdates.delete(service.id);
+			error = e instanceof Error ? e.message : 'Failed to remove dispatch';
+		} finally {
+			updatingServices.delete(service.id);
+		}
+	}
+
+	async function removeNonDispatchMembers(service: EnrichedService) {
+		if (!dispatchProfilePk) return;
+		if (updatingServices.has(service.id)) return;
+
+		const newTeamMembers = [{ pk: dispatchProfilePk }];
+		const teamMemberGlobalIds = [toGlobalId('TeamProfileType', dispatchProfilePk)];
+
+		optimisticUpdates.set(service.id, newTeamMembers);
+		updatingServices.add(service.id);
+
+		try {
+			await updateServiceStore.mutate({
+				input: {
+					id: service.id,
+					teamMemberIds: teamMemberGlobalIds
+				}
+			});
+			updateServiceTeamMembers(service.id, newTeamMembers);
+			optimisticUpdates.delete(service.id);
+		} catch (e) {
+			optimisticUpdates.delete(service.id);
+			error = e instanceof Error ? e.message : 'Failed to remove team members';
+		} finally {
+			updatingServices.delete(service.id);
+		}
+	}
+
+	// Staging functions
+	function getAvailableTeamMembers(service: EnrichedService): { pk: string; name: string }[] {
+		const assignedPks = new SvelteSet(service.teamMembers.map((m) => m.pk));
+		const stagedPks = new SvelteSet(stagedTeamMembers.get(service.id) ?? []);
+
+		return nonAdminTeamMembers
+			.filter((p) => {
+				const pk = fromGlobalId(p.id);
+				if (!pk) return false;
+				if (assignedPks.has(pk)) return false;
+				return !stagedPks.has(pk);
+			})
+			.map((p) => ({
+				pk: fromGlobalId(p.id)!,
+				name: p.fullName
+			}));
+	}
+
+	function getStagedTeamMemberDetails(serviceId: string): { pk: string; name: string }[] {
+		const staged = stagedTeamMembers.get(serviceId) ?? [];
+		return staged
+			.map((pk) => {
+				const profile = teamProfiles.find((p) => fromGlobalId(p.id) === pk);
+				return profile ? { pk, name: profile.fullName } : null;
+			})
+			.filter((m): m is { pk: string; name: string } => m !== null);
+	}
+
+	function stageTeamMember(serviceId: string, memberPk: string) {
+		const current = stagedTeamMembers.get(serviceId) ?? [];
+		if (!current.includes(memberPk)) {
+			stagedTeamMembers.set(serviceId, [...current, memberPk]);
+		}
+		openTeamMemberDropdown = null;
+	}
+
+	function unstageTeamMember(serviceId: string, memberPk: string) {
+		const current = stagedTeamMembers.get(serviceId) ?? [];
+		stagedTeamMembers.set(
+			serviceId,
+			current.filter((pk) => pk !== memberPk)
+		);
+	}
+
+	function hasStagedMembers(serviceId: string): boolean {
+		const staged = stagedTeamMembers.get(serviceId);
+		return staged !== undefined && staged.length > 0;
+	}
+
+	async function submitStagedTeamMembers(service: EnrichedService) {
+		const staged = stagedTeamMembers.get(service.id);
+		if (!staged || staged.length === 0) return;
+		if (updatingServices.has(service.id)) return;
+
+		const currentPks = service.teamMembers.map((m) => m.pk);
+		const newPks = [...currentPks, ...staged];
+		const newTeamMembers = newPks.map((pk) => ({ pk }));
+		const teamMemberGlobalIds = newPks.map((pk) => toGlobalId('TeamProfileType', pk));
+
+		optimisticUpdates.set(service.id, newTeamMembers);
+		updatingServices.add(service.id);
+
+		try {
+			await updateServiceStore.mutate({
+				input: {
+					id: service.id,
+					teamMemberIds: teamMemberGlobalIds
+				}
+			});
+			updateServiceTeamMembers(service.id, newTeamMembers);
+			optimisticUpdates.delete(service.id);
+			stagedTeamMembers.delete(service.id);
+		} catch (e) {
+			optimisticUpdates.delete(service.id);
+			error = e instanceof Error ? e.message : 'Failed to assign team members';
+		} finally {
+			updatingServices.delete(service.id);
+		}
+	}
+
+	// Date editing
+	async function updateServiceDate(service: EnrichedService, newDate: string) {
+		if (updatingServices.has(service.id)) return;
+
+		updatingServices.add(service.id);
+		editingDateServiceId = null;
+
+		try {
+			await updateServiceStore.mutate({
+				input: {
+					id: service.id,
+					date: newDate
+				}
+			});
+			await fetchServices();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update date';
+		} finally {
+			updatingServices.delete(service.id);
+		}
+	}
+
+	function startEditDate(serviceId: string) {
+		editingDateServiceId = serviceId;
+	}
+
+	function cancelEditDate() {
+		editingDateServiceId = null;
+	}
+
+	// Delete operations
+	function promptDeleteService(service: EnrichedService) {
+		serviceToDelete = {
+			id: service.id,
+			accountName: service.accountName,
+			date: service.date
+		};
+		showDeleteModal = true;
+	}
+
+	async function confirmDeleteService() {
+		if (!serviceToDelete) return;
+
+		isDeleting = true;
+
+		try {
+			await deleteServiceStore.mutate({
+				id: serviceToDelete.id
+			});
+			showDeleteModal = false;
+			serviceToDelete = null;
+			await fetchServices();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete service';
+		} finally {
+			isDeleting = false;
+		}
+	}
+
+	function cancelDeleteService() {
+		showDeleteModal = false;
+		serviceToDelete = null;
+	}
+
+	// Selection functions
+	function toggleServiceSelection(column: ColumnType, serviceId: string) {
+		const set =
+			column === 'unassigned'
+				? selectedUnassigned
+				: column === 'readyToAssign'
+					? selectedReadyToAssign
+					: selectedAssigned;
+		if (set.has(serviceId)) {
+			set.delete(serviceId);
+		} else {
+			set.add(serviceId);
+		}
+	}
+
+	function selectAllInColumn(column: ColumnType) {
+		const services =
+			column === 'unassigned'
+				? categorizedServices.unassigned
+				: column === 'readyToAssign'
+					? categorizedServices.readyToAssign
+					: categorizedServices.assigned;
+		const set =
+			column === 'unassigned'
+				? selectedUnassigned
+				: column === 'readyToAssign'
+					? selectedReadyToAssign
+					: selectedAssigned;
+		for (const service of services) {
+			set.add(service.id);
+		}
+	}
+
+	function clearColumnSelection(column: ColumnType) {
+		const set =
+			column === 'unassigned'
+				? selectedUnassigned
+				: column === 'readyToAssign'
+					? selectedReadyToAssign
+					: selectedAssigned;
+		set.clear();
+		if (column === 'readyToAssign') {
+			bulkSelectedTeamMember = null;
+			showBulkTeamMemberDropdown = false;
+		}
+	}
+
+	function getSelectedServices(column: ColumnType): EnrichedService[] {
+		const services =
+			column === 'unassigned'
+				? categorizedServices.unassigned
+				: column === 'readyToAssign'
+					? categorizedServices.readyToAssign
+					: categorizedServices.assigned;
+		const set =
+			column === 'unassigned'
+				? selectedUnassigned
+				: column === 'readyToAssign'
+					? selectedReadyToAssign
+					: selectedAssigned;
+		return services.filter((s) => set.has(s.id));
+	}
+
+	// Bulk operations
+	async function bulkAddDispatch() {
+		if (!dispatchProfilePk || !dispatchProfileGlobalId) return;
+		const selected = getSelectedServices('unassigned');
+		if (selected.length === 0) return;
+
+		isBulkOperating = true;
+		error = '';
+
+		try {
+			for (const service of selected) {
+				if (updatingServices.has(service.id)) continue;
+
+				const currentPks = service.teamMembers.map((m) => m.pk);
+				const newPks = [...currentPks, dispatchProfilePk];
+				const teamMemberGlobalIds = newPks.map((pk) => toGlobalId('TeamProfileType', pk));
+
+				updatingServices.add(service.id);
+				await updateServiceStore.mutate({
+					input: {
+						id: service.id,
+						teamMemberIds: teamMemberGlobalIds
+					}
+				});
+				updatingServices.delete(service.id);
+			}
+			selectedUnassigned.clear();
+			await fetchServices();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to add dispatch to services';
+		} finally {
+			isBulkOperating = false;
+		}
+	}
+
+	async function bulkAddTeamMember() {
+		if (!bulkSelectedTeamMember || !dispatchProfilePk) return;
+		const selected = getSelectedServices('readyToAssign');
+		if (selected.length === 0) return;
+
+		isBulkOperating = true;
+		error = '';
+
+		try {
+			for (const service of selected) {
+				if (updatingServices.has(service.id)) continue;
+
+				const currentPks = service.teamMembers.map((m) => m.pk);
+				const newPks = currentPks.includes(bulkSelectedTeamMember)
+					? currentPks
+					: [...currentPks, bulkSelectedTeamMember];
+				const teamMemberGlobalIds = newPks.map((pk) => toGlobalId('TeamProfileType', pk));
+
+				updatingServices.add(service.id);
+				await updateServiceStore.mutate({
+					input: {
+						id: service.id,
+						teamMemberIds: teamMemberGlobalIds
+					}
+				});
+				updatingServices.delete(service.id);
+			}
+			selectedReadyToAssign.clear();
+			bulkSelectedTeamMember = null;
+			showBulkTeamMemberDropdown = false;
+			await fetchServices();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to add team member to services';
+		} finally {
+			isBulkOperating = false;
+		}
+	}
+
+	async function bulkRemoveNonDispatch() {
+		if (!dispatchProfilePk) return;
+		const selected = getSelectedServices('assigned');
+		if (selected.length === 0) return;
+
+		isBulkOperating = true;
+		error = '';
+
+		try {
+			for (const service of selected) {
+				if (updatingServices.has(service.id)) continue;
+
+				const teamMemberGlobalIds = [toGlobalId('TeamProfileType', dispatchProfilePk)];
+
+				updatingServices.add(service.id);
+				await updateServiceStore.mutate({
+					input: {
+						id: service.id,
+						teamMemberIds: teamMemberGlobalIds
+					}
+				});
+				updatingServices.delete(service.id);
+			}
+			selectedAssigned.clear();
+			await fetchServices();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to remove team members from services';
+		} finally {
+			isBulkOperating = false;
+		}
+	}
+
+	// Dropdown management
+	function closeAllDropdowns() {
+		openTeamMemberDropdown = null;
+		showBulkTeamMemberDropdown = false;
+	}
+
+	function setOpenTeamMemberDropdown(id: string | null) {
+		openTeamMemberDropdown = id;
+	}
+
+	function toggleBulkTeamMemberDropdown() {
+		showBulkTeamMemberDropdown = !showBulkTeamMemberDropdown;
+	}
+
+	function setBulkSelectedTeamMember(pk: string | null) {
+		bulkSelectedTeamMember = pk;
+	}
+
+	// Clear error
+	function clearError() {
+		error = '';
+	}
+
+	// Set view mode
+	function setViewMode(mode: ViewMode) {
+		viewMode = mode;
+	}
+
+	return {
+		// Initialization
+		init,
+		fetchServices,
+
+		// State getters (using $derived for reactivity)
+		get currentMonth() {
+			return currentMonth;
+		},
+		get monthDisplay() {
+			return monthDisplay;
+		},
+		get isLoading() {
+			return isLoading;
+		},
+		get error() {
+			return error;
+		},
+		get viewMode() {
+			return viewMode;
+		},
+		get activeTab() {
+			return activeTab;
+		},
+		get isBulkOperating() {
+			return isBulkOperating;
+		},
+		get editingDateServiceId() {
+			return editingDateServiceId;
+		},
+		get openTeamMemberDropdown() {
+			return openTeamMemberDropdown;
+		},
+		get bulkSelectedTeamMember() {
+			return bulkSelectedTeamMember;
+		},
+		get showBulkTeamMemberDropdown() {
+			return showBulkTeamMemberDropdown;
+		},
+		get showDeleteModal() {
+			return showDeleteModal;
+		},
+		get serviceToDelete() {
+			return serviceToDelete;
+		},
+		get isDeleting() {
+			return isDeleting;
+		},
+		get nonAdminTeamMembers() {
+			return nonAdminTeamMembers;
+		},
+
+		// Derived data
+		get categorizedServices() {
+			return categorizedServices;
+		},
+		get groupedUnassigned() {
+			return groupedUnassigned;
+		},
+		get groupedReadyToAssign() {
+			return groupedReadyToAssign;
+		},
+		get groupedAssigned() {
+			return groupedAssigned;
+		},
+
+		// Selection sets
+		updatingServices,
+		expandedUnassigned,
+		expandedReadyToAssign,
+		expandedAssigned,
+		selectedUnassigned,
+		selectedReadyToAssign,
+		selectedAssigned,
+
+		// Navigation
+		previousMonth,
+		nextMonth,
+		goToCurrentMonth,
+		previousTab,
+		nextTab,
+
+		// View controls
+		setViewMode,
+		resetExpandedGroups,
+		toggleGroup,
+		closeAllDropdowns,
+		setOpenTeamMemberDropdown,
+		toggleBulkTeamMemberDropdown,
+		setBulkSelectedTeamMember,
+
+		// Team member helpers
+		getTeamMemberNames,
+		getNonDispatchTeamMemberNames,
+		getAvailableTeamMembers,
+		getStagedTeamMemberDetails,
+		hasStagedMembers,
+
+		// Service operations
+		addDispatchToService,
+		removeDispatchFromService,
+		removeNonDispatchMembers,
+		stageTeamMember,
+		unstageTeamMember,
+		submitStagedTeamMembers,
+
+		// Date editing
+		updateServiceDate,
+		startEditDate,
+		cancelEditDate,
+
+		// Delete operations
+		promptDeleteService,
+		confirmDeleteService,
+		cancelDeleteService,
+
+		// Selection operations
+		toggleServiceSelection,
+		selectAllInColumn,
+		clearColumnSelection,
+		getSelectedServices,
+
+		// Bulk operations
+		bulkAddDispatch,
+		bulkAddTeamMember,
+		bulkRemoveNonDispatch,
+
+		// Error handling
+		clearError
+	};
+}
diff --git a/src/lib/stores/auth.svelte.ts b/src/lib/stores/auth.svelte.ts
new file mode 100644
index 0000000..aec8de5
--- /dev/null
+++ b/src/lib/stores/auth.svelte.ts
@@ -0,0 +1,152 @@
+const isBrowser = typeof window !== 'undefined';
+
+// Kratos configuration - always use production auth server
+const KRATOS_BASE_URL = 'https://auth.example.com';
+
+// Get the app's origin for return_to URLs
+const APP_ORIGIN = isBrowser ? window.location.origin : '';
+
+export type SessionIdentity = {
+	id: string;
+	traits: {
+		email?: string;
+		name?: {
+			first?: string;
+			last?: string;
+		};
+		phone?: string;
+		profile_type?: string;
+	};
+	metadata_public?: {
+		django_profile_id?: string;
+		customer_id?: string;
+	};
+};
+
+export type Session = {
+	id: string;
+	active: boolean;
+	identity: SessionIdentity;
+	expires_at?: string;
+	authenticated_at?: string;
+} | null;
+
+function createAuthStore() {
+	let session = $state<Session>(null);
+	let checkInProgress = false;
+
+	const isAuthenticated = $derived(Boolean(session?.active));
+	const userEmail = $derived(session?.identity?.traits?.email ?? null);
+	const userFullName = $derived(
+		session?.identity?.traits?.name
+			? `${session.identity.traits.name.first ?? ''} ${session.identity.traits.name.last ?? ''}`.trim()
+			: null
+	);
+
+	async function checkSession(fetchFn?: typeof fetch): Promise<Session> {
+		const fetchToUse = fetchFn || (isBrowser ? fetch : null);
+		if (!fetchToUse) return null;
+		if (checkInProgress && !fetchFn) return null;
+
+		if (!fetchFn) checkInProgress = true;
+
+		try {
+			const response = await fetchToUse(`${KRATOS_BASE_URL}/sessions/whoami`, {
+				credentials: 'include',
+				headers: {
+					Accept: 'application/json'
+				}
+			});
+
+			if (response.ok) {
+				const sessionData = await response.json();
+				session = sessionData;
+				return sessionData;
+			} else {
+				session = null;
+				return null;
+			}
+		} catch (error) {
+			console.warn('Failed to check session:', error);
+			session = null;
+			return null;
+		} finally {
+			if (!fetchFn) checkInProgress = false;
+		}
+	}
+
+	async function logout(returnTo?: string): Promise<void> {
+		if (!isBrowser) return;
+
+		try {
+			const returnUrl = returnTo || APP_ORIGIN;
+			const logoutEndpoint = `${KRATOS_BASE_URL}/self-service/logout/browser?return_to=${encodeURIComponent(returnUrl)}`;
+			const response = await fetch(logoutEndpoint, {
+				credentials: 'include'
+			});
+
+			if (response.ok) {
+				const logoutData = await response.json();
+				if (logoutData.logout_url) {
+					window.location.href = logoutData.logout_url;
+				}
+			}
+		} catch (error) {
+			console.error('Logout failed:', error);
+		} finally {
+			session = null;
+		}
+	}
+
+	function redirectToLogin(returnTo?: string): void {
+		if (!isBrowser) return;
+
+		const returnUrl = returnTo
+			? returnTo.startsWith('http')
+				? returnTo
+				: `${APP_ORIGIN}${returnTo}`
+			: window.location.href;
+
+		window.location.href = `${KRATOS_BASE_URL}/self-service/login/browser?return_to=${encodeURIComponent(returnUrl)}`;
+	}
+
+	function redirectToRegistration(returnTo?: string): void {
+		if (!isBrowser) return;
+
+		const returnUrl = returnTo
+			? returnTo.startsWith('http')
+				? returnTo
+				: `${APP_ORIGIN}${returnTo}`
+			: window.location.href;
+
+		window.location.href = `${KRATOS_BASE_URL}/self-service/registration/browser?return_to=${encodeURIComponent(returnUrl)}`;
+	}
+
+	// Initialize session check on browser
+	if (isBrowser) {
+		checkSession().catch(() => {
+			// Intentionally ignored - error already logged in checkSession
+		});
+	}
+
+	return {
+		get session() {
+			return session;
+		},
+		get isAuthenticated() {
+			return isAuthenticated;
+		},
+		get userEmail() {
+			return userEmail;
+		},
+		get userFullName() {
+			return userFullName;
+		},
+		checkSession,
+		logout,
+		redirectToLogin,
+		redirectToRegistration
+	};
+}
+
+export const auth = createAuthStore();
diff --git a/src/lib/stores/chat.svelte.ts b/src/lib/stores/chat.svelte.ts
new file mode 100644
index 0000000..d9caaee
--- /dev/null
+++ b/src/lib/stores/chat.svelte.ts
@@ -0,0 +1,320 @@
+/**
+ * Chat store - manages WebSocket connection and chat state
+ */
+
+const isBrowser = typeof window !== 'undefined';
+
+export interface ChatConversation {
+	id: string;
+	title: string;
+	created_at: string;
+	updated_at?: string;
+}
+
+export interface ToolCall {
+	id: string;
+	name: string;
+	input: Record<string, unknown>;
+}
+
+export interface ToolResult {
+	tool_use_id: string;
+	result: unknown;
+}
+
+export interface ChatMessage {
+	id: string;
+	role: 'user' | 'assistant';
+	content: string;
+	tool_calls?: ToolCall[];
+	tool_results?: ToolResult[];
+	created_at: string;
+}
+
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+
+function createChatStore() {
+	// Connection state
+	let ws: WebSocket | null = null;
+	let connectionStatus = $state<ConnectionStatus>('disconnected');
+	let reconnectAttempts = 0;
+	const maxReconnectAttempts = 5;
+	let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	// UI state
+	let isOpen = $state(false);
+	let isStreaming = $state(false);
+
+	// Data state
+	let conversations = $state<ChatConversation[]>([]);
+	let activeConversationId = $state<string | null>(null);
+	let messages = $state<ChatMessage[]>([]);
+	let streamingContent = $state('');
+	let currentToolCalls = $state<ToolCall[]>([]);
+	let user = $state<{ id: string; name: string; email: string } | null>(null);
+	let introMessage = $state<string | null>(null);
+
+	// Derive active conversation
+	const activeConversation = $derived(
+		conversations.find((c) => c.id === activeConversationId) ?? null
+	);
+
+	function getWebSocketUrl(): string {
+		// In development, connect directly to Django
+		// In production, go through the proxy
+		if (isBrowser) {
+			const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+			// Replace app. or admin. with api. for the backend
+			const host = window.location.host.replace(/^(app|admin)\./, 'api.');
+			return `${protocol}//${host}/v1/ws/chat/`;
+		}
+		return '';
+	}
+
+	function connect(): void {
+		if (!isBrowser || ws?.readyState === WebSocket.OPEN) return;
+
+		connectionStatus = 'connecting';
+
+		try {
+			ws = new WebSocket(getWebSocketUrl());
+
+			ws.onopen = () => {
+				connectionStatus = 'connected';
+				reconnectAttempts = 0;
+				// Request conversation list
+				send({ type: 'conversations' });
+			};
+
+			ws.onmessage = (event) => {
+				try {
+					const data = JSON.parse(event.data);
+					handleMessage(data);
+				} catch (e) {
+					console.error('Failed to parse WebSocket message:', e);
+				}
+			};
+
+			ws.onclose = (event) => {
+				connectionStatus = 'disconnected';
+				ws = null;
+
+				// Attempt reconnection if not a normal close
+				if (event.code !== 1000 && reconnectAttempts < maxReconnectAttempts) {
+					const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
+					reconnectTimeout = setTimeout(() => {
+						reconnectAttempts++;
+						connect();
+					}, delay);
+				}
+			};
+
+			ws.onerror = () => {
+				connectionStatus = 'error';
+			};
+		} catch (e) {
+			console.error('Failed to create WebSocket:', e);
+			connectionStatus = 'error';
+		}
+	}
+
+	function disconnect(): void {
+		if (reconnectTimeout) {
+			clearTimeout(reconnectTimeout);
+			reconnectTimeout = null;
+		}
+		if (ws) {
+			ws.close(1000);
+			ws = null;
+		}
+		connectionStatus = 'disconnected';
+	}
+
+	function send(data: Record<string, unknown>): void {
+		if (ws?.readyState === WebSocket.OPEN) {
+			ws.send(JSON.stringify(data));
+		}
+	}
+
+	function handleMessage(data: Record<string, unknown>): void {
+		const type = data.type as string;
+
+		switch (type) {
+			case 'connected':
+				user = data.user as { id: string; name: string; email: string };
+				break;
+
+			case 'intro':
+				introMessage = data.content as string;
+				break;
+
+			case 'conversations':
+				conversations = data.conversations as ChatConversation[];
+				break;
+
+			case 'conversation_created':
+				{
+					const conv = data.conversation as ChatConversation;
+					conversations = [conv, ...conversations];
+					activeConversationId = conv.id;
+				}
+				break;
+
+			case 'history':
+				{
+					const historyData = data.conversation as {
+						id: string;
+						messages: ChatMessage[];
+					};
+					messages = historyData.messages;
+				}
+				break;
+
+			case 'user_message':
+				{
+					const userMsg = data.message as ChatMessage;
+					messages = [...messages, userMsg];
+				}
+				break;
+
+			case 'stream_start':
+				isStreaming = true;
+				streamingContent = '';
+				currentToolCalls = [];
+				break;
+
+			case 'content_delta':
+				streamingContent += data.content as string;
+				break;
+
+			case 'tool_use':
+				currentToolCalls = [...currentToolCalls, data.tool as ToolCall];
+				break;
+
+			case 'tool_result':
+				// Tool results are handled as part of the message
+				break;
+
+			case 'stream_end':
+				{
+					isStreaming = false;
+					const assistantMsg = data.message as ChatMessage;
+					messages = [...messages, assistantMsg];
+					streamingContent = '';
+					currentToolCalls = [];
+
+					// Update conversation title if provided
+					if (data.title && activeConversationId) {
+						conversations = conversations.map((c) =>
+							c.id === activeConversationId ? { ...c, title: data.title as string } : c
+						);
+					}
+				}
+				break;
+
+			case 'error':
+				console.error('Chat error:', data.error);
+				isStreaming = false;
+				break;
+		}
+	}
+
+	function sendMessage(content: string): void {
+		if (!content.trim() || isStreaming) return;
+
+		send({
+			type: 'chat',
+			content: content.trim(),
+			conversation_id: activeConversationId
+		});
+	}
+
+	function selectConversation(conversationId: string): void {
+		if (conversationId === activeConversationId) return;
+
+		activeConversationId = conversationId;
+		messages = [];
+
+		// Request history for this conversation
+		send({
+			type: 'history',
+			conversation_id: conversationId
+		});
+	}
+
+	function startNewConversation(): void {
+		activeConversationId = null;
+		messages = [];
+	}
+
+	function toggle(): void {
+		isOpen = !isOpen;
+		if (isOpen && connectionStatus === 'disconnected') {
+			connect();
+		}
+	}
+
+	function open(): void {
+		isOpen = true;
+		if (connectionStatus === 'disconnected') {
+			connect();
+		}
+	}
+
+	function close(): void {
+		isOpen = false;
+	}
+
+	return {
+		// Connection
+		get connectionStatus() {
+			return connectionStatus;
+		},
+		connect,
+		disconnect,
+
+		// UI
+		get isOpen() {
+			return isOpen;
+		},
+		get isStreaming() {
+			return isStreaming;
+		},
+		toggle,
+		open,
+		close,
+
+		// Data
+		get user() {
+			return user;
+		},
+		get conversations() {
+			return conversations;
+		},
+		get activeConversation() {
+			return activeConversation;
+		},
+		get activeConversationId() {
+			return activeConversationId;
+		},
+		get messages() {
+			return messages;
+		},
+		get streamingContent() {
+			return streamingContent;
+		},
+		get currentToolCalls() {
+			return currentToolCalls;
+		},
+		get introMessage() {
+			return introMessage;
+		},
+
+		// Actions
+		sendMessage,
+		selectConversation,
+		startNewConversation
+	};
+}
+
+export const chat = createChatStore();
diff --git a/src/lib/stores/offCanvas.svelte.ts b/src/lib/stores/offCanvas.svelte.ts
new file mode 100644
index 0000000..528a0a6
--- /dev/null
+++ b/src/lib/stores/offCanvas.svelte.ts
@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+
+export interface OffCanvasContent {
+	title?: string;
+	content: Snippet;
+	width?: string;
+	class?: string;
+}
+
+export interface OffCanvasState {
+	isOpen: boolean;
+	content: OffCanvasContent | null;
+}
+
+function createOffCanvasStore() {
+	let right = $state<OffCanvasState>({
+		isOpen: false,
+		content: null
+	});
+
+	return {
+		get right() {
+			return right;
+		},
+		get isRightOpen() {
+			return right.isOpen;
+		},
+		get rightContent() {
+			return right.content;
+		},
+
+		showRight(content: OffCanvasContent) {
+			right = {
+				isOpen: true,
+				content
+			};
+		},
+
+		closeRight() {
+			right = {
+				isOpen: false,
+				content: null
+			};
+		},
+
+		closeAll() {
+			right = {
+				isOpen: false,
+				content: null
+			};
+		}
+	};
+}
+
+export const offCanvas = createOffCanvasStore();
diff --git a/src/lib/stores/scopeEditor.svelte.ts b/src/lib/stores/scopeEditor.svelte.ts
new file mode 100644
index 0000000..53742ff
--- /dev/null
+++ b/src/lib/stores/scopeEditor.svelte.ts
@@ -0,0 +1,39 @@
+import { type GetAccount$result } from '$houdini';
+
+// Types
+export type ScopeType = NonNullable<
+	GetAccount$result['account']
+>['addresses'][number]['scopes'][number];
+export type AreaType = ScopeType['areas'][number];
+export type TaskType = AreaType['tasks'][number];
+
+// Frequency options for tasks - values must be lowercase to match backend enum
+export const FREQUENCY_OPTIONS = [
+	{ value: 'daily', label: 'Daily' },
+	{ value: 'weekly', label: 'Weekly' },
+	{ value: 'monthly', label: 'Monthly' },
+	{ value: 'quarterly', label: 'Quarterly' },
+	{ value: 'triannual', label: '3x/year' },
+	{ value: 'annual', label: 'Annual' },
+	{ value: 'as_needed', label: 'As Needed' }
+] as const;
+
+export function getFrequencyLabel(frequency: string): string {
+	const lower = frequency?.toLowerCase();
+	const option = FREQUENCY_OPTIONS.find((o) => o.value === lower);
+	return option?.label ?? frequency;
+}
+
+export function getFrequencyShortLabel(frequency: string): string {
+	const labels: Record<string, string> = {
+		daily: 'Daily',
+		weekly: 'Weekly',
+		monthly: 'Monthly',
+		quarterly: 'Qtrly',
+		triannual: '3x/yr',
+		annual: 'Annual',
+		as_needed: 'PRN'
+	};
+	const lower = frequency?.toLowerCase();
+	return labels[lower] || frequency;
+}
diff --git a/src/lib/stores/theme.svelte.ts b/src/lib/stores/theme.svelte.ts
new file mode 100644
index 0000000..b631a7a
--- /dev/null
+++ b/src/lib/stores/theme.svelte.ts
@@ -0,0 +1,79 @@
+import { browser } from '$app/environment';
+
+type Theme = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'theme-preference';
+
+function getSystemTheme(): 'light' | 'dark' {
+	if (!browser) return 'light';
+	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function getStoredTheme(): Theme {
+	if (!browser) return 'system';
+	const stored = localStorage.getItem(STORAGE_KEY);
+	if (stored === 'light' || stored === 'dark' || stored === 'system') {
+		return stored;
+	}
+	return 'system';
+}
+
+function createThemeStore() {
+	let preference = $state<Theme>(getStoredTheme());
+	let resolved = $derived<'light' | 'dark'>(
+		preference === 'system' ? getSystemTheme() : preference
+	);
+
+	function applyTheme(theme: 'light' | 'dark') {
+		if (!browser) return;
+		document.documentElement.classList.remove('light', 'dark');
+		document.documentElement.classList.add(theme);
+	}
+
+	function setTheme(theme: Theme) {
+		preference = theme;
+
+		if (browser) {
+			localStorage.setItem(STORAGE_KEY, theme);
+			applyTheme(resolved);
+		}
+	}
+
+	function toggle() {
+		const newTheme = resolved === 'light' ? 'dark' : 'light';
+		setTheme(newTheme);
+	}
+
+	function init() {
+		if (!browser) return;
+
+		applyTheme(resolved);
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handleChange = (e: MediaQueryListEvent) => {
+			if (preference === 'system') {
+				resolved = e.matches ? 'dark' : 'light';
+				applyTheme(resolved);
+			}
+		};
+
+		mediaQuery.addEventListener('change', handleChange);
+	}
+
+	return {
+		get preference() {
+			return preference;
+		},
+		get resolved() {
+			return resolved;
+		},
+		get isDark() {
+			return resolved === 'dark';
+		},
+		setTheme,
+		toggle,
+		init
+	};
+}
+
+export const theme = createThemeStore();
diff --git a/src/lib/stores/unreadCounts.svelte.ts b/src/lib/stores/unreadCounts.svelte.ts
new file mode 100644
index 0000000..0b10d7b
--- /dev/null
+++ b/src/lib/stores/unreadCounts.svelte.ts
@@ -0,0 +1,116 @@
+import { GetUnreadMessageCountStore, GetUnreadNotificationCountStore } from '$houdini';
+
+const isBrowser = typeof window !== 'undefined';
+const POLL_INTERVAL = 30000; // 30 seconds
+
+interface UnreadCounts {
+	messages: number;
+	notifications: number;
+}
+
+function createUnreadCountsStore() {
+	let counts = $state<UnreadCounts>({ messages: 0, notifications: 0 });
+	let pollIntervalId: ReturnType<typeof setInterval> | null = null;
+	let isPolling = $state(false);
+
+	const messageCountStore = new GetUnreadMessageCountStore();
+	const notificationCountStore = new GetUnreadNotificationCountStore();
+
+	async function fetchCounts(): Promise<void> {
+		if (!isBrowser) return;
+
+		try {
+			// Fetch both counts in parallel
+			const [messageResult, notificationResult] = await Promise.all([
+				messageCountStore.fetch(),
+				notificationCountStore.fetch()
+			]);
+
+			counts = {
+				messages: messageResult.data?.unreadMessageCount ?? 0,
+				notifications: notificationResult.data?.myUnreadNotificationCount ?? 0
+			};
+		} catch (error) {
+			console.warn('Failed to fetch unread counts:', error);
+		}
+	}
+
+	function startPolling(): void {
+		if (!isBrowser || isPolling) return;
+
+		isPolling = true;
+
+		// Initial fetch
+		fetchCounts();
+
+		// Set up polling interval
+		pollIntervalId = setInterval(() => {
+			fetchCounts();
+		}, POLL_INTERVAL);
+	}
+
+	function stopPolling(): void {
+		if (pollIntervalId) {
+			clearInterval(pollIntervalId);
+			pollIntervalId = null;
+		}
+		isPolling = false;
+	}
+
+	function resetCounts(): void {
+		counts = { messages: 0, notifications: 0 };
+	}
+
+	function decrementMessages(by: number = 1): void {
+		counts = {
+			...counts,
+			messages: Math.max(0, counts.messages - by)
+		};
+	}
+
+	function decrementNotifications(by: number = 1): void {
+		counts = {
+			...counts,
+			notifications: Math.max(0, counts.notifications - by)
+		};
+	}
+
+	function incrementMessages(by: number = 1): void {
+		counts = {
+			...counts,
+			messages: counts.messages + by
+		};
+	}
+
+	function incrementNotifications(by: number = 1): void {
+		counts = {
+			...counts,
+			notifications: counts.notifications + by
+		};
+	}
+
+	return {
+		get counts() {
+			return counts;
+		},
+		get messageCount() {
+			return counts.messages;
+		},
+		get notificationCount() {
+			return counts.notifications;
+		},
+		get isPolling() {
+			return isPolling;
+		},
+		startPolling,
+		stopPolling,
+		fetchCounts,
+		resetCounts,
+		decrementMessages,
+		decrementNotifications,
+		incrementMessages,
+		incrementNotifications
+	};
+}
+
+export const unreadCounts = createUnreadCountsStore();
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
new file mode 100644
index 0000000..f0ff804
--- /dev/null
+++ b/src/lib/utils/date.ts
@@ -0,0 +1,67 @@
+import { parseISO, format } from 'date-fns';
+
+export function formatDate(dateString: string | null | undefined): string {
+	if (!dateString) return '';
+	try {
+		return format(parseISO(dateString), 'M/d/yyyy');
+	} catch {
+		return dateString;
+	}
+}
+
+export function formatDateTime(dateString: string | null | undefined): string {
+	if (!dateString) return '';
+	try {
+		const date = parseISO(dateString);
+		return format(date, "M/d/yyyy 'at' h:mm a");
+	} catch {
+		return dateString;
+	}
+}
+
+/**
+ * Get the current month in YYYY-MM format
+ */
+export function getCurrentMonth(): string {
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = (now.getMonth() + 1).toString().padStart(2, '0');
+	return `${year}-${month}`;
+}
+
+/**
+ * Parse a YYYY-MM string into start and end dates for that month
+ */
+export function getMonthDateRange(month: string): { start: string; end: string } {
+	const [year, monthNum] = month.split('-').map(Number);
+
+	// First day of month
+	const start = `${year}-${monthNum.toString().padStart(2, '0')}-01`;
+
+	// Last day of month (day 0 of next month = last day of current month)
+	const lastDay = new Date(year, monthNum, 0).getDate();
+	const end = `${year}-${monthNum.toString().padStart(2, '0')}-${lastDay.toString().padStart(2, '0')}`;
+
+	return { start, end };
+}
+
+/**
+ * Get the current week's date range (Monday to Sunday) in YYYY-MM-DD format
+ */
+export function getWeekDateRange(): { start: string; end: string } {
+	const now = new Date();
+	const day = now.getDay();
+	const diff = day === 0 ? -6 : 1 - day; // Monday = start
+
+	const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff);
+	const sunday = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + 6);
+
+	const formatYMD = (d: Date) => {
+		const y = d.getFullYear();
+		const m = (d.getMonth() + 1).toString().padStart(2, '0');
+		const day = d.getDate().toString().padStart(2, '0');
+		return `${y}-${m}-${day}`;
+	};
+
+	return { start: formatYMD(monday), end: formatYMD(sunday) };
+}
diff --git a/src/lib/utils/format.ts b/src/lib/utils/format.ts
new file mode 100644
index 0000000..a9927bd
--- /dev/null
+++ b/src/lib/utils/format.ts
@@ -0,0 +1,43 @@
+/**
+ * Shared formatting utilities for display purposes
+ */
+
+/**
+ * Format a date string for display
+ * @param dateStr - Date string in YYYY-MM-DD format
+ */
+export function formatDate(dateStr: string): string {
+	const date = new Date(dateStr + 'T00:00:00');
+	return date.toLocaleDateString('en-US', {
+		weekday: 'long',
+		month: 'long',
+		day: 'numeric',
+		year: 'numeric'
+	});
+}
+
+/**
+ * Format a status enum value for display
+ * @param status - Status string like "IN_PROGRESS"
+ * @returns Formatted string like "In Progress"
+ */
+export function formatStatus(status: string): string {
+	return status.replace('_', ' ');
+}
+
+/**
+ * Get the CSS class for a status badge
+ * @param status - Status string
+ */
+export function getStatusBadgeClass(status: string): string {
+	switch (status) {
+		case 'SCHEDULED':
+			return 'badge-primary';
+		case 'IN_PROGRESS':
+			return 'badge-accent';
+		case 'COMPLETED':
+			return 'badge-secondary';
+		default:
+			return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+	}
+}
diff --git a/src/lib/utils/invalidate.ts b/src/lib/utils/invalidate.ts
new file mode 100644
index 0000000..59aaa6e
--- /dev/null
+++ b/src/lib/utils/invalidate.ts
@@ -0,0 +1,25 @@
+import { invalidate, invalidateAll } from '$app/navigation';
+
+/**
+ * Invalidate dashboard data after mutations.
+ * This triggers re-fetch of layout data that uses depends('app:dashboard').
+ */
+export async function invalidateDashboard() {
+	await invalidate('app:dashboard');
+}
+
+/**
+ * Invalidate account data after account-related mutations.
+ * This triggers re-fetch of layout data that uses depends('app:accounts').
+ */
+export async function invalidateAccounts() {
+	await invalidate('app:accounts');
+}
+
+/**
+ * Invalidate all data - use sparingly.
+ * Prefer targeted invalidation (invalidateDashboard, invalidateAccounts) when possible.
+ */
+export async function invalidateEverything() {
+	await invalidateAll();
+}
diff --git a/src/lib/utils/lookup.ts b/src/lib/utils/lookup.ts
new file mode 100644
index 0000000..86b91a3
--- /dev/null
+++ b/src/lib/utils/lookup.ts
@@ -0,0 +1,155 @@
+import type { AccountsBasic$result, Customers$result, Team$result } from '$houdini';
+import { fromGlobalId } from './relay';
+
+export interface AccountAddressInfo {
+	accountId: string;
+	accountName: string;
+	addressId: string;
+	addressName: string;
+	streetAddress: string | null;
+	city: string | null;
+	state: string | null;
+	zipCode: string | null;
+}
+
+export interface CustomerInfo {
+	customerId: string;
+	customerName: string;
+}
+
+/**
+ * Builds a lookup map from accountAddressId (UUID) to account/address info.
+ * The accounts data has addresses with Relay IDs, but services/projects have UUID addressIds.
+ */
+export function buildAccountAddressLookup(
+	accounts: AccountsBasic$result['accounts'] | null | undefined
+): Map<string, AccountAddressInfo> {
+	const lookup = new Map<string, AccountAddressInfo>();
+
+	if (!accounts) return lookup;
+
+	for (const account of accounts) {
+		const accountId = fromGlobalId(account.id);
+		const accountName = account.name;
+
+		// Add primary address if exists
+		if (account.primaryAddress) {
+			const addressId = fromGlobalId(account.primaryAddress.id);
+			lookup.set(addressId, {
+				accountId,
+				accountName,
+				addressId,
+				addressName: 'Primary Service Address',
+				streetAddress: account.primaryAddress.streetAddress ?? null,
+				city: account.primaryAddress.city ?? null,
+				state: account.primaryAddress.state ?? null,
+				zipCode: account.primaryAddress.zipCode ?? null
+			});
+		}
+
+		// Add all addresses from the addresses array
+		if (account.addresses) {
+			for (const address of account.addresses) {
+				const addressId = fromGlobalId(address.id);
+				lookup.set(addressId, {
+					accountId,
+					accountName,
+					addressId,
+					addressName: address.name || 'Primary Service Address',
+					streetAddress: address.streetAddress ?? null,
+					city: address.city ?? null,
+					state: address.state ?? null,
+					zipCode: address.zipCode ?? null
+				});
+			}
+		}
+	}
+
+	return lookup;
+}
+
+/**
+ * Builds a lookup map from customerId (UUID) to customer info.
+ */
+export function buildCustomerLookup(
+	customers: Customers$result['customers'] | null | undefined
+): Map<string, CustomerInfo> {
+	const lookup = new Map<string, CustomerInfo>();
+
+	if (!customers) return lookup;
+
+	for (const customer of customers) {
+		const customerId = fromGlobalId(customer.id);
+		lookup.set(customerId, {
+			customerId,
+			customerName: customer.name
+		});
+	}
+
+	return lookup;
+}
+
+/**
+ * Formats an address for display.
+ */
+export function formatAddress(info: {
+	streetAddress?: string | null;
+	city?: string | null;
+	state?: string | null;
+	zipCode?: string | null;
+}): string | null {
+	const { streetAddress, city, state, zipCode } = info;
+	const cityStateZip = [city, state].filter(Boolean).join(', ') + (zipCode ? ` ${zipCode}` : '');
+	const parts = [streetAddress, cityStateZip].filter(Boolean);
+	return parts.length > 0 ? parts.join(', ') : null;
+}
+
+/**
+ * Builds a Set of non-ADMIN team member IDs (UUIDs).
+ * Used to filter team member counts on services/projects.
+ */
+export function buildNonAdminTeamIds(
+	teamProfiles: Team$result['teamProfiles'] | null | undefined
+): Set<string> {
+	const nonAdminIds = new Set<string>();
+
+	if (!teamProfiles) return nonAdminIds;
+
+	for (const profile of teamProfiles) {
+		if (profile.role !== 'ADMIN') {
+			const id = fromGlobalId(profile.id);
+			nonAdminIds.add(id);
+		}
+	}
+
+	return nonAdminIds;
+}
+
+export interface TeamMemberInfo {
+	id: string; // UUID
+	fullName: string;
+	role: string;
+}
+
+/**
+ * Builds a lookup map from team member UUID to their info.
+ * The teamProfiles have Relay IDs, but services/projects have UUIDs in teamMembers.pk.
+ */
+export function buildTeamMemberLookup(
+	teamProfiles: Team$result['teamProfiles'] | null | undefined
+): Map<string, TeamMemberInfo> {
+	const lookup = new Map<string, TeamMemberInfo>();
+
+	if (!teamProfiles) return lookup;
+
+	for (const profile of teamProfiles) {
+		const id = fromGlobalId(profile.id);
+		lookup.set(id, {
+			id,
+			fullName: profile.fullName ?? 'Unknown',
+			role: profile.role
+		});
+	}
+
+	return lookup;
+}
diff --git a/src/lib/utils/messages.ts b/src/lib/utils/messages.ts
new file mode 100644
index 0000000..b2c7c97
--- /dev/null
+++ b/src/lib/utils/messages.ts
@@ -0,0 +1,453 @@
+import {
+	CreateConversationStore,
+	SendMessageStore,
+	DeleteMessageStore,
+	MarkConversationAsReadStore,
+	ArchiveConversationStore,
+	MuteConversationStore,
+	DeleteConversationStore
+} from '$houdini';
+import type { GetMyConversations$result, GetConversation$result } from '$houdini';
+import type { AccountAddressInfo, CustomerInfo } from '$lib/utils/lookup';
+import { formatDate } from '$lib/utils/date';
+import { toGlobalId } from '$lib/utils/relay';
+
+// Type aliases for convenience
+export type ConversationEdge = NonNullable<
+	NonNullable<GetMyConversations$result['getMyConversations']>['edges']
+>[number];
+export type Conversation = NonNullable<ConversationEdge>['node'];
+export type ConversationDetail = NonNullable<GetConversation$result['conversation']>;
+export type Message = NonNullable<ConversationDetail['messages']>[number];
+export type Participant = NonNullable<ConversationDetail['participants']>[number];
+export type ParticipantProfile = NonNullable<Participant['participant']>;
+
+// Conversation type labels
+const CONVERSATION_TYPE_LABELS: Record<string, string> = {
+	DIRECT: 'Direct',
+	GROUP: 'Group',
+	SUPPORT: 'Support'
+};
+
+// Mutation stores (singleton instances)
+const createConversationStore = new CreateConversationStore();
+const sendMessageStore = new SendMessageStore();
+const deleteMessageStore = new DeleteMessageStore();
+const markAsReadStore = new MarkConversationAsReadStore();
+const archiveConversationStore = new ArchiveConversationStore();
+const muteConversationStore = new MuteConversationStore();
+const deleteConversationStore = new DeleteConversationStore();
+
+/**
+ * Check if a string is a valid UUID format
+ */
+function isUuid(str: string): boolean {
+	const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+	return uuidRegex.test(str);
+}
+
+/**
+ * Convert participant ID to Global ID format if needed
+ * Backend expects Global IDs (base64 encoded), not raw UUIDs
+ */
+function ensureGlobalId(id: string): string {
+	if (!id) return id;
+
+	// If it's a UUID, convert to Global ID (assume TeamProfileType)
+	if (isUuid(id)) {
+		return toGlobalId('TeamProfileType', id);
+	}
+
+	// Already a Global ID (base64 encoded strings are typically longer and may contain =)
+	return id;
+}
+
+/**
+ * Create a new conversation
+ */
+export async function createConversation(input: {
+	subject: string;
+	conversationType: string;
+	participantIds: string[];
+	entityType?: string;
+	entityId?: string;
+	metadata?: string;
+}) {
+	// Convert participant IDs to Global IDs if they're UUIDs
+	// Backend expects GlobalID format (base64 encoded)
+	const globalParticipantIds = input.participantIds.map(ensureGlobalId);
+
+	const result = await createConversationStore.mutate({
+		input: {
+			subject: input.subject,
+			conversationType: input.conversationType,
+			participantIds: globalParticipantIds,
+			entityType: input.entityType ?? null,
+			entityId: input.entityId ?? null,
+			metadata: input.metadata ?? null
+		}
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.createConversation;
+}
+
+/**
+ * Send a message in a conversation
+ */
+export async function sendMessage(input: {
+	conversationId: string;
+	body: string;
+	replyToId?: string;
+	attachments?: string;
+	metadata?: string;
+}) {
+	const result = await sendMessageStore.mutate({
+		input: {
+			conversationId: input.conversationId,
+			body: input.body,
+			replyToId: input.replyToId ?? null,
+			attachments: input.attachments ?? null,
+			metadata: input.metadata ?? null
+		}
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.sendMessage;
+}
+
+/**
+ * Delete a message
+ */
+export async function deleteMessage(id: string) {
+	const result = await deleteMessageStore.mutate({ id });
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.deleteMessage;
+}
+
+/**
+ * Mark a conversation as read
+ */
+export async function markAsRead(conversationId: string) {
+	const result = await markAsReadStore.mutate({
+		input: { conversationId }
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.markConversationAsRead;
+}
+
+/**
+ * Archive or unarchive a conversation
+ */
+export async function archiveConversation(conversationId: string, isArchived: boolean) {
+	const result = await archiveConversationStore.mutate({
+		input: { conversationId, isArchived }
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.archiveConversation;
+}
+
+/**
+ * Mute or unmute a conversation
+ */
+export async function muteConversation(conversationId: string, isMuted: boolean) {
+	const result = await muteConversationStore.mutate({
+		input: { conversationId, isMuted }
+	});
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.muteConversation;
+}
+
+/**
+ * Delete a conversation
+ */
+export async function deleteConversation(id: string) {
+	const result = await deleteConversationStore.mutate({ id });
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.deleteConversation;
+}
+
+// Minimal profile type for name extraction
+type ProfileWithName = {
+	teamProfile?: { id?: string; fullName?: string | null } | null;
+	customerProfile?: { id?: string; fullName?: string | null } | null;
+};
+
+/**
+ * Get display name from participant profile
+ */
+export function getParticipantName(participant: ProfileWithName | null | undefined): string {
+	if (!participant) return 'Unknown';
+
+	if (participant.teamProfile) {
+		return participant.teamProfile.fullName ?? 'Team Member';
+	}
+
+	if (participant.customerProfile) {
+		return participant.customerProfile.fullName ?? 'Customer';
+	}
+
+	return 'Unknown';
+}
+
+/**
+ * Get sender name from message sender
+ */
+export function getSenderName(sender: Message['sender'] | null | undefined): string {
+	if (!sender) return 'Unknown';
+
+	if (sender.teamProfile) {
+		return sender.teamProfile.fullName ?? 'Team Member';
+	}
+
+	if (sender.customerProfile) {
+		return sender.customerProfile.fullName ?? 'Customer';
+	}
+
+	return 'Unknown';
+}
+
+/**
+ * Get sender ID from message sender
+ */
+export function getSenderId(sender: Message['sender'] | null | undefined): string | null {
+	if (!sender) return null;
+
+	if (sender.teamProfile) {
+		return sender.teamProfile.id;
+	}
+
+	if (sender.customerProfile) {
+		return sender.customerProfile.id;
+	}
+
+	return null;
+}
+
+/**
+ * Get conversation type label
+ */
+export function getConversationTypeLabel(type: string | null | undefined): string {
+	if (!type) return 'Message';
+	return CONVERSATION_TYPE_LABELS[type] ?? type;
+}
+
+interface EntityDisplayOptions {
+	accountLookup?: Map<string, AccountAddressInfo>;
+	customerLookup?: Map<string, CustomerInfo>;
+	userType?: 'team' | 'customer';
+}
+
+/**
+ * Get entity display info from conversation
+ * - Service: "<Date> - <Account Name>"
+ * - Project: "<Date> - <Name> - <Account Name>" or "<Date> - <Name> - <Customer Name>"
+ */
+export function getEntityDisplay(
+	entity: ConversationDetail['entity'] | null | undefined,
+	options: EntityDisplayOptions = {}
+): {
+	type: string;
+	name: string;
+	id: string;
+	link: string | null;
+} | null {
+	if (!entity) return null;
+
+	const { entityType, entityId } = entity;
+	const { accountLookup, customerLookup, userType } = options;
+
+	// Determine base path based on user type
+	const basePath = userType === 'customer' ? '/customer' : '/team';
+
+	if (entity.service) {
+		const service = entity.service;
+		const date = formatDate(service.date) || 'Service';
+
+		// Look up account name via accountAddressId
+		let accountName = '';
+		if (accountLookup && service.accountAddressId) {
+			const accountInfo = accountLookup.get(service.accountAddressId);
+			if (accountInfo) {
+				accountName = accountInfo.accountName;
+			}
+		}
+
+		const displayName = accountName ? `${date} - ${accountName}` : date;
+
+		// For customers, link to schedule (they can navigate to history if needed)
+		// For team, always use /team/services
+		const serviceLink =
+			userType === 'customer'
+				? `/customer/schedule/service/${service.id}`
+				: `/team/services/${service.id}`;
+
+		return {
+			type: 'Service',
+			name: displayName,
+			id: service.id,
+			link: serviceLink
+		};
+	}
+
+	if (entity.project) {
+		const project = entity.project;
+		const date = formatDate(project.date) || '';
+		const projectName = project.name || 'Project';
+
+		// Look up account name via accountAddressId, or customer name via customerId
+		let ownerName = '';
+		if (accountLookup && project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			if (accountInfo) {
+				ownerName = accountInfo.accountName;
+			}
+		} else if (customerLookup && project.customerId) {
+			const customerInfo = customerLookup.get(project.customerId);
+			if (customerInfo) {
+				ownerName = customerInfo.customerName;
+			}
+		}
+
+		const parts = [date, projectName, ownerName].filter(Boolean);
+		const displayName = parts.join(' - ');
+
+		// For customers, link to schedule (they can navigate to history if needed)
+		// For team, always use /team/projects
+		const projectLink =
+			userType === 'customer'
+				? `/customer/schedule/project/${project.id}`
+				: `/team/projects/${project.id}`;
+
+		return {
+			type: 'Project',
+			name: displayName,
+			id: project.id,
+			link: projectLink
+		};
+	}
+
+	if (entity.account) {
+		return {
+			type: 'Account',
+			name: entity.account.name ?? 'Account',
+			id: entity.account.id,
+			link: `${basePath}/accounts/${entity.account.id}`
+		};
+	}
+
+	if (entity.customer) {
+		return {
+			type: 'Customer',
+			name: entity.customer.name ?? 'Customer',
+			id: entity.customer.id,
+			link: null
+		};
+	}
+
+	// Fallback to entity type and ID
+	if (entityType && entityId) {
+		return {
+			type: entityType,
+			name: entityType,
+			id: entityId,
+			link: null
+		};
+	}
+
+	return null;
+}
+
+/**
+ * Format count for display (99+ for large numbers)
+ */
+export function formatCount(count: number): string {
+	if (count <= 0) return '';
+	if (count > 99) return '99+';
+	return count.toString();
+}
+
+// Minimal participant type for name extraction
+type ParticipantWithProfile = {
+	participant: {
+		teamProfile?: { id: string; fullName?: string | null } | null;
+		customerProfile?: { id: string; fullName?: string | null } | null;
+	};
+};
+
+/**
+ * Get list of participant names (excluding current user)
+ */
+export function getParticipantNames(
+	participants: ParticipantWithProfile[] | null | undefined,
+	currentUserId?: string,
+	maxNames: number = 3
+): string {
+	if (!participants || participants.length === 0) return '';
+
+	const names = participants
+		.map((p) => {
+			const profile = p.participant;
+			const id = profile?.teamProfile?.id ?? profile?.customerProfile?.id;
+
+			// Skip current user
+			if (currentUserId && id === currentUserId) return null;
+
+			return getParticipantName(profile);
+		})
+		.filter((name): name is string => name !== null);
+
+	if (names.length === 0) return '';
+
+	if (names.length <= maxNames) {
+		return names.join(', ');
+	}
+
+	const displayNames = names.slice(0, maxNames);
+	const remaining = names.length - maxNames;
+	return `${displayNames.join(', ')} +${remaining} more`;
+}
+
+/**
+ * Get last message preview
+ */
+export function getLastMessagePreview(
+	messages: Conversation['messages'] | null | undefined,
+	maxLength: number = 50
+): string {
+	if (!messages || messages.length === 0) return 'No messages yet';
+
+	const lastMessage = messages[0];
+	if (!lastMessage?.body) return 'No messages yet';
+
+	const body = lastMessage.body;
+	if (body.length <= maxLength) return body;
+
+	return body.substring(0, maxLength) + '...';
+}
diff --git a/src/lib/utils/notifications.ts b/src/lib/utils/notifications.ts
new file mode 100644
index 0000000..db1b91c
--- /dev/null
+++ b/src/lib/utils/notifications.ts
@@ -0,0 +1,211 @@
+import {
+	MarkNotificationAsReadStore,
+	MarkAllNotificationsAsReadStore,
+	DeleteNotificationStore
+} from '$houdini';
+import type { GetMyNotifications$result, GetNotification$result } from '$houdini';
+
+// Type aliases for convenience
+export type Notification = NonNullable<GetMyNotifications$result['myNotifications']>[number];
+export type NotificationDetail = NonNullable<GetNotification$result['notification']>;
+export type NotificationEvent = NonNullable<Notification['event']>;
+
+// Event type labels for display
+const EVENT_TYPE_LABELS: Record<string, string> = {
+	// Account events
+	ACCOUNT_CREATED: 'Account Created',
+	ACCOUNT_UPDATED: 'Account Updated',
+	ACCOUNT_DEACTIVATED: 'Account Deactivated',
+	ACCOUNT_REACTIVATED: 'Account Reactivated',
+
+	// Customer events
+	CUSTOMER_CREATED: 'Customer Created',
+	CUSTOMER_UPDATED: 'Customer Updated',
+
+	// Service events
+	SERVICE_CREATED: 'Service Created',
+	SERVICE_SCHEDULED: 'Service Scheduled',
+	SERVICE_STARTED: 'Service Started',
+	SERVICE_COMPLETED: 'Service Completed',
+	SERVICE_CANCELLED: 'Service Cancelled',
+
+	// Project events
+	PROJECT_CREATED: 'Project Created',
+	PROJECT_SCHEDULED: 'Project Scheduled',
+	PROJECT_STARTED: 'Project Started',
+	PROJECT_COMPLETED: 'Project Completed',
+	PROJECT_CANCELLED: 'Project Cancelled',
+
+	// Invoice events
+	INVOICE_CREATED: 'Invoice Created',
+	INVOICE_SENT: 'Invoice Sent',
+	INVOICE_PAID: 'Invoice Paid',
+	INVOICE_OVERDUE: 'Invoice Overdue',
+
+	// Report events
+	REPORT_CREATED: 'Report Created',
+	REPORT_APPROVED: 'Report Approved',
+	REPORT_REJECTED: 'Report Rejected',
+
+	// Messaging events
+	CONVERSATION_CREATED: 'Conversation Created',
+	CONVERSATION_ARCHIVED: 'Conversation Archived',
+	CONVERSATION_PARTICIPANT_ADDED: 'Participant Added',
+	CONVERSATION_PARTICIPANT_REMOVED: 'Participant Removed',
+	MESSAGE_SENT: 'Message Sent',
+	MESSAGE_RECEIVED: 'Message Received',
+	MESSAGE_READ: 'Message Read',
+	MESSAGE_DELETED: 'Message Deleted'
+};
+
+// Mutation stores (singleton instances)
+const markAsReadStore = new MarkNotificationAsReadStore();
+const markAllAsReadStore = new MarkAllNotificationsAsReadStore();
+const deleteNotificationStore = new DeleteNotificationStore();
+
+/**
+ * Mark a notification as read
+ */
+export async function markAsRead(id: string) {
+	const result = await markAsReadStore.mutate({ id });
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.markNotificationAsRead;
+}
+
+/**
+ * Mark all notifications as read
+ */
+export async function markAllAsRead() {
+	const result = await markAllAsReadStore.mutate(null);
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.markAllNotificationsAsRead;
+}
+
+/**
+ * Delete a notification
+ */
+export async function deleteNotification(id: string) {
+	const result = await deleteNotificationStore.mutate({ id });
+
+	if (result.errors?.length) {
+		throw new Error(result.errors[0].message);
+	}
+
+	return result.data?.deleteNotification;
+}
+
+/**
+ * Get event type label for display
+ */
+export function getEventTypeLabel(eventType: string | null | undefined): string {
+	if (!eventType) return 'Event';
+	return EVENT_TYPE_LABELS[eventType] ?? formatEventType(eventType);
+}
+
+/**
+ * Format event type to human readable (fallback)
+ */
+function formatEventType(eventType: string): string {
+	return eventType
+		.split('_')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+		.join(' ');
+}
+
+/**
+ * Get action URL from notification
+ * Falls back to constructing URL from entity info
+ */
+export function getActionUrl(notification: Notification | NotificationDetail): string | null {
+	// Use explicit action URL if provided
+	if (notification.actionUrl) {
+		return notification.actionUrl;
+	}
+
+	// Try to construct URL from entity info
+	const event = notification.event;
+	if (!event?.entityType || !event?.entityId) {
+		return null;
+	}
+
+	const entityType = event.entityType.toLowerCase();
+	const entityId = event.entityId;
+
+	// Map entity types to routes
+	const routeMap: Record<string, string> = {
+		project: `/admin/projects/${entityId}`,
+		service: `/admin/services/${entityId}`,
+		account: `/admin/accounts/${entityId}`,
+		customer: `/admin/customers/${entityId}`,
+		invoice: `/admin/invoices/${entityId}`,
+		report: `/admin/reports/${entityId}`,
+		conversation: `/messages/${entityId}`,
+		message: `/messages` // Messages don't have direct routes
+	};
+
+	return routeMap[entityType] ?? null;
+}
+
+/**
+ * Format count for display (99+ for large numbers)
+ */
+export function formatCount(count: number): string {
+	if (count <= 0) return '';
+	if (count > 99) return '99+';
+	return count.toString();
+}
+
+/**
+ * Get notification body preview
+ */
+export function getBodyPreview(body: string | null | undefined, maxLength: number = 100): string {
+	if (!body) return '';
+
+	if (body.length <= maxLength) return body;
+
+	return body.substring(0, maxLength) + '...';
+}
+
+/**
+ * Get entity type display name
+ */
+export function getEntityTypeLabel(entityType: string | null | undefined): string {
+	if (!entityType) return '';
+
+	const labels: Record<string, string> = {
+		Project: 'Project',
+		Service: 'Service',
+		Account: 'Account',
+		Customer: 'Customer',
+		Invoice: 'Invoice',
+		Report: 'Report',
+		Conversation: 'Conversation',
+		Message: 'Message'
+	};
+
+	return labels[entityType] ?? entityType;
+}
+
+/**
+ * Get notification status label
+ */
+export function getStatusLabel(status: string | null | undefined): string {
+	if (!status) return '';
+
+	const labels: Record<string, string> = {
+		PENDING: 'Pending',
+		SENT: 'Sent',
+		READ: 'Read',
+		FAILED: 'Failed'
+	};
+
+	return labels[status] ?? status;
+}
diff --git a/src/lib/utils/relay.ts b/src/lib/utils/relay.ts
new file mode 100644
index 0000000..716366d
--- /dev/null
+++ b/src/lib/utils/relay.ts
@@ -0,0 +1,38 @@
+/**
+ * Decodes a Relay Global ID to extract the raw ID.
+ * @param globalId The Base64-encoded Relay ID (e.g., "Q3VzdG9tZXJUeXBlOjE=")
+ * @returns The raw ID (e.g., "1")
+ */
+export function fromGlobalId(globalId: string): string {
+	if (!globalId) return '';
+
+	let decoded: string;
+	try {
+		decoded = atob(globalId);
+	} catch (e) {
+		console.error('Failed to decode global ID:', e);
+		return '';
+	}
+
+	const sep = decoded.indexOf(':');
+	if (sep <= 0 || sep === decoded.length - 1) {
+		// Silently fail for invalid Global ID format
+		return '';
+	}
+
+	return decoded.slice(sep + 1);
+}
+
+/**
+ * Encodes a raw ID and type name into a Relay Global ID.
+ * @param typeName The GraphQL object type (e.g., 'CustomerType')
+ * @param id The raw ID (e.g., "1")
+ * @returns The Base64-encoded Relay ID (e.g., "Q3VzdG9tZXJUeXBlOjE=")
+ */
+export function toGlobalId(typeName: string, id: string): string {
+	if (!typeName || !id) {
+		console.error('Both typeName and id must be provided for encoding.');
+		return '';
+	}
+	return btoa(`${typeName}:${id}`);
+}
diff --git a/src/lib/utils/scopes.ts b/src/lib/utils/scopes.ts
new file mode 100644
index 0000000..dcebf6b
--- /dev/null
+++ b/src/lib/utils/scopes.ts
@@ -0,0 +1,946 @@
+import {
+	GetScopeTemplatesStore,
+	GetProjectScopeTemplatesStore,
+	// Scope Template stores
+	CreateScopeTemplateStore,
+	UpdateScopeTemplateStore,
+	DeleteScopeTemplateStore,
+	CreateAreaTemplateStore,
+	UpdateAreaTemplateStore,
+	DeleteAreaTemplateStore,
+	CreateTaskTemplateStore,
+	UpdateTaskTemplateStore,
+	DeleteTaskTemplateStore,
+	CreateScopeTemplateFromJsonStore,
+	CreateScopeFromTemplateStore,
+	// Project Scope Template stores
+	CreateProjectScopeTemplateStore,
+	UpdateProjectScopeTemplateStore,
+	DeleteProjectScopeTemplateStore,
+	CreateProjectAreaTemplateStore,
+	UpdateProjectAreaTemplateStore,
+	DeleteProjectAreaTemplateStore,
+	CreateProjectTaskTemplateStore,
+	UpdateProjectTaskTemplateStore,
+	DeleteProjectTaskTemplateStore,
+	CreateProjectScopeTemplateFromJsonStore,
+	CreateProjectScopeFromTemplateStore,
+	// Service Scope stores (for active scopes on accounts)
+	CreateScopeStore,
+	UpdateScopeStore,
+	DeleteScopeStore,
+	CreateAreaStore,
+	UpdateAreaStore,
+	DeleteAreaStore,
+	CreateTaskStore,
+	UpdateTaskStore,
+	DeleteTaskStore,
+	// Project Scope stores (for active scopes on projects)
+	CreateProjectScopeStore,
+	UpdateProjectScopeStore,
+	DeleteProjectScopeStore,
+	CreateProjectScopeCategoryStore,
+	UpdateProjectScopeCategoryStore,
+	DeleteProjectScopeCategoryStore,
+	CreateProjectScopeTaskStore,
+	UpdateProjectScopeTaskStore,
+	DeleteProjectScopeTaskStore
+} from '$houdini';
+import type {
+	// Scope Template types
+	CreateScopeTemplate$input,
+	CreateScopeTemplate$result,
+	UpdateScopeTemplate$input,
+	UpdateScopeTemplate$result,
+	CreateAreaTemplate$input,
+	CreateAreaTemplate$result,
+	UpdateAreaTemplate$input,
+	UpdateAreaTemplate$result,
+	CreateTaskTemplate$input,
+	CreateTaskTemplate$result,
+	UpdateTaskTemplate$input,
+	UpdateTaskTemplate$result,
+	CreateScopeTemplateFromJson$result,
+	CreateScopeFromTemplate$input,
+	CreateScopeFromTemplate$result,
+	// Project Scope Template types
+	CreateProjectScopeTemplate$input,
+	CreateProjectScopeTemplate$result,
+	UpdateProjectScopeTemplate$input,
+	UpdateProjectScopeTemplate$result,
+	CreateProjectAreaTemplate$input,
+	CreateProjectAreaTemplate$result,
+	UpdateProjectAreaTemplate$input,
+	UpdateProjectAreaTemplate$result,
+	CreateProjectTaskTemplate$input,
+	CreateProjectTaskTemplate$result,
+	UpdateProjectTaskTemplate$input,
+	UpdateProjectTaskTemplate$result,
+	CreateProjectScopeTemplateFromJson$result,
+	CreateProjectScopeFromTemplate$input,
+	CreateProjectScopeFromTemplate$result,
+	// Service Scope types (active scopes on accounts)
+	CreateScope$input,
+	CreateScope$result,
+	UpdateScope$input,
+	UpdateScope$result,
+	CreateArea$input,
+	CreateArea$result,
+	UpdateArea$input,
+	UpdateArea$result,
+	CreateTask$input,
+	CreateTask$result,
+	UpdateTask$input,
+	UpdateTask$result,
+	// Project Scope types (active scopes on projects)
+	CreateProjectScope$input,
+	CreateProjectScope$result,
+	UpdateProjectScope$input,
+	UpdateProjectScope$result,
+	CreateProjectScopeCategory$input,
+	CreateProjectScopeCategory$result,
+	UpdateProjectScopeCategory$input,
+	UpdateProjectScopeCategory$result,
+	CreateProjectScopeTask$input,
+	CreateProjectScopeTask$result,
+	UpdateProjectScopeTask$input,
+	UpdateProjectScopeTask$result
+} from '$houdini';
+
+// Re-export stores for server-side use
+export { GetScopeTemplatesStore, GetProjectScopeTemplatesStore };
+
+// ============================================================================
+// Service Scope Template Functions
+// ============================================================================
+
+export type ScopeTemplateInput = CreateScopeTemplate$input['input'];
+export type ScopeTemplate = CreateScopeTemplate$result['createScopeTemplate'];
+
+export async function createScopeTemplate(input: ScopeTemplateInput): Promise<ScopeTemplate> {
+	const store = new CreateScopeTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create scope template');
+	}
+
+	const result = data?.createScopeTemplate;
+	if (!result) {
+		throw new Error('No scope template returned by the server');
+	}
+
+	return result;
+}
+
+export type ScopeTemplateUpdateInput = UpdateScopeTemplate$input['input'];
+export type UpdatedScopeTemplate = UpdateScopeTemplate$result['updateScopeTemplate'];
+
+export async function updateScopeTemplate(
+	input: ScopeTemplateUpdateInput
+): Promise<UpdatedScopeTemplate> {
+	const store = new UpdateScopeTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update scope template');
+	}
+
+	const result = data?.updateScopeTemplate;
+	if (!result) {
+		throw new Error('No scope template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteScopeTemplate(id: string): Promise<void> {
+	const store = new DeleteScopeTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete scope template');
+	}
+
+	if (!data?.deleteScopeTemplate) {
+		throw new Error('Failed to delete scope template');
+	}
+}
+
+// ============================================================================
+// Service Area Template Functions
+// ============================================================================
+
+export type AreaTemplateInput = CreateAreaTemplate$input['input'];
+export type AreaTemplate = CreateAreaTemplate$result['createAreaTemplate'];
+
+export async function createAreaTemplate(input: AreaTemplateInput): Promise<AreaTemplate> {
+	const store = new CreateAreaTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create area template');
+	}
+
+	const result = data?.createAreaTemplate;
+	if (!result) {
+		throw new Error('No area template returned by the server');
+	}
+
+	return result;
+}
+
+export type AreaTemplateUpdateInput = UpdateAreaTemplate$input['input'];
+export type UpdatedAreaTemplate = UpdateAreaTemplate$result['updateAreaTemplate'];
+
+export async function updateAreaTemplate(
+	input: AreaTemplateUpdateInput
+): Promise<UpdatedAreaTemplate> {
+	const store = new UpdateAreaTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update area template');
+	}
+
+	const result = data?.updateAreaTemplate;
+	if (!result) {
+		throw new Error('No area template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteAreaTemplate(id: string): Promise<void> {
+	const store = new DeleteAreaTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete area template');
+	}
+
+	if (!data?.deleteAreaTemplate) {
+		throw new Error('Failed to delete area template');
+	}
+}
+
+// ============================================================================
+// Service Task Template Functions
+// ============================================================================
+
+export type TaskTemplateInput = CreateTaskTemplate$input['input'];
+export type TaskTemplate = CreateTaskTemplate$result['createTaskTemplate'];
+
+export async function createTaskTemplate(input: TaskTemplateInput): Promise<TaskTemplate> {
+	const store = new CreateTaskTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create task template');
+	}
+
+	const result = data?.createTaskTemplate;
+	if (!result) {
+		throw new Error('No task template returned by the server');
+	}
+
+	return result;
+}
+
+export type TaskTemplateUpdateInput = UpdateTaskTemplate$input['input'];
+export type UpdatedTaskTemplate = UpdateTaskTemplate$result['updateTaskTemplate'];
+
+export async function updateTaskTemplate(
+	input: TaskTemplateUpdateInput
+): Promise<UpdatedTaskTemplate> {
+	const store = new UpdateTaskTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update task template');
+	}
+
+	const result = data?.updateTaskTemplate;
+	if (!result) {
+		throw new Error('No task template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteTaskTemplate(id: string): Promise<void> {
+	const store = new DeleteTaskTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete task template');
+	}
+
+	if (!data?.deleteTaskTemplate) {
+		throw new Error('Failed to delete task template');
+	}
+}
+
+// ============================================================================
+// Service Scope Template from JSON
+// ============================================================================
+
+export type ScopeTemplateFromJson =
+	CreateScopeTemplateFromJson$result['createScopeTemplateFromJson'];
+
+export async function createScopeTemplateFromJson(
+	payload: unknown,
+	replace: boolean = false
+): Promise<ScopeTemplateFromJson> {
+	const store = new CreateScopeTemplateFromJsonStore();
+	const { data, errors } = await store.mutate({ payload, replace });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create scope template from JSON');
+	}
+
+	const result = data?.createScopeTemplateFromJson;
+	if (!result) {
+		throw new Error('No scope template returned by the server');
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Project Scope Template Functions
+// ============================================================================
+
+export type ProjectScopeTemplateInput = CreateProjectScopeTemplate$input['input'];
+export type ProjectScopeTemplate = CreateProjectScopeTemplate$result['createProjectScopeTemplate'];
+
+export async function createProjectScopeTemplate(
+	input: ProjectScopeTemplateInput
+): Promise<ProjectScopeTemplate> {
+	const store = new CreateProjectScopeTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope template');
+	}
+
+	const result = data?.createProjectScopeTemplate;
+	if (!result) {
+		throw new Error('No project scope template returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectScopeTemplateUpdateInput = UpdateProjectScopeTemplate$input['input'];
+export type UpdatedProjectScopeTemplate =
+	UpdateProjectScopeTemplate$result['updateProjectScopeTemplate'];
+
+export async function updateProjectScopeTemplate(
+	input: ProjectScopeTemplateUpdateInput
+): Promise<UpdatedProjectScopeTemplate> {
+	const store = new UpdateProjectScopeTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project scope template');
+	}
+
+	const result = data?.updateProjectScopeTemplate;
+	if (!result) {
+		throw new Error('No project scope template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectScopeTemplate(id: string): Promise<void> {
+	const store = new DeleteProjectScopeTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project scope template');
+	}
+
+	if (!data?.deleteProjectScopeTemplate) {
+		throw new Error('Failed to delete project scope template');
+	}
+}
+
+// ============================================================================
+// Project Category (Area) Template Functions
+// ============================================================================
+
+export type ProjectAreaTemplateInput = CreateProjectAreaTemplate$input['input'];
+export type ProjectAreaTemplate = CreateProjectAreaTemplate$result['createProjectAreaTemplate'];
+
+export async function createProjectAreaTemplate(
+	input: ProjectAreaTemplateInput
+): Promise<ProjectAreaTemplate> {
+	const store = new CreateProjectAreaTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project category template');
+	}
+
+	const result = data?.createProjectAreaTemplate;
+	if (!result) {
+		throw new Error('No project category template returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectAreaTemplateUpdateInput = UpdateProjectAreaTemplate$input['input'];
+export type UpdatedProjectAreaTemplate =
+	UpdateProjectAreaTemplate$result['updateProjectAreaTemplate'];
+
+export async function updateProjectAreaTemplate(
+	input: ProjectAreaTemplateUpdateInput
+): Promise<UpdatedProjectAreaTemplate> {
+	const store = new UpdateProjectAreaTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project category template');
+	}
+
+	const result = data?.updateProjectAreaTemplate;
+	if (!result) {
+		throw new Error('No project category template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectAreaTemplate(id: string): Promise<void> {
+	const store = new DeleteProjectAreaTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project category template');
+	}
+
+	if (!data?.deleteProjectAreaTemplate) {
+		throw new Error('Failed to delete project category template');
+	}
+}
+
+// ============================================================================
+// Project Task Template Functions
+// ============================================================================
+
+export type ProjectTaskTemplateInput = CreateProjectTaskTemplate$input['input'];
+export type ProjectTaskTemplate = CreateProjectTaskTemplate$result['createProjectTaskTemplate'];
+
+export async function createProjectTaskTemplate(
+	input: ProjectTaskTemplateInput
+): Promise<ProjectTaskTemplate> {
+	const store = new CreateProjectTaskTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project task template');
+	}
+
+	const result = data?.createProjectTaskTemplate;
+	if (!result) {
+		throw new Error('No project task template returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectTaskTemplateUpdateInput = UpdateProjectTaskTemplate$input['input'];
+export type UpdatedProjectTaskTemplate =
+	UpdateProjectTaskTemplate$result['updateProjectTaskTemplate'];
+
+export async function updateProjectTaskTemplate(
+	input: ProjectTaskTemplateUpdateInput
+): Promise<UpdatedProjectTaskTemplate> {
+	const store = new UpdateProjectTaskTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project task template');
+	}
+
+	const result = data?.updateProjectTaskTemplate;
+	if (!result) {
+		throw new Error('No project task template returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectTaskTemplate(id: string): Promise<void> {
+	const store = new DeleteProjectTaskTemplateStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project task template');
+	}
+
+	if (!data?.deleteProjectTaskTemplate) {
+		throw new Error('Failed to delete project task template');
+	}
+}
+
+// ============================================================================
+// Project Scope Template from JSON
+// ============================================================================
+
+export type ProjectScopeTemplateFromJson =
+	CreateProjectScopeTemplateFromJson$result['createProjectScopeTemplateFromJson'];
+
+export async function createProjectScopeTemplateFromJson(
+	payload: unknown,
+	replace: boolean = false
+): Promise<ProjectScopeTemplateFromJson> {
+	const store = new CreateProjectScopeTemplateFromJsonStore();
+	const { data, errors } = await store.mutate({ payload, replace });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope template from JSON');
+	}
+
+	const result = data?.createProjectScopeTemplateFromJson;
+	if (!result) {
+		throw new Error('No project scope template returned by the server');
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Create Scope from Template (Instantiation)
+// ============================================================================
+
+export type CreateScopeFromTemplateInput = CreateScopeFromTemplate$input['input'];
+export type CreatedScopeFromTemplate = CreateScopeFromTemplate$result['createScopeFromTemplate'];
+
+export async function createScopeFromTemplate(
+	input: CreateScopeFromTemplateInput
+): Promise<CreatedScopeFromTemplate> {
+	const store = new CreateScopeFromTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create scope from template');
+	}
+
+	const result = data?.createScopeFromTemplate;
+	if (!result) {
+		throw new Error('No scope returned by the server');
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Create Project Scope from Template (Instantiation)
+// ============================================================================
+
+export type CreateProjectScopeFromTemplateInput = CreateProjectScopeFromTemplate$input['input'];
+export type CreatedProjectScopeFromTemplate =
+	CreateProjectScopeFromTemplate$result['createProjectScopeFromTemplate'];
+
+export async function createProjectScopeFromTemplate(
+	input: CreateProjectScopeFromTemplateInput
+): Promise<CreatedProjectScopeFromTemplate> {
+	const store = new CreateProjectScopeFromTemplateStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope from template');
+	}
+
+	const result = data?.createProjectScopeFromTemplate;
+	if (!result) {
+		throw new Error('No project scope returned by the server');
+	}
+
+	return result;
+}
+
+// ============================================================================
+// Service Scope Functions (Active Scopes on Accounts)
+// ============================================================================
+
+export type ServiceScopeInput = CreateScope$input['input'];
+export type ServiceScope = CreateScope$result['createScope'];
+
+export async function createScope(input: ServiceScopeInput): Promise<ServiceScope> {
+	const store = new CreateScopeStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create scope');
+	}
+
+	const result = data?.createScope;
+	if (!result) {
+		throw new Error('No scope returned by the server');
+	}
+
+	return result;
+}
+
+export type ServiceScopeUpdateInput = UpdateScope$input['input'];
+export type UpdatedServiceScope = UpdateScope$result['updateScope'];
+
+export async function updateScope(input: ServiceScopeUpdateInput): Promise<UpdatedServiceScope> {
+	const store = new UpdateScopeStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update scope');
+	}
+
+	const result = data?.updateScope;
+	if (!result) {
+		throw new Error('No scope returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteScope(id: string): Promise<void> {
+	const store = new DeleteScopeStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete scope');
+	}
+
+	if (!data?.deleteScope) {
+		throw new Error('Failed to delete scope');
+	}
+}
+
+// ============================================================================
+// Service Area Functions (Areas within Active Scopes)
+// ============================================================================
+
+export type ServiceAreaInput = CreateArea$input['input'];
+export type ServiceArea = CreateArea$result['createArea'];
+
+export async function createArea(input: ServiceAreaInput): Promise<ServiceArea> {
+	const store = new CreateAreaStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create area');
+	}
+
+	const result = data?.createArea;
+	if (!result) {
+		throw new Error('No area returned by the server');
+	}
+
+	return result;
+}
+
+export type ServiceAreaUpdateInput = UpdateArea$input['input'];
+export type UpdatedServiceArea = UpdateArea$result['updateArea'];
+
+export async function updateArea(input: ServiceAreaUpdateInput): Promise<UpdatedServiceArea> {
+	const store = new UpdateAreaStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update area');
+	}
+
+	const result = data?.updateArea;
+	if (!result) {
+		throw new Error('No area returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteArea(id: string): Promise<void> {
+	const store = new DeleteAreaStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete area');
+	}
+
+	if (!data?.deleteArea) {
+		throw new Error('Failed to delete area');
+	}
+}
+
+// ============================================================================
+// Service Task Functions (Tasks within Active Scopes)
+// ============================================================================
+
+export type ServiceTaskInput = CreateTask$input['input'];
+export type ServiceTask = CreateTask$result['createTask'];
+
+export async function createTask(input: ServiceTaskInput): Promise<ServiceTask> {
+	const store = new CreateTaskStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create task');
+	}
+
+	const result = data?.createTask;
+	if (!result) {
+		throw new Error('No task returned by the server');
+	}
+
+	return result;
+}
+
+export type ServiceTaskUpdateInput = UpdateTask$input['input'];
+export type UpdatedServiceTask = UpdateTask$result['updateTask'];
+
+export async function updateTask(input: ServiceTaskUpdateInput): Promise<UpdatedServiceTask> {
+	const store = new UpdateTaskStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update task');
+	}
+
+	const result = data?.updateTask;
+	if (!result) {
+		throw new Error('No task returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteTask(id: string): Promise<void> {
+	const store = new DeleteTaskStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete task');
+	}
+
+	if (!data?.deleteTask) {
+		throw new Error('Failed to delete task');
+	}
+}
+
+// ============================================================================
+// Project Scope Functions (Active Scopes on Projects)
+// ============================================================================
+
+export type ProjectScopeInput = CreateProjectScope$input['input'];
+export type ProjectScope = CreateProjectScope$result['createProjectScope'];
+
+export async function createProjectScope(input: ProjectScopeInput): Promise<ProjectScope> {
+	const store = new CreateProjectScopeStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope');
+	}
+
+	const result = data?.createProjectScope;
+	if (!result) {
+		throw new Error('No project scope returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectScopeUpdateInput = UpdateProjectScope$input['input'];
+export type UpdatedProjectScope = UpdateProjectScope$result['updateProjectScope'];
+
+export async function updateProjectScope(
+	input: ProjectScopeUpdateInput
+): Promise<UpdatedProjectScope> {
+	const store = new UpdateProjectScopeStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project scope');
+	}
+
+	const result = data?.updateProjectScope;
+	if (!result) {
+		throw new Error('No project scope returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectScope(id: string): Promise<void> {
+	const store = new DeleteProjectScopeStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project scope');
+	}
+
+	if (!data?.deleteProjectScope) {
+		throw new Error('Failed to delete project scope');
+	}
+}
+
+// ============================================================================
+// Project Scope Category Functions (Categories within Active Project Scopes)
+// ============================================================================
+
+export type ProjectScopeCategoryInput = CreateProjectScopeCategory$input['input'];
+export type ProjectScopeCategory = CreateProjectScopeCategory$result['createProjectScopeCategory'];
+
+export async function createProjectScopeCategory(
+	input: ProjectScopeCategoryInput
+): Promise<ProjectScopeCategory> {
+	const store = new CreateProjectScopeCategoryStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope category');
+	}
+
+	const result = data?.createProjectScopeCategory;
+	if (!result) {
+		throw new Error('No project scope category returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectScopeCategoryUpdateInput = UpdateProjectScopeCategory$input['input'];
+export type UpdatedProjectScopeCategory =
+	UpdateProjectScopeCategory$result['updateProjectScopeCategory'];
+
+export async function updateProjectScopeCategory(
+	input: ProjectScopeCategoryUpdateInput
+): Promise<UpdatedProjectScopeCategory> {
+	const store = new UpdateProjectScopeCategoryStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project scope category');
+	}
+
+	const result = data?.updateProjectScopeCategory;
+	if (!result) {
+		throw new Error('No project scope category returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectScopeCategory(id: string): Promise<void> {
+	const store = new DeleteProjectScopeCategoryStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project scope category');
+	}
+
+	if (!data?.deleteProjectScopeCategory) {
+		throw new Error('Failed to delete project scope category');
+	}
+}
+
+// ============================================================================
+// Project Scope Task Functions (Tasks within Active Project Scopes)
+// ============================================================================
+
+export type ProjectScopeTaskInput = CreateProjectScopeTask$input['input'];
+export type ProjectScopeTask = CreateProjectScopeTask$result['createProjectScopeTask'];
+
+export async function createProjectScopeTask(
+	input: ProjectScopeTaskInput
+): Promise<ProjectScopeTask> {
+	const store = new CreateProjectScopeTaskStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project scope task');
+	}
+
+	const result = data?.createProjectScopeTask;
+	if (!result) {
+		throw new Error('No project scope task returned by the server');
+	}
+
+	return result;
+}
+
+export type ProjectScopeTaskUpdateInput = UpdateProjectScopeTask$input['input'];
+export type UpdatedProjectScopeTask = UpdateProjectScopeTask$result['updateProjectScopeTask'];
+
+export async function updateProjectScopeTask(
+	input: ProjectScopeTaskUpdateInput
+): Promise<UpdatedProjectScopeTask> {
+	const store = new UpdateProjectScopeTaskStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project scope task');
+	}
+
+	const result = data?.updateProjectScopeTask;
+	if (!result) {
+		throw new Error('No project scope task returned by the server');
+	}
+
+	return result;
+}
+
+export async function deleteProjectScopeTask(id: string): Promise<void> {
+	const store = new DeleteProjectScopeTaskStore();
+	const { data, errors } = await store.mutate({ id });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to delete project scope task');
+	}
+
+	if (!data?.deleteProjectScopeTask) {
+		throw new Error('Failed to delete project scope task');
+	}
+}
diff --git a/src/lib/utils/searchConfig.ts b/src/lib/utils/searchConfig.ts
new file mode 100644
index 0000000..9d5b3cd
--- /dev/null
+++ b/src/lib/utils/searchConfig.ts
@@ -0,0 +1,291 @@
+export interface SearchPage {
+	label: string;
+	href: string;
+	keywords?: string[];
+	icon?:
+		| 'home'
+		| 'page'
+		| 'account'
+		| 'service'
+		| 'project'
+		| 'report'
+		| 'invoice'
+		| 'customer'
+		| 'calendar'
+		| 'profile'
+		| 'notification'
+		| 'scope'
+		| 'settings'
+		| 'message';
+}
+
+export interface SearchEntity {
+	type: 'account' | 'customer' | 'service' | 'project' | 'report' | 'invoice' | 'scope';
+	id: string;
+	label: string;
+	sublabel?: string;
+	href: string;
+}
+
+export type SearchResult = SearchPage | SearchEntity;
+
+// Public pages - available to everyone
+export const publicPages: SearchPage[] = [
+	{ label: 'Home', href: '/', keywords: ['home', 'main', 'landing'], icon: 'home' },
+	{
+		label: 'Services',
+		href: '/services',
+		keywords: ['services', 'cleaning', 'janitorial'],
+		icon: 'page'
+	},
+	{
+		label: 'Pricing',
+		href: '/pricing',
+		keywords: ['pricing', 'cost', 'rates', 'quote'],
+		icon: 'page'
+	},
+	{ label: 'About Us', href: '/about', keywords: ['about', 'company', 'story'], icon: 'page' },
+	{
+		label: 'Contact',
+		href: '/contact',
+		keywords: ['contact', 'support', 'help', 'phone', 'email'],
+		icon: 'page'
+	},
+	{
+		label: 'Our Standard',
+		href: '/standard',
+		keywords: ['standard', 'quality', 'guarantee'],
+		icon: 'page'
+	},
+	{
+		label: 'Privacy Policy',
+		href: '/privacy',
+		keywords: ['privacy', 'policy', 'data'],
+		icon: 'page'
+	},
+	{ label: 'Terms of Use', href: '/terms', keywords: ['terms', 'use', 'legal'], icon: 'page' }
+];
+
+// Customer pages - available to CustomerProfileType users
+export const customerPages: SearchPage[] = [
+	{
+		label: 'Customer Dashboard',
+		href: '/customer',
+		keywords: ['dashboard', 'home', 'overview'],
+		icon: 'home'
+	},
+	{
+		label: 'My Accounts',
+		href: '/customer/accounts',
+		keywords: ['accounts', 'locations', 'sites'],
+		icon: 'account'
+	},
+	{
+		label: 'Schedule',
+		href: '/customer/schedule',
+		keywords: ['schedule', 'upcoming', 'calendar', 'appointments'],
+		icon: 'calendar'
+	},
+	{
+		label: 'History',
+		href: '/customer/history',
+		keywords: ['history', 'past', 'completed', 'previous'],
+		icon: 'page'
+	},
+	{
+		label: 'Invoices',
+		href: '/customer/invoices',
+		keywords: ['invoices', 'billing', 'payment', 'pay'],
+		icon: 'invoice'
+	},
+	{
+		label: 'My Profile',
+		href: '/customer/profile',
+		keywords: ['profile', 'settings', 'account'],
+		icon: 'profile'
+	}
+];
+
+// Team pages - available to TeamProfileType users (any role)
+export const teamPages: SearchPage[] = [
+	{
+		label: 'Team Dashboard',
+		href: '/team',
+		keywords: ['dashboard', 'home', 'overview'],
+		icon: 'home'
+	},
+	{
+		label: 'My Accounts',
+		href: '/team/accounts',
+		keywords: ['accounts', 'assigned', 'locations'],
+		icon: 'account'
+	},
+	{
+		label: 'My Services',
+		href: '/team/services',
+		keywords: ['services', 'scheduled', 'work'],
+		icon: 'service'
+	},
+	{
+		label: 'My Projects',
+		href: '/team/projects',
+		keywords: ['projects', 'assigned', 'jobs'],
+		icon: 'project'
+	},
+	{
+		label: 'My Reports',
+		href: '/team/reports',
+		keywords: ['reports', 'submitted', 'documents'],
+		icon: 'report'
+	},
+	{
+		label: 'My Profile',
+		href: '/team/profile',
+		keywords: ['profile', 'settings', 'account'],
+		icon: 'profile'
+	}
+];
+
+// Admin pages - available to ADMIN or TEAM_LEADER roles
+export const adminPages: SearchPage[] = [
+	{
+		label: 'Admin Dashboard',
+		href: '/admin',
+		keywords: ['dashboard', 'admin', 'overview'],
+		icon: 'home'
+	},
+	{
+		label: 'Customers',
+		href: '/admin/customers',
+		keywords: ['customers', 'clients', 'companies'],
+		icon: 'customer'
+	},
+	{
+		label: 'Accounts',
+		href: '/admin/accounts',
+		keywords: ['accounts', 'locations', 'sites'],
+		icon: 'account'
+	},
+	{
+		label: 'Services',
+		href: '/admin/services',
+		keywords: ['services', 'scheduled', 'routine'],
+		icon: 'service'
+	},
+	{
+		label: 'Assign Services',
+		href: '/admin/services/assign',
+		keywords: ['assign', 'services', 'team'],
+		icon: 'service'
+	},
+	{
+		label: 'Projects',
+		href: '/admin/projects',
+		keywords: ['projects', 'jobs', 'one-time'],
+		icon: 'project'
+	},
+	{
+		label: 'Scopes',
+		href: '/admin/scopes',
+		keywords: ['scopes', 'templates', 'tasks'],
+		icon: 'scope'
+	},
+	{
+		label: 'Reports',
+		href: '/admin/reports',
+		keywords: ['reports', 'documents', 'submissions'],
+		icon: 'report'
+	},
+	{
+		label: 'Invoices',
+		href: '/admin/invoices',
+		keywords: ['invoices', 'billing', 'payments'],
+		icon: 'invoice'
+	},
+	{
+		label: 'Wave Invoices',
+		href: '/admin/invoices/wave',
+		keywords: ['wave', 'invoices', 'accounting'],
+		icon: 'invoice'
+	},
+	{
+		label: 'Calendar',
+		href: '/admin/calendar',
+		keywords: ['calendar', 'schedule', 'events'],
+		icon: 'calendar'
+	},
+	{
+		label: 'Profiles',
+		href: '/admin/profiles',
+		keywords: ['profiles', 'team', 'users', 'staff'],
+		icon: 'profile'
+	}
+];
+
+// Admin-only pages - available only to ADMIN role
+export const adminOnlyPages: SearchPage[] = [
+	{
+		label: 'Notification Rules',
+		href: '/admin/notifications',
+		keywords: ['notifications', 'alerts', 'rules'],
+		icon: 'notification'
+	},
+	{
+		label: 'Event Log',
+		href: '/admin/events',
+		keywords: ['events', 'log', 'audit', 'history'],
+		icon: 'page'
+	}
+];
+
+// Shared pages - available to all authenticated users
+export const sharedPages: SearchPage[] = [
+	{
+		label: 'Messages',
+		href: '/messages',
+		keywords: ['messages', 'inbox', 'chat', 'conversations'],
+		icon: 'message'
+	},
+	{
+		label: 'Notifications',
+		href: '/notifications',
+		keywords: ['notifications', 'alerts', 'updates'],
+		icon: 'notification'
+	}
+];
+
+// Color scheme mapping for entity types
+export const entityColorSchemes: Record<string, string> = {
+	account: 'primary',
+	service: 'secondary',
+	project: 'accent',
+	report: 'accent2',
+	customer: 'accent3',
+	profile: 'accent4',
+	invoice: 'accent6',
+	calendar: 'accent7',
+	scope: 'accent'
+};
+
+// Section header class mapping
+export const sectionHeaderClasses: Record<string, string> = {
+	pages: 'bg-surface-100 dark:bg-surface-800',
+	account: 'section-header-primary',
+	service: 'section-header-secondary',
+	project: 'section-header-accent',
+	report: 'section-header-accent2',
+	customer: 'section-header-accent3',
+	invoice: 'section-header-accent6',
+	scope: 'section-header-accent'
+};
+
+// Badge class mapping
+export const badgeClasses: Record<string, string> = {
+	account: 'badge-primary',
+	service: 'badge-secondary',
+	project: 'badge-accent',
+	report: 'badge-accent2',
+	customer: 'badge-accent3',
+	invoice: 'badge-accent6',
+	scope: 'badge-accent'
+};
diff --git a/src/lib/utils/session.ts b/src/lib/utils/session.ts
new file mode 100644
index 0000000..ecca35e
--- /dev/null
+++ b/src/lib/utils/session.ts
@@ -0,0 +1,611 @@
+import {
+	OpenServiceSessionStore,
+	CloseServiceSessionStore,
+	RevertServiceSessionStore,
+	OpenProjectSessionStore,
+	CloseProjectSessionStore,
+	RevertProjectSessionStore,
+	AddServiceTaskStore,
+	RemoveServiceTaskStore,
+	AddProjectTaskStore,
+	RemoveProjectTaskStore,
+	CreateServiceNoteStore,
+	UpdateServiceNoteStore,
+	RemoveServiceNoteStore,
+	CreateProjectNoteStore,
+	UpdateProjectNoteStore,
+	RemoveProjectNoteStore,
+	UpdateServicePhotoStore,
+	RemoveServicePhotoStore,
+	UpdateProjectPhotoStore,
+	RemoveProjectPhotoStore,
+	UpdateServiceVideoStore,
+	RemoveServiceVideoStore,
+	UpdateProjectVideoStore,
+	RemoveProjectVideoStore
+} from '$houdini';
+import type {
+	OpenServiceSession$input,
+	OpenServiceSession$result,
+	CloseServiceSession$input,
+	CloseServiceSession$result,
+	OpenProjectSession$input,
+	OpenProjectSession$result,
+	CloseProjectSession$input,
+	CloseProjectSession$result,
+	AddServiceTask$result,
+	RemoveServiceTask$result,
+	AddProjectTask$result,
+	RemoveProjectTask$result,
+	CreateServiceNote$result,
+	UpdateServiceNote$result,
+	CreateProjectNote$result,
+	UpdateProjectNote$result,
+	ServiceSessionNoteInput,
+	ServiceSessionNoteUpdateInput,
+	ProjectSessionNoteInput,
+	ProjectSessionNoteUpdateInput,
+	ServiceSessionImageUpdateInput,
+	ProjectSessionImageUpdateInput,
+	ServiceSessionVideoUpdateInput,
+	ProjectSessionVideoUpdateInput,
+	UpdateServicePhoto$result,
+	UpdateProjectPhoto$result,
+	UpdateServiceVideo$result,
+	UpdateProjectVideo$result
+} from '$houdini';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'https://api.example.com';
+
+// Upload response types
+export interface UploadPhotoResponse {
+	id: string;
+	title: string;
+	notes: string;
+	contentType: string;
+	width: number;
+	height: number;
+	image: string;
+	thumbnail: string;
+	createdAt: string;
+	uploadedById: string | null;
+	internal: boolean;
+	serviceSessionId?: string;
+	projectSessionId?: string;
+}
+
+export interface UploadVideoResponse {
+	id: string;
+	title: string;
+	notes: string;
+	contentType: string;
+	width: number;
+	height: number;
+	durationSeconds: number;
+	fileSizeBytes: number;
+	video: string;
+	thumbnail: string;
+	createdAt: string;
+	uploadedById: string | null;
+	internal: boolean;
+	serviceSessionId?: string;
+	projectSessionId?: string;
+}
+
+// Service Session functions
+export type OpenServiceSessionInput = OpenServiceSession$input['input'];
+export type ServiceSession = OpenServiceSession$result['openServiceSession'];
+
+export async function openServiceSession(input: OpenServiceSessionInput): Promise<ServiceSession> {
+	const store = new OpenServiceSessionStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to open service session');
+	}
+
+	const session = data?.openServiceSession;
+	if (!session) {
+		throw new Error('No service session returned by the server');
+	}
+
+	return session;
+}
+
+export type CloseServiceSessionInput = CloseServiceSession$input['input'];
+export type ClosedServiceSession = CloseServiceSession$result['closeServiceSession'];
+
+export async function closeServiceSession(
+	input: CloseServiceSessionInput
+): Promise<ClosedServiceSession> {
+	const store = new CloseServiceSessionStore();
+	const { data, errors } = await store.mutate({ input });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to close service session');
+	}
+
+	const session = data?.closeServiceSession;
+	if (!session) {
+		throw new Error('No service session returned by the server');
+	}
+
+	return session;
+}
+
+export async function revertServiceSession(serviceId: string): Promise<boolean> {
+	const store = new RevertServiceSessionStore();
+	const { data, errors } = await store.mutate({ input: { serviceId } });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to revert service session');
+	}
+
+	return data?.revertServiceSession ?? false;
+}
+
+// Project Session functions
+export type OpenProjectSessionInput = OpenProjectSession$input['input'];
+export type ProjectSession = OpenProjectSession$result['openProjectSession'];
+
+export async function openProjectSession(input: OpenProjectSessionInput): Promise<ProjectSession> {
+	const store = new OpenProjectSessionStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to open project session');
+	}
+	const session = data?.openProjectSession;
+	if (!session) {
+		throw new Error('No project session returned by the server');
+	}
+	return session;
+}
+
+export type CloseProjectSessionInput = CloseProjectSession$input['input'];
+export type ClosedProjectSession = CloseProjectSession$result['closeProjectSession'];
+
+export async function closeProjectSession(
+	input: CloseProjectSessionInput
+): Promise<ClosedProjectSession> {
+	const store = new CloseProjectSessionStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to close project session');
+	}
+	const session = data?.closeProjectSession;
+	if (!session) {
+		throw new Error('No project session returned by the server');
+	}
+	return session;
+}
+
+export async function revertProjectSession(projectId: string): Promise<boolean> {
+	const store = new RevertProjectSessionStore();
+	const { data, errors } = await store.mutate({ input: { projectId } });
+
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to revert project session');
+	}
+
+	return data?.revertProjectSession ?? false;
+}
+
+// Service Task functions
+export type AddServiceTaskResult = AddServiceTask$result['addTaskCompletion'];
+
+export async function addServiceTask(
+	serviceId: string,
+	taskId: string,
+	notes?: string
+): Promise<AddServiceTaskResult> {
+	const store = new AddServiceTaskStore();
+	const { data, errors } = await store.mutate({ serviceId, taskId, notes });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to add service task');
+	}
+	const session = data?.addTaskCompletion;
+	if (!session) {
+		throw new Error('No session returned by the server');
+	}
+	return session;
+}
+
+export type RemoveServiceTaskResult = RemoveServiceTask$result['removeTaskCompletion'];
+
+export async function removeServiceTask(
+	serviceId: string,
+	taskId: string
+): Promise<RemoveServiceTaskResult> {
+	const store = new RemoveServiceTaskStore();
+	const { data, errors } = await store.mutate({ serviceId, taskId });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove service task');
+	}
+	const session = data?.removeTaskCompletion;
+	if (!session) {
+		throw new Error('No session returned by the server');
+	}
+	return session;
+}
+
+// Project Task functions
+export type AddProjectTaskResult = AddProjectTask$result['addProjectTaskCompletion'];
+
+export async function addProjectTask(
+	projectId: string,
+	taskId: string,
+	notes?: string
+): Promise<AddProjectTaskResult> {
+	const store = new AddProjectTaskStore();
+	const { data, errors } = await store.mutate({ projectId, taskId, notes });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to add project task');
+	}
+	const session = data?.addProjectTaskCompletion;
+	if (!session) {
+		throw new Error('No session returned by the server');
+	}
+	return session;
+}
+
+export type RemoveProjectTaskResult = RemoveProjectTask$result['removeProjectTaskCompletion'];
+
+export async function removeProjectTask(
+	projectId: string,
+	taskId: string
+): Promise<RemoveProjectTaskResult> {
+	const store = new RemoveProjectTaskStore();
+	const { data, errors } = await store.mutate({ projectId, taskId });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove project task');
+	}
+	const session = data?.removeProjectTaskCompletion;
+	if (!session) {
+		throw new Error('No session returned by the server');
+	}
+	return session;
+}
+
+// Service Note functions
+export type CreateServiceNoteResult = CreateServiceNote$result['createServiceSessionNote'];
+
+export async function createServiceNote(
+	input: ServiceSessionNoteInput
+): Promise<CreateServiceNoteResult> {
+	const store = new CreateServiceNoteStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create service note');
+	}
+	const note = data?.createServiceSessionNote;
+	if (!note) {
+		throw new Error('No note returned by the server');
+	}
+	return note;
+}
+
+export type UpdateServiceNoteResult = UpdateServiceNote$result['updateServiceSessionNote'];
+
+export async function updateServiceNote(
+	input: ServiceSessionNoteUpdateInput
+): Promise<UpdateServiceNoteResult> {
+	const store = new UpdateServiceNoteStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update service note');
+	}
+	const note = data?.updateServiceSessionNote;
+	if (!note) {
+		throw new Error('No note returned by the server');
+	}
+	return note;
+}
+
+export async function removeServiceNote(id: string): Promise<void> {
+	const store = new RemoveServiceNoteStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove service note');
+	}
+	if (!data?.deleteServiceSessionNote) {
+		throw new Error('Failed to delete service note');
+	}
+}
+
+// Project Note functions
+export type CreateProjectNoteResult = CreateProjectNote$result['createProjectSessionNote'];
+
+export async function createProjectNote(
+	input: ProjectSessionNoteInput
+): Promise<CreateProjectNoteResult> {
+	const store = new CreateProjectNoteStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to create project note');
+	}
+	const note = data?.createProjectSessionNote;
+	if (!note) {
+		throw new Error('No note returned by the server');
+	}
+	return note;
+}
+
+export type UpdateProjectNoteResult = UpdateProjectNote$result['updateProjectSessionNote'];
+
+export async function updateProjectNote(
+	input: ProjectSessionNoteUpdateInput
+): Promise<UpdateProjectNoteResult> {
+	const store = new UpdateProjectNoteStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project note');
+	}
+	const note = data?.updateProjectSessionNote;
+	if (!note) {
+		throw new Error('No note returned by the server');
+	}
+	return note;
+}
+
+export async function removeProjectNote(id: string): Promise<void> {
+	const store = new RemoveProjectNoteStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove project note');
+	}
+	if (!data?.deleteProjectSessionNote) {
+		throw new Error('Failed to delete project note');
+	}
+}
+
+// Service Photo functions
+export async function uploadServicePhoto(
+	file: File,
+	sessionId: string,
+	title?: string,
+	notes?: string,
+	internal: boolean = true
+): Promise<UploadPhotoResponse> {
+	const formData = new FormData();
+	formData.append('file', file);
+	formData.append('sessionId', sessionId);
+	formData.append('title', title || file.name);
+	formData.append('notes', notes || '');
+	formData.append('internal', String(internal));
+
+	const response = await fetch(`${API_BASE_URL}/v1/api/upload/photo/service/`, {
+		method: 'POST',
+		credentials: 'include',
+		body: formData
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({ detail: '' }));
+		throw new Error(errorData.detail || `Upload failed: ${response.status} ${response.statusText}`);
+	}
+
+	return response.json();
+}
+
+export type UpdateServicePhotoResult = UpdateServicePhoto$result['updateServiceSessionImage'];
+
+export async function updateServicePhoto(
+	input: ServiceSessionImageUpdateInput
+): Promise<UpdateServicePhotoResult> {
+	const store = new UpdateServicePhotoStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update service photo');
+	}
+	const photo = data?.updateServiceSessionImage;
+	if (!photo) {
+		throw new Error('No photo returned by the server');
+	}
+	return photo;
+}
+
+export async function removeServicePhoto(id: string): Promise<void> {
+	const store = new RemoveServicePhotoStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove service photo');
+	}
+	if (!data?.deleteServiceSessionImage) {
+		throw new Error('Failed to delete service photo');
+	}
+}
+
+// Project Photo functions
+export async function uploadProjectPhoto(
+	file: File,
+	sessionId: string,
+	title?: string,
+	notes?: string,
+	internal: boolean = true
+): Promise<UploadPhotoResponse> {
+	const formData = new FormData();
+	formData.append('file', file);
+	formData.append('sessionId', sessionId);
+	formData.append('title', title || file.name);
+	formData.append('notes', notes || '');
+	formData.append('internal', String(internal));
+
+	const response = await fetch(`${API_BASE_URL}/v1/api/upload/photo/project/`, {
+		method: 'POST',
+		credentials: 'include',
+		body: formData
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({ detail: '' }));
+		throw new Error(errorData.detail || `Upload failed: ${response.status} ${response.statusText}`);
+	}
+
+	return response.json();
+}
+
+export type UpdateProjectPhotoResult = UpdateProjectPhoto$result['updateProjectSessionImage'];
+
+export async function updateProjectPhoto(
+	input: ProjectSessionImageUpdateInput
+): Promise<UpdateProjectPhotoResult> {
+	const store = new UpdateProjectPhotoStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project photo');
+	}
+	const photo = data?.updateProjectSessionImage;
+	if (!photo) {
+		throw new Error('No photo returned by the server');
+	}
+	return photo;
+}
+
+export async function removeProjectPhoto(id: string): Promise<void> {
+	const store = new RemoveProjectPhotoStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove project photo');
+	}
+	if (!data?.deleteProjectSessionImage) {
+		throw new Error('Failed to delete project photo');
+	}
+}
+
+// Service Video functions
+export async function uploadServiceVideo(
+	file: File,
+	sessionId: string,
+	title?: string,
+	notes?: string,
+	internal: boolean = true
+): Promise<UploadVideoResponse> {
+	const formData = new FormData();
+	formData.append('file', file);
+	formData.append('sessionId', sessionId);
+	formData.append('title', title || file.name);
+	formData.append('notes', notes || '');
+	formData.append('internal', String(internal));
+
+	const response = await fetch(`${API_BASE_URL}/v1/api/upload/video/service/`, {
+		method: 'POST',
+		credentials: 'include',
+		body: formData
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({ detail: '' }));
+		throw new Error(errorData.detail || `Upload failed: ${response.status} ${response.statusText}`);
+	}
+
+	return response.json();
+}
+
+export type UpdateServiceVideoResult = UpdateServiceVideo$result['updateServiceSessionVideo'];
+
+export async function updateServiceVideo(
+	input: ServiceSessionVideoUpdateInput
+): Promise<UpdateServiceVideoResult> {
+	const store = new UpdateServiceVideoStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update service video');
+	}
+	const video = data?.updateServiceSessionVideo;
+	if (!video) {
+		throw new Error('No video returned by the server');
+	}
+	return video;
+}
+
+export async function removeServiceVideo(id: string): Promise<void> {
+	const store = new RemoveServiceVideoStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove service video');
+	}
+	if (!data?.deleteServiceSessionVideo) {
+		throw new Error('Failed to delete service video');
+	}
+}
+
+// Project Video functions
+export async function uploadProjectVideo(
+	file: File,
+	sessionId: string,
+	title?: string,
+	notes?: string,
+	internal: boolean = true
+): Promise<UploadVideoResponse> {
+	const formData = new FormData();
+	formData.append('file', file);
+	formData.append('sessionId', sessionId);
+	formData.append('title', title || file.name);
+	formData.append('notes', notes || '');
+	formData.append('internal', String(internal));
+
+	const response = await fetch(`${API_BASE_URL}/v1/api/upload/video/project/`, {
+		method: 'POST',
+		credentials: 'include',
+		body: formData
+	});
+
+	if (!response.ok) {
+		const errorData = await response.json().catch(() => ({ detail: '' }));
+		throw new Error(errorData.detail || `Upload failed: ${response.status} ${response.statusText}`);
+	}
+
+	return response.json();
+}
+
+export type UpdateProjectVideoResult = UpdateProjectVideo$result['updateProjectSessionVideo'];
+
+export async function updateProjectVideo(
+	input: ProjectSessionVideoUpdateInput
+): Promise<UpdateProjectVideoResult> {
+	const store = new UpdateProjectVideoStore();
+	const { data, errors } = await store.mutate({ input });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to update project video');
+	}
+	const video = data?.updateProjectSessionVideo;
+	if (!video) {
+		throw new Error('No video returned by the server');
+	}
+	return video;
+}
+
+export async function removeProjectVideo(id: string): Promise<void> {
+	const store = new RemoveProjectVideoStore();
+	const { data, errors } = await store.mutate({ id });
+	if (errors?.length) {
+		const message = errors.map((e) => e.message || 'Unknown error').join('; ');
+		throw new Error(message || 'Failed to remove project video');
+	}
+	if (!data?.deleteProjectSessionVideo) {
+		throw new Error('Failed to delete project video');
+	}
+}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..35c489a
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+
+	const errorMessages: Record<number, string> = {
+		400: 'Bad Request',
+		401: 'Unauthorized',
+		403: 'Access Denied',
+		404: 'Page Not Found',
+		500: 'Internal Server Error'
+	};
+
+	let title = $derived(errorMessages[page.status] || 'Something went wrong');
+</script>
+
+{#snippet shieldLock()}
+	<!-- Shield with lock - for 403 Access Denied -->
+	<svg
+		class="h-32 w-32 text-theme-muted"
+		viewBox="0 0 24 24"
+		style="fill: none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+		<rect x="9" y="10" width="6" height="5" rx="1" />
+		<path d="M10 10V8a2 2 0 1 1 4 0v2" />
+	</svg>
+{/snippet}
+
+{#snippet magnifyingGlass()}
+	<!-- Magnifying glass with question mark - for 404 Not Found -->
+	<svg
+		class="h-32 w-32 text-theme-muted"
+		viewBox="0 0 24 24"
+		style="fill: none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<circle cx="10" cy="10" r="7" />
+		<path d="M21 21l-4.35-4.35" />
+		<path d="M10 7a2.5 2.5 0 0 0-2.5 2.5" />
+		<circle cx="10" cy="13" r="0.5" style="fill: currentColor" />
+	</svg>
+{/snippet}
+
+{#snippet warningTriangle()}
+	<!-- Warning triangle - for general errors -->
+	<svg
+		class="h-32 w-32 text-theme-muted"
+		viewBox="0 0 24 24"
+		style="fill: none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path
+			d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+		/>
+		<line x1="12" y1="9" x2="12" y2="13" />
+		<circle cx="12" cy="17" r="0.5" style="fill: currentColor" />
+	</svg>
+{/snippet}
+
+<svelte:head>
+	<title>{title} - Nexus</title>
+</svelte:head>
+
+<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
+	<div class="max-w-md text-center">
+		<div class="mb-6 flex justify-center">
+			{#if page.status === 403 || page.status === 401}
+				{@render shieldLock()}
+			{:else if page.status === 404}
+				{@render magnifyingGlass()}
+			{:else}
+				{@render warningTriangle()}
+			{/if}
+		</div>
+		<div class="mb-4 text-6xl font-bold text-theme-muted">{page.status}</div>
+		<h1 class="mb-2 text-2xl font-semibold text-theme">{title}</h1>
+		{#if page.error?.message}
+			<p class="mb-6 text-theme-secondary">{page.error.message}</p>
+		{/if}
+		<div class="flex justify-center gap-3">
+			<button onclick={() => history.back()} class="btn-ghost card border text-theme-secondary">
+				Go Back
+			</button>
+			<button onclick={() => goto('/')} class="btn-primary">Home</button>
+		</div>
+	</div>
+</section>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..b06cb29
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,44 @@
+import {
+	MeStore as User,
+	TeamStore as Team,
+	CustomersStore as Customers,
+	AccountsBasicStore as Accounts
+} from '$houdini';
+import type { LayoutServerLoad } from './$types';
+import {
+	buildAccountAddressLookup,
+	buildCustomerLookup,
+	buildNonAdminTeamIds,
+	buildTeamMemberLookup
+} from '$lib/utils/lookup';
+
+export const load: LayoutServerLoad = async (event) => {
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	const [user, team, customers, accounts] = await Promise.all([
+		new User().fetch(fetchParams),
+		new Team().fetch(fetchParams),
+		new Customers().fetch(fetchParams),
+		new Accounts().fetch(fetchParams)
+	]);
+
+	// Build lookups once at the root level
+	const accountLookup = buildAccountAddressLookup(accounts?.data?.accounts);
+	const customerLookup = buildCustomerLookup(customers?.data?.customers);
+	const nonAdminTeamIds = buildNonAdminTeamIds(team?.data?.teamProfiles);
+	const teamMemberLookup = buildTeamMemberLookup(team?.data?.teamProfiles);
+
+	return {
+		user,
+		team,
+		customers,
+		accounts,
+		accountLookup,
+		customerLookup,
+		nonAdminTeamIds,
+		teamMemberLookup
+	};
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..19685bf
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import './layout.css';
+	import type { LayoutData } from './$types';
+	import favicon from '$lib/assets/logo-icon.png';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
+	import { page } from '$app/state';
+	import { onMount, onDestroy, type Snippet } from 'svelte';
+	import TopNav from '$lib/components/nav/TopNav.svelte';
+	import MenuOverlay from '$lib/components/layout/MenuOverlay.svelte';
+	import TeamNav from '$lib/components/nav/TeamNav.svelte';
+	import AdminNav from '$lib/components/nav/AdminNav.svelte';
+	import CustomerNav from '$lib/components/nav/CustomerNav.svelte';
+	import BusinessFooter from '$lib/components/BusinessFooter.svelte';
+	import OffCanvasRight from '$lib/components/layout/OffCanvasRight.svelte';
+	import ChatPanel from '$lib/components/chat/ChatPanel.svelte';
+	import ChatToggle from '$lib/components/chat/ChatToggle.svelte';
+	import { chat } from '$lib/stores/chat.svelte';
+
+	let { data, children }: { data: LayoutData; children: Snippet } = $props();
+	let sidebarOpen = $state(false);
+	let user = $derived(data.user?.data?.me ?? null);
+	let isAuthenticated = $derived(!!user);
+
+	// Public routes that show BusinessFooter instead of bottom nav
+	const publicRoutes = [
+		'/',
+		'/services',
+		'/about',
+		'/contact',
+		'/careers',
+		'/press',
+		'/blog',
+		'/help',
+		'/privacy',
+		'/terms',
+		'/cookies',
+		'/login',
+		'/register',
+		'/logout',
+		'/standard',
+		'/pricing'
+	];
+	let isPublicRoute = $derived(publicRoutes.includes(page.url.pathname));
+
+	// Route-based nav selection
+	let isTeamRoute = $derived(page.url.pathname.startsWith('/team'));
+	let isAdminRoute = $derived(page.url.pathname.startsWith('/admin'));
+	let isCustomerRoute = $derived(page.url.pathname.startsWith('/customer'));
+
+	function openSidebar() {
+		sidebarOpen = true;
+	}
+
+	function closeSidebar() {
+		sidebarOpen = false;
+	}
+
+	// Start/stop polling based on authentication state
+	$effect(() => {
+		if (isAuthenticated) {
+			unreadCounts.startPolling();
+		} else {
+			unreadCounts.stopPolling();
+			unreadCounts.resetCounts();
+			chat.disconnect();
+		}
+	});
+
+	onMount(() => {
+		theme.init();
+	});
+
+	onDestroy(() => {
+		unreadCounts.stopPolling();
+		chat.disconnect();
+	});
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+	<title>{isPublicRoute ? 'Nexus Cleaning Solutions | Nexus v5.0' : 'Nexus v5.0'}</title>
+</svelte:head>
+
+<div class="flex min-h-dvh flex-col">
+	<TopNav {user} onMenuClick={openSidebar} />
+	<MenuOverlay {user} open={sidebarOpen} onClose={closeSidebar} />
+
+	<main class="flex-1 pt-14">
+		{@render children()}
+	</main>
+
+	{#if isPublicRoute}
+		<BusinessFooter />
+	{:else if isTeamRoute}
+		<TeamNav />
+	{:else if isAdminRoute}
+		<AdminNav />
+	{:else if isCustomerRoute}
+		<CustomerNav />
+	{/if}
+
+	<OffCanvasRight />
+
+	<!-- Chat for authenticated users on non-public routes -->
+	{#if isAuthenticated && !isPublicRoute}
+		<ChatToggle />
+		<ChatPanel />
+	{/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..80c6393
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,406 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import heroImage from '$lib/assets/hero.jpg';
+</script>
+
+<svelte:head>
+	<title>Nexus Cleaning Solutions - Commercial Cleaning Services</title>
+	<meta
+		name="description"
+		content="Professional commercial cleaning services in Macomb County, MI and surrounding areas. Routine janitorial, floor care, and commercial kitchen cleaning for businesses throughout Metro Detroit."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="relative flex min-h-[500px] items-center md:min-h-[600px]">
+	<!-- Background Image -->
+	<div class="absolute inset-0 z-0">
+		<img src={heroImage} alt="Professional cleaning service" class="h-full w-full object-cover" />
+		<!-- Overlay for text readability -->
+		<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30"></div>
+	</div>
+
+	<!-- Content -->
+	<ContentContainer>
+		<div class="relative z-10 max-w-2xl py-20 md:py-32">
+			<h1 class="text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
+				We Don't Just Clean.
+				<span class="text-primary-300">We Deliver Peace of Mind.</span>
+			</h1>
+			<p class="mt-6 text-lg text-gray-200 md:text-xl">
+				Nexus Cleaning Solutions provides exceptional commercial cleaning and floor care
+				services, built on 5 years of experience and specialized expertise. Outstanding workmanship
+				and complete client satisfaction, every single time.
+			</p>
+			<div class="mt-10 flex flex-col gap-4 sm:flex-row">
+				<a
+					href="/contact"
+					class="inline-flex items-center justify-center rounded-lg bg-primary-600 px-6 py-3 font-medium text-white transition-colors hover:bg-primary-700"
+				>
+					Request a Quote
+				</a>
+				<a
+					href="/services"
+					class="inline-flex items-center justify-center rounded-lg border border-white/30 px-6 py-3 font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/10"
+				>
+					Our Services
+				</a>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Services Overview Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mb-16 text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Comprehensive Cleaning Solutions</h2>
+			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
+				From daily janitorial services to specialized deep cleaning, we keep your facility spotless
+				so you can focus on your business.
+			</p>
+		</div>
+
+		<div class="grid gap-8 md:grid-cols-3">
+			<!-- Service 1 -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-6">
+				<div
+					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900"
+				>
+					<svg
+						class="h-6 w-6 text-primary-600 dark:text-primary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-xl font-semibold text-theme">Janitorial Service</h3>
+				<p class="text-theme-secondary">
+					Scheduled cleaning services tailored to your facility. Custom scope of work with task
+					frequencies that match your needs: daily, weekly, or monthly.
+				</p>
+			</div>
+
+			<!-- Service 2 -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-6">
+				<div
+					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-secondary-100 dark:bg-secondary-900"
+				>
+					<svg
+						class="h-6 w-6 text-secondary-600 dark:text-secondary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-xl font-semibold text-theme">Floor Care</h3>
+				<p class="text-theme-secondary">
+					Professional floor maintenance including stripping, waxing, buffing, and deep cleaning.
+					Keep your floors looking their best year-round.
+				</p>
+			</div>
+
+			<!-- Service 3 -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-6">
+				<div
+					class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-accent-100 dark:bg-accent-900"
+				>
+					<svg
+						class="h-6 w-6 text-accent-600 dark:text-accent-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-xl font-semibold text-theme">Commercial Kitchen</h3>
+				<p class="text-theme-secondary">
+					Comprehensive kitchen cleaning covering equipment, walls, ceiling tiles, and floors. Keep
+					your commercial kitchen spotless and sanitary.
+				</p>
+			</div>
+		</div>
+
+		<div class="mt-12 text-center">
+			<a
+				href="/services"
+				class="inline-flex items-center gap-2 font-medium text-primary-600 hover:underline dark:text-primary-400"
+			>
+				View all services
+				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+			</a>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- The Nexus Difference -->
+<section class="border-y border-theme bg-theme-card py-20">
+	<ContentContainer>
+		<div class="mb-16 text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">The Nexus Difference</h2>
+			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
+				From your first call to the final walkthrough, you'll experience clear, professional
+				communication and a team that truly listens. Big or small, every project benefits from our
+				unwavering commitment to safety, reliability, and top-tier quality.
+			</p>
+		</div>
+
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+			<!-- No Contracts -->
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
+				>
+					<svg
+						class="h-8 w-8 text-primary-600 dark:text-primary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">No Contracts</h3>
+				<p class="text-sm text-theme-secondary">
+					One consultation, then book as needed. Our Nexus Standard guarantees quality at a
+					transparent price.
+				</p>
+			</div>
+
+			<!-- Safe Products -->
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-success-100 dark:bg-success-900"
+				>
+					<svg
+						class="h-8 w-8 text-success-600 dark:text-success-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Safe & Effective</h3>
+				<p class="text-sm text-theme-secondary">
+					We carefully select our products for a spotless shine that's gentle on your workplace and
+					your people.
+				</p>
+			</div>
+
+			<!-- Easy Scheduling -->
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-secondary-100 dark:bg-secondary-900"
+				>
+					<svg
+						class="h-8 w-8 text-secondary-600 dark:text-secondary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Easy Scheduling</h3>
+				<p class="text-sm text-theme-secondary">
+					When cleaning falls off your to-do list, we step in. Book online or call for fast,
+					reliable service.
+				</p>
+			</div>
+
+			<!-- Transparent Pricing -->
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent-100 dark:bg-accent-900"
+				>
+					<svg
+						class="h-8 w-8 text-accent-600 dark:text-accent-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Transparent Pricing</h3>
+				<p class="text-sm text-theme-secondary">
+					No hidden fees, no surprises. You'll know exactly what you're paying for before we start.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Our Commitment Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div class="aspect-square overflow-hidden rounded-2xl md:aspect-[4/3]">
+				<img
+					src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=450&fit=crop"
+					alt="Professional cleaning team at work"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+			<div>
+				<h2 class="mb-6 text-3xl font-bold text-theme md:text-4xl">Our Commitment to You</h2>
+				<p class="mb-8 text-lg text-theme-secondary">
+					We understand that inviting a cleaning team into your business requires trust. That's why
+					we're committed to earning it every single day.
+				</p>
+				<ul class="space-y-4">
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<div>
+							<span class="font-medium text-theme">Trained & Insured Team</span>
+							<p class="text-sm text-theme-secondary">
+								Our cleaning professionals are thoroughly trained, background-checked, and fully
+								insured.
+							</p>
+						</div>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<div>
+							<span class="font-medium text-theme">Customized Cleaning Plans</span>
+							<p class="text-sm text-theme-secondary">
+								Every facility is different. We build a scope of work around your specific needs and
+								schedule.
+							</p>
+						</div>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<div>
+							<span class="font-medium text-theme">Customer Portal Access</span>
+							<p class="text-sm text-theme-secondary">
+								Track services, view reports, and communicate with our team through your online
+								account.
+							</p>
+						</div>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-6 w-6 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<div>
+							<span class="font-medium text-theme">The Nexus Standard</span>
+							<p class="text-sm text-theme-secondary">
+								Our quality guarantee means if you're not satisfied, we'll make it right.
+							</p>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- CTA Section -->
+<section class="border-y border-theme bg-theme-card py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Ready for a cleaner facility?</h2>
+			<p class="mt-4 text-lg text-theme-secondary">
+				Serving businesses throughout Macomb County, Oakland County, and Metro Detroit. Get in touch
+				for a free consultation. We'll walk through your space, understand your needs, and build a
+				cleaning plan that works for you.
+			</p>
+			<a
+				href="/contact"
+				class="mt-8 inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
+			>
+				Get a Free Quote
+			</a>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..0f9acc5
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+</script>
+
+<svelte:head>
+	<title>About Us - Nexus</title>
+	<meta
+		name="description"
+		content="Learn about Nexus Cleaning Solutions, a Macomb County commercial cleaning company committed to delivering dependable janitorial services throughout Southeast Michigan."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">About Nexus</h1>
+			<p class="mt-6 text-xl text-theme-secondary">
+				Nexus Cleaning Solutions is a Macomb County-based commercial cleaning company dedicated
+				to providing dependable janitorial services, floor care, and specialty cleaning for
+				businesses throughout Southeast Michigan.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Story Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div>
+				<h2 class="mb-6 text-3xl font-bold text-theme">Our Story</h2>
+				<div class="space-y-4 text-theme-secondary">
+					<p>
+						Nexus Cleaning Solutions was founded on a simple principle: businesses deserve a
+						cleaning partner they can rely on. We've built our reputation on showing up when we say
+						we will and delivering consistent, quality results.
+					</p>
+					<p>
+						We understand that a clean facility is more than just appearances. It's about creating a
+						healthy, productive environment for your employees and a welcoming space for your
+						customers.
+					</p>
+					<p>
+						Today, we're proud to serve a growing roster of commercial clients across Macomb County,
+						Oakland County, and Metro Detroit. From office buildings and medical facilities to
+						restaurants and industrial spaces.
+					</p>
+				</div>
+			</div>
+			<div class="aspect-video overflow-hidden rounded-2xl">
+				<img
+					src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop"
+					alt="Professional cleaning team"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Why We Do This Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-3xl">
+			<h2 class="mb-6 text-center text-3xl font-bold text-theme">Why We Do This</h2>
+			<div class="space-y-6 text-lg text-theme-secondary">
+				<p>
+					Commercial cleaning has a reputation problem. Too often, it's treated as an afterthought,
+					something to get done as cheaply as possible, by whoever will do it for less. The result?
+					A race to the bottom that hurts everyone: businesses get unreliable service, and the
+					people doing the work aren't valued for what they bring.
+				</p>
+				<p>
+					We started Nexus because we believe cleaning deserves better. It's skilled work. It
+					keeps people healthy. It makes businesses function. And the people who do it well deserve
+					to be paid fairly and treated with respect.
+				</p>
+				<p>
+					That's why we're committed to elevating the standard, not just in how we clean, but in how
+					we operate. We pay our team what the work is worth. We invest in proper training and
+					equipment. We show up when we say we will. And we stand behind every job with <a
+						href="/standard"
+						class="text-primary-600 hover:underline dark:text-primary-400"
+						>a guarantee that means something</a
+					>.
+				</p>
+				<p>
+					This isn't about being the cheapest option. It's about being the partner you can actually
+					count on.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Values Section -->
+<section class="border-y border-theme bg-theme-card py-20">
+	<ContentContainer>
+		<div class="mb-16 text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Our Values</h2>
+			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
+				These principles guide everything we do at Nexus.
+			</p>
+		</div>
+
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
+				>
+					<svg
+						class="h-8 w-8 text-primary-600 dark:text-primary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Dependability</h3>
+				<p class="text-sm text-theme-secondary">
+					We show up on time, every time. You can count on us.
+				</p>
+			</div>
+
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-secondary-100 dark:bg-secondary-900"
+				>
+					<svg
+						class="h-8 w-8 text-secondary-600 dark:text-secondary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Quality</h3>
+				<p class="text-sm text-theme-secondary">We take pride in our work and never cut corners.</p>
+			</div>
+
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent-100 dark:bg-accent-900"
+				>
+					<svg
+						class="h-8 w-8 text-accent-600 dark:text-accent-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Communication</h3>
+				<p class="text-sm text-theme-secondary">We listen to your needs and keep you informed.</p>
+			</div>
+
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-success-100 dark:bg-success-900"
+				>
+					<svg
+						class="h-8 w-8 text-success-600 dark:text-success-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-2 text-lg font-semibold text-theme">Respect</h3>
+				<p class="text-sm text-theme-secondary">We treat your space and your people with care.</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- CTA Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Ready to work with us?</h2>
+			<p class="mt-4 text-lg text-theme-secondary">
+				Contact us today for a free consultation and see how Nexus can help keep your facility
+				spotless.
+			</p>
+			<div class="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
+				<a
+					href="/contact"
+					class="inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
+				>
+					Get in Touch
+				</a>
+				<a
+					href="/pricing"
+					class="inline-flex items-center justify-center rounded-lg border border-theme interactive px-8 py-4 font-medium text-theme"
+				>
+					View Pricing
+				</a>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/admin/+layout.server.ts b/src/routes/admin/+layout.server.ts
new file mode 100644
index 0000000..84d5326
--- /dev/null
+++ b/src/routes/admin/+layout.server.ts
@@ -0,0 +1,71 @@
+import type { LayoutServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+import { AdminDashboardStore, AccountsStore } from '$houdini';
+import { getCurrentMonth } from '$lib/utils/date';
+
+export const load: LayoutServerLoad = async (event) => {
+	const { url, parent, locals, depends } = event;
+
+	// Register dependency for invalidation
+	depends('app:dashboard');
+
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Not authenticated
+	if (!me) {
+		const returnTo = encodeURIComponent(url.pathname + url.search);
+		throw redirect(307, `/login?return_to=${returnTo}`);
+	}
+
+	// Admin requires team profile with admin or team_leader role
+	if (me.__typename !== 'TeamProfileType') {
+		throw error(403, 'Admin access requires a team profile');
+	}
+
+	if (me.role !== 'ADMIN' && me.role !== 'TEAM_LEADER') {
+		throw error(403, 'Admin access requires an admin or team leader role');
+	}
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Get month from URL params or default to current
+	const month = url.searchParams.get('month') ?? getCurrentMonth();
+
+	// Fetch dashboard data and full accounts in parallel
+	// Admin pages need full account data with schedules, scopes, contacts, revenues
+	const [dashboardResult, accountsResult] = await Promise.all([
+		new AdminDashboardStore().fetch({
+			...fetchParams,
+			variables: { month }
+		}),
+		new AccountsStore().fetch(fetchParams)
+	]);
+
+	const dashboard = dashboardResult.data?.adminDashboard;
+
+	// Filter services and projects by status client-side
+	const services = dashboard?.services ?? [];
+	const projects = dashboard?.projects ?? [];
+
+	return {
+		...parentData,
+		// Override with full accounts data (includes schedules, scopes, contacts, revenues)
+		accounts: accountsResult,
+		services: {
+			scheduled: services.filter((s) => s.status === 'SCHEDULED'),
+			inProgress: services.filter((s) => s.status === 'IN_PROGRESS'),
+			completed: services.filter((s) => s.status === 'COMPLETED')
+		},
+		projects: {
+			scheduled: projects.filter((p) => p.status === 'SCHEDULED'),
+			inProgress: projects.filter((p) => p.status === 'IN_PROGRESS'),
+			completed: projects.filter((p) => p.status === 'COMPLETED')
+		},
+		invoices: dashboard?.invoices ?? [],
+		reports: dashboard?.reports ?? [],
+		serviceScopes: dashboard?.serviceScopeTemplates ?? [],
+		projectScopes: dashboard?.projectScopeTemplates ?? [],
+		currentMonth: month
+	};
+};
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
new file mode 100644
index 0000000..ae9c9d0
--- /dev/null
+++ b/src/routes/admin/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+{@render children()}
diff --git a/src/routes/admin/+page.server.ts b/src/routes/admin/+page.server.ts
new file mode 100644
index 0000000..c4e8636
--- /dev/null
+++ b/src/routes/admin/+page.server.ts
@@ -0,0 +1,36 @@
+import type { PageServerLoad } from './$types';
+import { getWeekDateRange } from '$lib/utils/date';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	// Get parent data - no additional queries needed!
+	// The layout already fetched all month data, we just filter for this week
+	const parentData = await parent();
+
+	// Get current week's date range for filtering
+	const { start, end } = getWeekDateRange();
+
+	// Filter services and projects for this week from parent data
+	const isInWeek = (date: string) => date >= start && date <= end;
+
+	const weekServices = {
+		scheduled: (parentData.services?.scheduled ?? []).filter((s) => isInWeek(s.date)),
+		inProgress: (parentData.services?.inProgress ?? []).filter((s) => isInWeek(s.date))
+	};
+
+	const weekProjects = {
+		scheduled: (parentData.projects?.scheduled ?? []).filter((p) => isInWeek(p.date)),
+		inProgress: (parentData.projects?.inProgress ?? []).filter((p) => isInWeek(p.date))
+	};
+
+	// Filter invoices for SENT status (awaiting payment)
+	const pendingInvoices = (parentData.invoices ?? []).filter((i) => i.status === 'SENT');
+
+	return {
+		...parentData,
+		dashboard: {
+			services: weekServices,
+			projects: weekProjects,
+			invoices: pendingInvoices
+		}
+	};
+};
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
new file mode 100644
index 0000000..01f905f
--- /dev/null
+++ b/src/routes/admin/+page.svelte
@@ -0,0 +1,629 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminDashboardHeader from '$lib/components/admin/AdminDashboardHeader.svelte';
+	import NavIcon from '$lib/components/icons/NavIcon.svelte';
+	import { beforeNavigate } from '$app/navigation';
+	import { calendarService, type CalendarEvent } from '$lib/services/calendar';
+	import type { PageData } from './$types';
+
+	// Track which item is currently loading
+	let loadingId = $state<string | null>(null);
+
+	// Calendar events state
+	let calendarEvents = $state<CalendarEvent[]>([]);
+	let calendarLoading = $state(true);
+	let calendarError = $state<string | null>(null);
+
+	// Listen for navigation to set loading state
+	beforeNavigate(({ to }) => {
+		if (
+			to?.url.pathname.startsWith('/admin/services/') ||
+			to?.url.pathname.startsWith('/admin/projects/') ||
+			to?.url.pathname.startsWith('/admin/invoices/')
+		) {
+			const parts = to.url.pathname.split('/');
+			loadingId = parts[parts.length - 1];
+		}
+	});
+
+	let { data }: { data: PageData } = $props();
+
+	// User info
+	let user = $derived(data.user?.data?.me);
+	let firstName = $derived(user?.fullName?.split(' ')[0] ?? 'Admin');
+
+	// Lookups from layout
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Dashboard data - now directly arrays from parent data filtering
+	let scheduledServices = $derived(data.dashboard?.services?.scheduled ?? []);
+	let inProgressServices = $derived(data.dashboard?.services?.inProgress ?? []);
+	let scheduledProjects = $derived(data.dashboard?.projects?.scheduled ?? []);
+	let inProgressProjects = $derived(data.dashboard?.projects?.inProgress ?? []);
+	let pendingInvoices = $derived(data.dashboard?.invoices ?? []);
+
+	// Combine scheduled + in-progress for "this week" view
+	let thisWeekServices = $derived(
+		[...scheduledServices, ...inProgressServices].sort((a, b) => a.date.localeCompare(b.date))
+	);
+	let thisWeekProjects = $derived(
+		[...scheduledProjects, ...inProgressProjects].sort((a, b) => a.date.localeCompare(b.date))
+	);
+
+	// Get day number from date
+	function getDayNum(dateStr: string): number {
+		return new Date(dateStr + 'T00:00:00').getDate();
+	}
+
+	// Get short weekday from date
+	function getWeekday(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short' });
+	}
+
+	// Get account info for services
+	function getAccountInfo(accountAddressId: string | null | undefined) {
+		if (!accountAddressId) return null;
+		return accountLookup.get(accountAddressId) ?? null;
+	}
+
+	// Get project display name
+	function getProjectDisplayName(project: {
+		accountAddressId?: string | null;
+		customerId?: string | null;
+		name: string;
+	}) {
+		if (project.accountAddressId) {
+			return accountLookup.get(project.accountAddressId)?.accountName ?? 'Unknown Account';
+		}
+		if (project.customerId) {
+			return customerLookup.get(project.customerId)?.customerName ?? 'Unknown Customer';
+		}
+		return 'No account/customer';
+	}
+
+	// Get customer name for invoices
+	function getCustomerName(customerId: string | null | undefined): string {
+		if (!customerId) return 'Unknown Customer';
+		return customerLookup.get(customerId)?.customerName ?? 'Unknown Customer';
+	}
+
+	// Get event date/time for display
+	function getEventDateTime(event: CalendarEvent): { date: string; time: string | null } {
+		if (event.start.date) {
+			// All-day event
+			return { date: event.start.date, time: null };
+		}
+		if (event.start.dateTime) {
+			const dt = new Date(event.start.dateTime);
+			const date = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			const time = dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+			return { date, time };
+		}
+		return { date: '', time: null };
+	}
+
+	// Load calendar events on mount
+	$effect(() => {
+		async function loadCalendarEvents() {
+			calendarLoading = true;
+			calendarError = null;
+
+			// Get events for the next 7 days
+			const now = new Date();
+			const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
+
+			const result = await calendarService.listEvents({
+				timeMin: now.toISOString(),
+				timeMax: nextWeek.toISOString(),
+				maxResults: 5
+			});
+
+			if (result.error) {
+				calendarError = result.error.message;
+			} else {
+				calendarEvents = result.data ?? [];
+			}
+			calendarLoading = false;
+		}
+
+		loadCalendarEvents();
+	});
+</script>
+
+<svelte:head>
+	<title>Admin Dashboard - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Welcome Header with nav menu -->
+		<AdminDashboardHeader
+			title="Welcome back, {firstName}!"
+			subtitle="Here's your business overview for this week."
+			showBackButton={false}
+		/>
+
+		<!-- Quick Actions Row -->
+		<div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
+			<a
+				href="/admin/customers?action=create"
+				class="flex flex-col items-center gap-2 rounded-xl border border-theme bg-theme-card p-4 transition-all hover:border-primary-500/30 hover:shadow-md"
+			>
+				<div
+					class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+				>
+					<NavIcon name="customers" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+				</div>
+				<span class="text-xs font-medium text-theme sm:text-sm">Add Customer</span>
+			</a>
+			<a
+				href="/admin/accounts?action=create"
+				class="flex flex-col items-center gap-2 rounded-xl border border-theme bg-theme-card p-4 transition-all hover:border-primary-500/30 hover:shadow-md"
+			>
+				<div
+					class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
+				>
+					<NavIcon name="accounts" class="h-5 w-5 text-primary-600 dark:text-primary-400" />
+				</div>
+				<span class="text-xs font-medium text-theme sm:text-sm">Add Account</span>
+			</a>
+			<a
+				href="/admin/services?action=create"
+				class="flex flex-col items-center gap-2 rounded-xl border border-theme bg-theme-card p-4 transition-all hover:border-secondary-500/30 hover:shadow-md"
+			>
+				<div
+					class="flex h-10 w-10 items-center justify-center rounded-full bg-secondary-100 dark:bg-secondary-900/30"
+				>
+					<NavIcon name="services" class="h-5 w-5 text-secondary-600 dark:text-secondary-400" />
+				</div>
+				<span class="text-xs font-medium text-theme sm:text-sm">Schedule Service</span>
+			</a>
+			<a
+				href="/admin/invoices?action=create"
+				class="flex flex-col items-center gap-2 rounded-xl border border-theme bg-theme-card p-4 transition-all hover:border-accent6-500/30 hover:shadow-md"
+			>
+				<div
+					class="flex h-10 w-10 items-center justify-center rounded-full bg-accent6-100 dark:bg-accent6-900/30"
+				>
+					<NavIcon name="invoices" class="h-5 w-5 text-accent6-600 dark:text-accent6-400" />
+				</div>
+				<span class="text-xs font-medium text-theme sm:text-sm">Create Invoice</span>
+			</a>
+		</div>
+
+		<!-- Dashboard Grid -->
+		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6">
+			<!-- Services Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-secondary px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-secondary-600 dark:text-secondary-400">
+							Services
+						</h2>
+						<a
+							href="/admin/services"
+							class="text-sm text-secondary-500 hover:text-secondary-600 dark:hover:text-secondary-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="px-3 py-3 sm:p-4">
+					<h3 class="mb-3 text-sm font-medium text-theme-secondary">This Week</h3>
+					{#if thisWeekServices.length === 0}
+						<p class="text-sm text-theme-muted italic">No services scheduled this week</p>
+					{:else}
+						<div class="space-y-2">
+							{#each thisWeekServices.slice(0, 5) as service (service.id)}
+								{@const accountInfo = getAccountInfo(service.accountAddressId)}
+								<a
+									href="/admin/services/{service.id}"
+									class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-secondary-500/30 hover:shadow-md"
+								>
+									<!-- Calendar tile -->
+									<div
+										class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-card"
+									>
+										<span class="text-[10px] font-medium text-theme-muted uppercase"
+											>{getWeekday(service.date)}</span
+										>
+										<span class="text-base leading-none font-bold text-theme"
+											>{getDayNum(service.date)}</span
+										>
+									</div>
+									<!-- Info -->
+									<div class="min-w-0 flex-1 overflow-hidden">
+										{#if accountInfo}
+											<p class="truncate text-sm font-medium text-theme">
+												{accountInfo.accountName}
+											</p>
+											<p class="truncate text-xs text-theme-muted">{accountInfo.addressName}</p>
+										{:else}
+											<p class="text-sm text-theme-muted italic">No account linked</p>
+										{/if}
+									</div>
+									<!-- Status badge -->
+									<span
+										class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium {service.status ===
+										'IN_PROGRESS'
+											? 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+											: 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'}"
+									>
+										{service.status === 'IN_PROGRESS' ? 'Active' : 'Scheduled'}
+									</span>
+									<!-- Chevron or Spinner -->
+									{#if loadingId === service.id}
+										<svg
+											class="h-5 w-5 shrink-0 animate-spin text-secondary-500"
+											style="fill: none"
+											viewBox="0 0 24 24"
+										>
+											<circle
+												class="opacity-25"
+												cx="12"
+												cy="12"
+												r="10"
+												stroke="currentColor"
+												stroke-width="4"
+											></circle>
+											<path
+												class="opacity-75"
+												fill="currentColor"
+												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+											></path>
+										</svg>
+									{:else}
+										<svg
+											class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-secondary-500"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M9 5l7 7-7 7"
+											/>
+										</svg>
+									{/if}
+								</a>
+							{/each}
+						</div>
+						{#if thisWeekServices.length > 5}
+							<p class="mt-3 text-center text-xs text-theme-muted">
+								+{thisWeekServices.length - 5} more services
+							</p>
+						{/if}
+					{/if}
+				</div>
+			</div>
+
+			<!-- Projects Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-accent px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-accent-600 dark:text-accent-400">Projects</h2>
+						<a
+							href="/admin/projects"
+							class="text-sm text-accent-500 hover:text-accent-600 dark:hover:text-accent-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="px-3 py-3 sm:p-4">
+					<h3 class="mb-3 text-sm font-medium text-theme-secondary">This Week</h3>
+					{#if thisWeekProjects.length === 0}
+						<p class="text-sm text-theme-muted italic">No projects scheduled this week</p>
+					{:else}
+						<div class="space-y-2">
+							{#each thisWeekProjects.slice(0, 5) as project (project.id)}
+								<a
+									href="/admin/projects/{project.id}"
+									class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-accent-500/30 hover:shadow-md"
+								>
+									<!-- Calendar tile -->
+									<div
+										class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-card"
+									>
+										<span class="text-[10px] font-medium text-theme-muted uppercase"
+											>{getWeekday(project.date)}</span
+										>
+										<span class="text-base leading-none font-bold text-theme"
+											>{getDayNum(project.date)}</span
+										>
+									</div>
+									<!-- Info -->
+									<div class="min-w-0 flex-1 overflow-hidden">
+										<p class="truncate text-sm font-medium text-theme">
+											{getProjectDisplayName(project)}
+										</p>
+										<p class="truncate text-xs text-theme-muted">{project.name}</p>
+									</div>
+									<!-- Status badge -->
+									<span
+										class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium {project.status ===
+										'IN_PROGRESS'
+											? 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+											: 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400'}"
+									>
+										{project.status === 'IN_PROGRESS' ? 'Active' : 'Scheduled'}
+									</span>
+									<!-- Chevron or Spinner -->
+									{#if loadingId === project.id}
+										<svg
+											class="h-5 w-5 shrink-0 animate-spin text-accent-500"
+											style="fill: none"
+											viewBox="0 0 24 24"
+										>
+											<circle
+												class="opacity-25"
+												cx="12"
+												cy="12"
+												r="10"
+												stroke="currentColor"
+												stroke-width="4"
+											></circle>
+											<path
+												class="opacity-75"
+												fill="currentColor"
+												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+											></path>
+										</svg>
+									{:else}
+										<svg
+											class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-accent-500"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M9 5l7 7-7 7"
+											/>
+										</svg>
+									{/if}
+								</a>
+							{/each}
+						</div>
+						{#if thisWeekProjects.length > 5}
+							<p class="mt-3 text-center text-xs text-theme-muted">
+								+{thisWeekProjects.length - 5} more projects
+							</p>
+						{/if}
+					{/if}
+				</div>
+			</div>
+
+			<!-- Invoices Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-accent6 px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-accent6-600 dark:text-accent6-400">Invoices</h2>
+						<a
+							href="/admin/invoices"
+							class="text-sm text-accent6-500 hover:text-accent6-600 dark:hover:text-accent6-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="px-3 py-3 sm:p-4">
+					<h3 class="mb-3 text-sm font-medium text-theme-secondary">Awaiting Payment</h3>
+					{#if pendingInvoices.length === 0}
+						<p class="text-sm text-theme-muted italic">No outstanding invoices</p>
+					{:else}
+						<div class="space-y-2">
+							{#each pendingInvoices.slice(0, 5) as invoice (invoice.id)}
+								<a
+									href="/admin/invoices/{invoice.id}"
+									class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-accent6-500/30 hover:shadow-md"
+								>
+									<!-- Invoice icon -->
+									<div
+										class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-theme bg-theme-card"
+									>
+										<NavIcon name="invoices" class="h-5 w-5 text-accent6-500" />
+									</div>
+									<!-- Info -->
+									<div class="min-w-0 flex-1 overflow-hidden">
+										<p class="truncate text-sm font-medium text-theme">
+											{getCustomerName(invoice.customerId)}
+										</p>
+										<p class="truncate text-xs text-theme-muted">Due {invoice.date}</p>
+									</div>
+									<!-- Status badge -->
+									<span
+										class="shrink-0 rounded-full bg-accent6-100 px-2 py-0.5 text-[10px] font-medium text-accent6-700 dark:bg-accent6-900/30 dark:text-accent6-400"
+									>
+										Sent
+									</span>
+									<!-- Chevron or Spinner -->
+									{#if loadingId === invoice.id}
+										<svg
+											class="h-5 w-5 shrink-0 animate-spin text-accent6-500"
+											style="fill: none"
+											viewBox="0 0 24 24"
+										>
+											<circle
+												class="opacity-25"
+												cx="12"
+												cy="12"
+												r="10"
+												stroke="currentColor"
+												stroke-width="4"
+											></circle>
+											<path
+												class="opacity-75"
+												fill="currentColor"
+												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+											></path>
+										</svg>
+									{:else}
+										<svg
+											class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-accent6-500"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M9 5l7 7-7 7"
+											/>
+										</svg>
+									{/if}
+								</a>
+							{/each}
+						</div>
+						{#if pendingInvoices.length > 5}
+							<p class="mt-3 text-center text-xs text-theme-muted">
+								+{pendingInvoices.length - 5} more outstanding invoices
+							</p>
+						{/if}
+					{/if}
+				</div>
+			</div>
+
+			<!-- Calendar Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-accent7 px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-accent7-600 dark:text-accent7-400">Calendar</h2>
+						<a
+							href="/admin/calendar"
+							class="text-sm text-accent7-500 hover:text-accent7-600 dark:hover:text-accent7-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="px-3 py-3 sm:p-4">
+					<h3 class="mb-3 text-sm font-medium text-theme-secondary">Upcoming Events</h3>
+					{#if calendarLoading}
+						<div class="flex items-center justify-center py-8">
+							<svg
+								class="h-6 w-6 animate-spin text-accent7-500"
+								style="fill: none"
+								viewBox="0 0 24 24"
+							>
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								></circle>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+								></path>
+							</svg>
+						</div>
+					{:else if calendarError}
+						<div class="flex flex-col items-center justify-center py-8 text-center">
+							<div
+								class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-error-100 dark:bg-error-900/30"
+							>
+								<svg
+									class="h-6 w-6 text-error-500"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+									/>
+								</svg>
+							</div>
+							<p class="text-sm text-theme-muted">{calendarError}</p>
+							<a
+								href="/admin/calendar"
+								class="mt-3 text-sm font-medium text-accent7-500 hover:text-accent7-600 dark:hover:text-accent7-400"
+							>
+								Open Calendar
+							</a>
+						</div>
+					{:else if calendarEvents.length === 0}
+						<div class="flex flex-col items-center justify-center py-8 text-center">
+							<div
+								class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-accent7-100 dark:bg-accent7-900/30"
+							>
+								<NavIcon name="calendar" class="h-6 w-6 text-accent7-500" />
+							</div>
+							<p class="text-sm text-theme-muted">No upcoming events in the next 7 days</p>
+							<a
+								href="/admin/calendar"
+								class="mt-3 text-sm font-medium text-accent7-500 hover:text-accent7-600 dark:hover:text-accent7-400"
+							>
+								Open Calendar
+							</a>
+						</div>
+					{:else}
+						<div class="space-y-2">
+							{#each calendarEvents as event (event.id)}
+								{@const eventDT = getEventDateTime(event)}
+								<a
+									href="/admin/calendar"
+									class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-accent7-500/30 hover:shadow-md"
+								>
+									<!-- Calendar tile -->
+									<div
+										class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-card"
+									>
+										<span class="text-[10px] font-medium text-theme-muted uppercase"
+											>{getWeekday(eventDT.date)}</span
+										>
+										<span class="text-base leading-none font-bold text-theme"
+											>{getDayNum(eventDT.date)}</span
+										>
+									</div>
+									<!-- Info -->
+									<div class="min-w-0 flex-1 overflow-hidden">
+										<p class="truncate text-sm font-medium text-theme">
+											{event.summary}
+										</p>
+										<p class="truncate text-xs text-theme-muted">
+											{#if eventDT.time}
+												{eventDT.time}
+											{:else}
+												All day
+											{/if}
+											{#if event.location}
+												<span class="ml-1">· {event.location}</span>
+											{/if}
+										</p>
+									</div>
+									<!-- Chevron -->
+									<svg
+										class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-accent7-500"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								</a>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/accounts/+page.svelte b/src/routes/admin/accounts/+page.svelte
new file mode 100644
index 0000000..0034d63
--- /dev/null
+++ b/src/routes/admin/accounts/+page.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AccountForm from '$lib/components/admin/accounts/AccountForm.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll, goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			goto('/admin/accounts', { replaceState: true, noScroll: true });
+		}
+	});
+
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let customerLookup = $derived(data.customerLookup ?? {});
+	let searchQuery = $state('');
+
+	let filteredAccounts = $derived(
+		accounts.filter((a) => a.name.toLowerCase().includes(searchQuery.toLowerCase()))
+	);
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Account',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	function getCustomerName(customerId: string | null | undefined): string {
+		if (!customerId) return 'No customer';
+		const customer = customerLookup.get(customerId);
+		return customer?.customerName ?? 'Unknown';
+	}
+</script>
+
+{#snippet createFormContent()}
+	<AccountForm {customers} onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>Accounts - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-primary-600 md:text-3xl dark:text-primary-400">
+							Accounts
+						</h1>
+						<p class="mt-2 text-theme-secondary">Manage service accounts and locations.</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="hidden items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add Account</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Search -->
+		<div class="mb-6">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search accounts..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+
+		{#if filteredAccounts.length > 0}
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				{#each filteredAccounts as account (account.id)}
+					<a
+						href="/admin/accounts/{account.id}"
+						class="flex items-center justify-between card-account"
+					>
+						<div>
+							<h2 class="text-lg font-semibold text-theme">{account.name}</h2>
+							<p class="text-sm text-theme-secondary">
+								{getCustomerName(account.customerId)}
+							</p>
+							<div class="flex items-center gap-2">
+								{#if account.primaryAddress}
+									<p class="text-sm text-theme-muted">
+										{account.primaryAddress.city}, {account.primaryAddress.state}
+									</p>
+								{/if}
+								{#if account.revenues?.some((r) => r.waveServiceId)}
+									<span class="badge-primary">Linked</span>
+								{/if}
+							</div>
+						</div>
+						<svg
+							class="h-5 w-5 flex-shrink-0 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No accounts found</h2>
+				<p class="empty-state-text">
+					No accounts match "{searchQuery}". Try a different search term.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No accounts yet</h2>
+				<p class="empty-state-text">Get started by adding your first service account.</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add Account</span>
+				</button>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={showCreateForm}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+	aria-label="Add account"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
diff --git a/src/routes/admin/accounts/[account]/+page.server.ts b/src/routes/admin/accounts/[account]/+page.server.ts
new file mode 100644
index 0000000..64b063c
--- /dev/null
+++ b/src/routes/admin/accounts/[account]/+page.server.ts
@@ -0,0 +1,60 @@
+import { GetAccountStore } from '$houdini';
+import { GetScopeTemplatesStore } from '$lib/utils/scopes';
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { createWaveServerClient } from '$lib/graphql/wave/client';
+import { GetProductsDocument, type ProductEdge, type Product } from '$lib/graphql/wave/generated';
+import type { PageServerLoad } from './$types';
+
+export interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: number;
+	isArchived: boolean;
+}
+
+async function fetchWaveProducts(): Promise<WaveProduct[]> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.query(GetProductsDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		pageSize: 500,
+		isSold: true,
+		isArchived: false
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return [];
+	}
+
+	const edges = result.data?.business?.products?.edges ?? [];
+	return edges
+		.filter((edge: ProductEdge): edge is ProductEdge & { node: Product } => edge.node != null)
+		.map((edge: ProductEdge & { node: Product }) => ({
+			id: edge.node.id,
+			name: edge.node.name,
+			description: edge.node.description ?? null,
+			unitPrice: edge.node.unitPrice,
+			isArchived: edge.node.isArchived
+		}));
+}
+
+export const load: PageServerLoad = async (event) => {
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	const [account, scopeTemplates, waveProducts] = await Promise.all([
+		new GetAccountStore().fetch({
+			...fetchParams,
+			variables: { id: event.params.account }
+		}),
+		new GetScopeTemplatesStore().fetch(fetchParams),
+		fetchWaveProducts()
+	]);
+
+	return { account, scopeTemplates, waveProducts };
+};
diff --git a/src/routes/admin/accounts/[account]/+page.svelte b/src/routes/admin/accounts/[account]/+page.svelte
new file mode 100644
index 0000000..e4bb4e7
--- /dev/null
+++ b/src/routes/admin/accounts/[account]/+page.svelte
@@ -0,0 +1,833 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import SectionHeader from '$lib/components/admin/SectionHeader.svelte';
+	import AccountForm from '$lib/components/admin/accounts/AccountForm.svelte';
+	import AddressForm from '$lib/components/shared/AddressForm.svelte';
+	import ContactForm from '$lib/components/shared/ContactForm.svelte';
+	import RevenueForm from '$lib/components/admin/accounts/RevenueForm.svelte';
+	import LaborForm from '$lib/components/admin/accounts/LaborForm.svelte';
+	import ScheduleForm from '$lib/components/admin/accounts/ScheduleForm.svelte';
+	import ScopeForm from '$lib/components/admin/accounts/ScopeForm.svelte';
+	import AreaForm from '$lib/components/admin/accounts/AreaForm.svelte';
+	import TaskForm from '$lib/components/admin/accounts/TaskForm.svelte';
+	import RevenueSection from '$lib/components/admin/accounts/RevenueSection.svelte';
+	import AddressCard from '$lib/components/admin/accounts/AddressCard.svelte';
+	import ContactListItem from '$lib/components/admin/accounts/ContactListItem.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import GenerateServicesModal from '$lib/components/admin/services/GenerateServicesModal.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll, goto } from '$app/navigation';
+	import { SvelteSet } from 'svelte/reactivity';
+	import {
+		DeleteAccountStore,
+		DeleteAccountContactStore,
+		DeleteAccountAddressStore,
+		DeleteRevenueStore,
+		DeleteLaborStore,
+		DeleteScheduleStore
+	} from '$houdini';
+	import { formatDate } from '$lib/utils/date';
+	import { createScopeFromTemplate, deleteScope, deleteArea, deleteTask } from '$lib/utils/scopes';
+
+	let { data }: { data: PageData } = $props();
+
+	let account = $derived(data.account?.data?.account);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let customerLookup = $derived(data.customerLookup);
+	let addresses = $derived(account?.addresses ?? []);
+	let contacts = $derived(account?.contacts ?? []);
+	let revenues = $derived(account?.revenues ?? []);
+	let scopeTemplates = $derived(data.scopeTemplates?.data?.scopeTemplates ?? []);
+	let waveProducts = $derived(data.waveProducts ?? []);
+
+	// Delete modal state
+	let deleteModalOpen = $state(false);
+	let deleteContactId = $state<string | null>(null);
+	let deleteAddressId = $state<string | null>(null);
+	let deleteRevenueId = $state<string | null>(null);
+	let deleteLaborId = $state<string | null>(null);
+	let deleteScheduleId = $state<string | null>(null);
+	let deleteScopeId = $state<string | null>(null);
+	let deleteAreaId = $state<string | null>(null);
+	let deleteTaskId = $state<string | null>(null);
+	let deleting = $state(false);
+
+	// Edit state - store the item being edited so snippets can access it
+	let editingAddress = $state<(typeof addresses)[number] | null>(null);
+	let editingContact = $state<(typeof contacts)[number] | null>(null);
+	let editingRevenue = $state<(typeof revenues)[number] | null>(null);
+	let editingLabor = $state<{
+		addressId: string;
+		labor?: (typeof addresses)[number]['labors'][number];
+	} | null>(null);
+
+	// Schedule editing state
+	type ScheduleType = (typeof addresses)[number]['schedules'][number];
+	let editingSchedule = $state<{
+		addressId: string;
+		schedule?: ScheduleType;
+	} | null>(null);
+
+	// Scope editing state
+	type ScopeType = (typeof addresses)[number]['scopes'][number];
+	type AreaType = ScopeType['areas'][number];
+	type TaskType = AreaType['tasks'][number];
+
+	let editingScope = $state<{
+		addressId: string;
+		scope?: ScopeType;
+		existingScopes: ScopeType[];
+	} | null>(null);
+	let editingArea = $state<{ scopeId: string; area?: AreaType; nextOrder: number } | null>(null);
+	let editingTask = $state<{ areaId: string; task?: TaskType; nextOrder: number } | null>(null);
+
+	// Scope error state (keyed by addressId)
+	let scopeErrors = $state<Record<string, string>>({});
+
+	// Track which addresses are expanded
+	let expandedAddresses = new SvelteSet<string>();
+
+	// Track which addresses have expanded labor history
+	let expandedLaborHistoryAddresses = new SvelteSet<string>();
+
+	// Track which addresses have expanded schedule history
+	let expandedScheduleHistoryAddresses = new SvelteSet<string>();
+
+	// Track which scopes and areas are expanded
+	let expandedScopes = new SvelteSet<string>();
+	let expandedAreas = new SvelteSet<string>();
+
+	// Generate services modal state
+	let showGenerateModal = $state(false);
+	let generatePreselectedAddressId = $state<string | undefined>(undefined);
+	let generatePreselectedScheduleId = $state<string | undefined>(undefined);
+
+	function toggleAddressExpanded(addressId: string) {
+		if (expandedAddresses.has(addressId)) {
+			expandedAddresses.delete(addressId);
+		} else {
+			expandedAddresses.add(addressId);
+		}
+	}
+
+	const deleteAccountStore = new DeleteAccountStore();
+	const deleteContactStore = new DeleteAccountContactStore();
+	const deleteAddressStore = new DeleteAccountAddressStore();
+	const deleteRevenueStore = new DeleteRevenueStore();
+	const deleteLaborStore = new DeleteLaborStore();
+	const deleteScheduleStore = new DeleteScheduleStore();
+
+	async function handleRefresh() {
+		await invalidateAll();
+	}
+
+	function showEditForm() {
+		if (!account) return;
+		offCanvas.showRight({
+			title: 'Edit Account',
+			content: editFormContent
+		});
+	}
+
+	function showAddAddressForm() {
+		if (!account) return;
+		editingAddress = null;
+		offCanvas.showRight({
+			title: 'Add Address',
+			content: addressFormContent
+		});
+	}
+
+	function showEditAddressForm(address: (typeof addresses)[number]) {
+		if (!account) return;
+		editingAddress = address;
+		offCanvas.showRight({
+			title: 'Edit Address',
+			content: addressFormContent
+		});
+	}
+
+	function showAddContactForm() {
+		if (!account) return;
+		editingContact = null;
+		offCanvas.showRight({
+			title: 'Add Contact',
+			content: contactFormContent
+		});
+	}
+
+	function showEditContactForm(contact: (typeof contacts)[number]) {
+		if (!account) return;
+		editingContact = contact;
+		offCanvas.showRight({
+			title: 'Edit Contact',
+			content: contactFormContent
+		});
+	}
+
+	function showAddRevenueForm() {
+		if (!account) return;
+		editingRevenue = null;
+		offCanvas.showRight({
+			title: 'Add Revenue',
+			content: revenueFormContent
+		});
+	}
+
+	function showEditRevenueForm(revenue: (typeof revenues)[number]) {
+		if (!account) return;
+		editingRevenue = revenue;
+		offCanvas.showRight({
+			title: 'Edit Revenue',
+			content: revenueFormContent
+		});
+	}
+
+	async function handleDeleteRevenue() {
+		if (!deleteRevenueId) return;
+		const res = await deleteRevenueStore.mutate({ id: deleteRevenueId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteRevenueId = null;
+		await invalidateAll();
+	}
+
+	function showAddLaborForm(addressId: string) {
+		if (!account) return;
+		editingLabor = { addressId };
+		offCanvas.showRight({
+			title: 'Add Labor Rate',
+			content: laborFormContent
+		});
+	}
+
+	function showEditLaborForm(
+		addressId: string,
+		labor: (typeof addresses)[number]['labors'][number]
+	) {
+		if (!account) return;
+		editingLabor = { addressId, labor };
+		offCanvas.showRight({
+			title: 'Edit Labor Rate',
+			content: laborFormContent
+		});
+	}
+
+	async function handleDeleteLabor() {
+		if (!deleteLaborId) return;
+		const res = await deleteLaborStore.mutate({ id: deleteLaborId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteLaborId = null;
+		await invalidateAll();
+	}
+
+	function toggleLaborHistory(addressId: string) {
+		if (expandedLaborHistoryAddresses.has(addressId)) {
+			expandedLaborHistoryAddresses.delete(addressId);
+		} else {
+			expandedLaborHistoryAddresses.add(addressId);
+		}
+	}
+
+	// Schedule functions
+	function showAddScheduleForm(addressId: string) {
+		if (!account) return;
+		editingSchedule = { addressId };
+		offCanvas.showRight({
+			title: 'Add Schedule',
+			content: scheduleFormContent
+		});
+	}
+
+	function showEditScheduleForm(addressId: string, schedule: ScheduleType) {
+		if (!account) return;
+		editingSchedule = { addressId, schedule };
+		offCanvas.showRight({
+			title: 'Edit Schedule',
+			content: scheduleFormContent
+		});
+	}
+
+	async function handleDeleteSchedule() {
+		if (!deleteScheduleId) return;
+		const res = await deleteScheduleStore.mutate({ id: deleteScheduleId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteScheduleId = null;
+		await invalidateAll();
+	}
+
+	function toggleScheduleHistory(addressId: string) {
+		if (expandedScheduleHistoryAddresses.has(addressId)) {
+			expandedScheduleHistoryAddresses.delete(addressId);
+		} else {
+			expandedScheduleHistoryAddresses.add(addressId);
+		}
+	}
+
+	// Scope functions
+	function showAddScopeForm(addressId: string) {
+		if (!account) return;
+		const address = addresses.find((a) => a.id === addressId);
+		const existingScopes = address?.scopes ?? [];
+		editingScope = { addressId, existingScopes };
+		offCanvas.showRight({
+			title: 'Add Scope',
+			content: scopeFormContent
+		});
+	}
+
+	function showEditScopeForm(addressId: string, scope: ScopeType) {
+		if (!account) return;
+		const address = addresses.find((a) => a.id === addressId);
+		const existingScopes = address?.scopes ?? [];
+		editingScope = { addressId, scope, existingScopes };
+		offCanvas.showRight({
+			title: 'Edit Scope',
+			content: scopeFormContent
+		});
+	}
+
+	async function handleAddScopeFromTemplate(addressId: string, templateId: string) {
+		if (!account) return;
+		// Clear any previous error for this address
+		scopeErrors = { ...scopeErrors, [addressId]: '' };
+		try {
+			await createScopeFromTemplate({
+				templateId,
+				accountId: account.id,
+				accountAddressId: addressId,
+				isActive: true
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to create scope from template:', err);
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			if (errorMessage.includes('unique_active_scope_per_address')) {
+				scopeErrors = {
+					...scopeErrors,
+					[addressId]: 'This location already has an active scope. Deactivate the existing scope before adding a new one.'
+				};
+			} else {
+				scopeErrors = {
+					...scopeErrors,
+					[addressId]: 'Failed to create scope. Please try again.'
+				};
+			}
+		}
+	}
+
+	async function handleDeleteScope() {
+		if (!deleteScopeId) return;
+		try {
+			await deleteScope(deleteScopeId);
+			deleteScopeId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete scope:', err);
+			throw err;
+		}
+	}
+
+	function toggleScopeExpanded(scopeId: string) {
+		if (expandedScopes.has(scopeId)) {
+			expandedScopes.delete(scopeId);
+		} else {
+			expandedScopes.add(scopeId);
+		}
+	}
+
+	function toggleAreaExpanded(areaId: string) {
+		if (expandedAreas.has(areaId)) {
+			expandedAreas.delete(areaId);
+		} else {
+			expandedAreas.add(areaId);
+		}
+	}
+
+	// Area functions
+	function showAddAreaForm(scopeId: string, nextOrder: number) {
+		editingArea = { scopeId, nextOrder };
+		offCanvas.showRight({
+			title: 'Add Area',
+			content: areaFormContent
+		});
+	}
+
+	function showEditAreaForm(scopeId: string, area: AreaType) {
+		editingArea = { scopeId, area, nextOrder: area.order };
+		offCanvas.showRight({
+			title: 'Edit Area',
+			content: areaFormContent
+		});
+	}
+
+	async function handleDeleteArea() {
+		if (!deleteAreaId) return;
+		try {
+			await deleteArea(deleteAreaId);
+			deleteAreaId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete area:', err);
+			throw err;
+		}
+	}
+
+	// Task functions
+	function showAddTaskForm(areaId: string, nextOrder: number) {
+		editingTask = { areaId, nextOrder };
+		offCanvas.showRight({
+			title: 'Add Task',
+			content: taskFormContent
+		});
+	}
+
+	function showEditTaskForm(areaId: string, task: TaskType) {
+		editingTask = { areaId, task, nextOrder: task.order };
+		offCanvas.showRight({
+			title: 'Edit Task',
+			content: taskFormContent
+		});
+	}
+
+	async function handleDeleteTask() {
+		if (!deleteTaskId) return;
+		try {
+			await deleteTask(deleteTaskId);
+			deleteTaskId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete task:', err);
+			throw err;
+		}
+	}
+
+	async function handleDeleteAccount() {
+		if (!account) return;
+		deleting = true;
+		try {
+			const res = await deleteAccountStore.mutate({ id: account.id });
+			if (res.errors?.length) {
+				throw new Error(res.errors.map((e) => e.message).join(', '));
+			}
+			await goto('/admin/accounts');
+		} finally {
+			deleting = false;
+		}
+	}
+
+	async function handleDeleteContact() {
+		if (!deleteContactId) return;
+		const res = await deleteContactStore.mutate({ id: deleteContactId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteContactId = null;
+		await invalidateAll();
+	}
+
+	async function handleDeleteAddress() {
+		if (!deleteAddressId) return;
+		const res = await deleteAddressStore.mutate({ id: deleteAddressId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteAddressId = null;
+		await invalidateAll();
+	}
+
+	function getCustomerName(customerId: string | null | undefined): string {
+		if (!customerId || !customerLookup) return '—';
+		const customer = customerLookup.get(customerId);
+		return customer?.customerName ?? '—';
+	}
+
+	function openGenerateServicesModal(addressId: string, scheduleId: string) {
+		generatePreselectedAddressId = addressId;
+		generatePreselectedScheduleId = scheduleId;
+		showGenerateModal = true;
+	}
+
+	function closeGenerateServicesModal() {
+		showGenerateModal = false;
+		generatePreselectedAddressId = undefined;
+		generatePreselectedScheduleId = undefined;
+	}
+</script>
+
+{#snippet editFormContent()}
+	{#if account}
+		<AccountForm {account} {customers} onSuccess={handleRefresh} />
+	{/if}
+{/snippet}
+
+{#snippet addressFormContent()}
+	{#if account}
+		<AddressForm
+			entityType="account"
+			entityId={account.id}
+			address={editingAddress ?? undefined}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet contactFormContent()}
+	{#if account}
+		<ContactForm
+			entityType="account"
+			entityId={account.id}
+			contact={editingContact ?? undefined}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet revenueFormContent()}
+	{#if account}
+		<RevenueForm
+			accountId={account.id}
+			revenue={editingRevenue ?? undefined}
+			{waveProducts}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet laborFormContent()}
+	{#if editingLabor}
+		<LaborForm
+			accountAddressId={editingLabor.addressId}
+			labor={editingLabor.labor}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet scheduleFormContent()}
+	{#if editingSchedule}
+		<ScheduleForm
+			accountAddressId={editingSchedule.addressId}
+			schedule={editingSchedule.schedule}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet scopeFormContent()}
+	{#if editingScope && account}
+		<ScopeForm
+			accountId={account.id}
+			accountAddressId={editingScope.addressId}
+			scope={editingScope.scope}
+			existingScopes={editingScope.existingScopes}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet areaFormContent()}
+	{#if editingArea}
+		<AreaForm
+			scopeId={editingArea.scopeId}
+			area={editingArea.area}
+			nextOrder={editingArea.nextOrder}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet taskFormContent()}
+	{#if editingTask}
+		<TaskForm
+			areaId={editingTask.areaId}
+			task={editingTask.task}
+			nextOrder={editingTask.nextOrder}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>{account?.name ?? 'Account'} - Accounts - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		{#if account}
+			<AdminPageHeader
+				title={account.name}
+				subtitle="Account Details"
+				backHref="/admin/accounts"
+				invalidateOnBack
+			/>
+
+			<div class="space-y-8">
+				<!-- Account Info Card -->
+				<div class="card-padded">
+					<SectionHeader
+						title="Account Information"
+						buttonText="Edit"
+						buttonIcon="none"
+						onButtonClick={showEditForm}
+					/>
+
+					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div>
+							<p class="detail-label">Name</p>
+							<p class="text-theme">{account.name}</p>
+						</div>
+						<div>
+							<p class="detail-label">Status</p>
+							<span
+								class={account.status === 'ACTIVE'
+									? 'badge-success'
+									: account.status === 'PENDING'
+										? 'badge-warning'
+										: 'badge-neutral'}
+							>
+								{account.status}
+							</span>
+						</div>
+						<div>
+							<p class="detail-label">Customer</p>
+							<p class="text-theme">{getCustomerName(account.customerId)}</p>
+						</div>
+						<div>
+							<p class="detail-label">Start Date</p>
+							<p class="text-theme">{formatDate(account.startDate) || '—'}</p>
+						</div>
+						<div>
+							<p class="detail-label">End Date</p>
+							<p class="text-theme">{formatDate(account.endDate) || '—'}</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Revenue Section -->
+				<RevenueSection
+					{revenues}
+					{waveProducts}
+					onAdd={showAddRevenueForm}
+					onEdit={showEditRevenueForm}
+					onDelete={(id) => (deleteRevenueId = id)}
+				/>
+
+				<!-- Addresses Section -->
+				<div class="card-padded">
+					<SectionHeader title="Addresses" buttonText="Add" onButtonClick={showAddAddressForm} />
+
+					{#if addresses.length > 0}
+						<div class="space-y-4">
+							{#each addresses as address (address.id)}
+								<AddressCard
+									{address}
+									isExpanded={expandedAddresses.has(address.id)}
+									showLaborHistory={expandedLaborHistoryAddresses.has(address.id)}
+									showScheduleHistory={expandedScheduleHistoryAddresses.has(address.id)}
+									{expandedScopes}
+									{expandedAreas}
+									{scopeTemplates}
+									scopeError={scopeErrors[address.id] || ''}
+									onToggleExpanded={() => toggleAddressExpanded(address.id)}
+									onEdit={() => showEditAddressForm(address)}
+									onDelete={() => (deleteAddressId = address.id)}
+									onAddSchedule={() => showAddScheduleForm(address.id)}
+									onEditSchedule={(schedule) => showEditScheduleForm(address.id, schedule)}
+									onDeleteSchedule={(scheduleId) => (deleteScheduleId = scheduleId)}
+									onToggleScheduleHistory={() => toggleScheduleHistory(address.id)}
+									onAddLabor={() => showAddLaborForm(address.id)}
+									onEditLabor={(labor) => showEditLaborForm(address.id, labor)}
+									onDeleteLabor={(laborId) => (deleteLaborId = laborId)}
+									onToggleLaborHistory={() => toggleLaborHistory(address.id)}
+									onToggleScope={toggleScopeExpanded}
+									onToggleArea={toggleAreaExpanded}
+									onAddScope={() => showAddScopeForm(address.id)}
+									onAddScopeFromTemplate={(templateId) =>
+										handleAddScopeFromTemplate(address.id, templateId)}
+									onEditScope={(scope) => showEditScopeForm(address.id, scope)}
+									onDeleteScope={(scopeId) => (deleteScopeId = scopeId)}
+									onAddArea={(scopeId, nextOrder) => showAddAreaForm(scopeId, nextOrder)}
+									onEditArea={(scopeId, area) => showEditAreaForm(scopeId, area)}
+									onDeleteArea={(areaId) => (deleteAreaId = areaId)}
+									onAddTask={(areaId, nextOrder) => showAddTaskForm(areaId, nextOrder)}
+									onEditTask={(areaId, task) => showEditTaskForm(areaId, task)}
+									onDeleteTask={(taskId) => (deleteTaskId = taskId)}
+									onGenerateServices={openGenerateServicesModal}
+									onClearScopeError={() => (scopeErrors = { ...scopeErrors, [address.id]: '' })}
+								/>
+							{/each}
+						</div>
+					{:else}
+						<p class="text-center text-theme-muted">No addresses added yet.</p>
+					{/if}
+				</div>
+
+				<!-- Contacts Section -->
+				<div class="card-padded">
+					<SectionHeader title="Contacts" buttonText="Add" onButtonClick={showAddContactForm} />
+
+					{#if contacts.length > 0}
+						<div class="space-y-3">
+							{#each contacts as contact (contact.id)}
+								<ContactListItem
+									{contact}
+									onEdit={() => showEditContactForm(contact)}
+									onDelete={() => (deleteContactId = contact.id)}
+								/>
+							{/each}
+						</div>
+					{:else}
+						<p class="text-center text-theme-muted">No contacts added yet.</p>
+					{/if}
+				</div>
+
+				<!-- Danger Zone -->
+				<div class="danger-zone">
+					<h2 class="danger-zone-title">Danger Zone</h2>
+					<p class="danger-zone-text">
+						Deleting this account will remove all associated addresses, contacts, and schedules.
+						This action cannot be undone.
+					</p>
+					<button type="button" onclick={() => (deleteModalOpen = true)} class="btn-danger">
+						Delete Account
+					</button>
+				</div>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">Account not found</h2>
+				<p class="empty-state-text">
+					The account you're looking for doesn't exist or has been deleted.
+				</p>
+				<a href="/admin/accounts" class="mt-4 btn-primary">Back to Accounts</a>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Delete Account Modal -->
+<DeleteConfirmModal
+	bind:open={deleteModalOpen}
+	title="Delete Account"
+	message="Are you sure you want to delete this account? All addresses, contacts, and schedules will be removed. This action cannot be undone."
+	loading={deleting}
+	onconfirm={handleDeleteAccount}
+	oncancel={() => (deleteModalOpen = false)}
+/>
+
+<!-- Delete Contact Modal -->
+<DeleteConfirmModal
+	open={!!deleteContactId}
+	title="Delete Contact"
+	message="Are you sure you want to delete this contact?"
+	onconfirm={handleDeleteContact}
+	oncancel={() => (deleteContactId = null)}
+/>
+
+<!-- Delete Address Modal -->
+<DeleteConfirmModal
+	open={!!deleteAddressId}
+	title="Delete Address"
+	message="Are you sure you want to delete this address? All associated schedules will also be removed."
+	onconfirm={handleDeleteAddress}
+	oncancel={() => (deleteAddressId = null)}
+/>
+
+<!-- Delete Revenue Modal -->
+<DeleteConfirmModal
+	open={!!deleteRevenueId}
+	title="Delete Revenue"
+	message="Are you sure you want to delete this revenue record?"
+	onconfirm={handleDeleteRevenue}
+	oncancel={() => (deleteRevenueId = null)}
+/>
+
+<!-- Delete Labor Modal -->
+<DeleteConfirmModal
+	open={!!deleteLaborId}
+	title="Delete Labor Rate"
+	message="Are you sure you want to delete this labor rate record?"
+	onconfirm={handleDeleteLabor}
+	oncancel={() => (deleteLaborId = null)}
+/>
+
+<!-- Delete Schedule Modal -->
+<DeleteConfirmModal
+	open={!!deleteScheduleId}
+	title="Delete Schedule"
+	message="Are you sure you want to delete this schedule?"
+	onconfirm={handleDeleteSchedule}
+	oncancel={() => (deleteScheduleId = null)}
+/>
+
+<!-- Delete Scope Modal -->
+<DeleteConfirmModal
+	open={!!deleteScopeId}
+	title="Delete Scope"
+	message="Are you sure you want to delete this scope? If this scope has been used in service sessions, it will be deactivated instead to preserve historical data."
+	onconfirm={handleDeleteScope}
+	oncancel={() => (deleteScopeId = null)}
+/>
+
+<!-- Delete Area Modal -->
+<DeleteConfirmModal
+	open={!!deleteAreaId}
+	title="Delete Area"
+	message="Are you sure you want to delete this area? All associated tasks will also be removed."
+	onconfirm={handleDeleteArea}
+	oncancel={() => (deleteAreaId = null)}
+/>
+
+<!-- Delete Task Modal -->
+<DeleteConfirmModal
+	open={!!deleteTaskId}
+	title="Delete Task"
+	message="Are you sure you want to delete this task?"
+	onconfirm={handleDeleteTask}
+	oncancel={() => (deleteTaskId = null)}
+/>
+
+<!-- Generate Services Modal -->
+{#if account}
+	<GenerateServicesModal
+		bind:open={showGenerateModal}
+		accounts={[
+			{
+				id: account.id,
+				name: account.name,
+				addresses: addresses.map((addr) => ({
+					id: addr.id,
+					name: addr.name,
+					streetAddress: addr.streetAddress,
+					city: addr.city,
+					state: addr.state,
+					zipCode: addr.zipCode,
+					isActive: addr.isActive,
+					schedules: addr.schedules
+				}))
+			}
+		]}
+		preselectedAddressId={generatePreselectedAddressId}
+		preselectedScheduleId={generatePreselectedScheduleId}
+		onClose={closeGenerateServicesModal}
+		onSuccess={async () => {
+			await invalidateAll();
+		}}
+	/>
+{/if}
diff --git a/src/routes/admin/calendar/+page.server.ts b/src/routes/admin/calendar/+page.server.ts
new file mode 100644
index 0000000..d236200
--- /dev/null
+++ b/src/routes/admin/calendar/+page.server.ts
@@ -0,0 +1,47 @@
+import { calendarService } from '$lib/services/calendar';
+import type { PageServerLoad } from './$types';
+
+// Format date as YYYY-MM
+function formatMonth(date: Date): string {
+	const year = date.getFullYear();
+	const month = (date.getMonth() + 1).toString().padStart(2, '0');
+	return `${year}-${month}`;
+}
+
+export const load: PageServerLoad = async ({ parent, url }) => {
+	// Get team profiles from parent layout
+	const parentData = await parent();
+
+	// Read month from URL params, default to current month
+	const monthParam = url.searchParams.get('month');
+	const now = new Date();
+	let currentMonth: string;
+	let timeMin: Date;
+	let timeMax: Date;
+
+	if (monthParam && /^\d{4}-\d{2}$/.test(monthParam)) {
+		// Parse month param and calculate boundaries
+		currentMonth = monthParam;
+		const [year, month] = monthParam.split('-').map(Number);
+		timeMin = new Date(year, month - 1, 1);
+		timeMax = new Date(year, month, 0, 23, 59, 59, 999); // Last day of month
+	} else {
+		// Default: current month
+		currentMonth = formatMonth(now);
+		timeMin = new Date(now.getFullYear(), now.getMonth(), 1);
+		timeMax = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+	}
+
+	const eventsResult = await calendarService.listEvents({
+		timeMin: timeMin.toISOString(),
+		timeMax: timeMax.toISOString(),
+		maxResults: 100
+	});
+
+	return {
+		events: eventsResult.data ?? [],
+		eventsError: eventsResult.error ?? null,
+		teamProfiles: parentData.team?.data?.teamProfiles ?? [],
+		currentMonth
+	};
+};
diff --git a/src/routes/admin/calendar/+page.svelte b/src/routes/admin/calendar/+page.svelte
new file mode 100644
index 0000000..0388b36
--- /dev/null
+++ b/src/routes/admin/calendar/+page.svelte
@@ -0,0 +1,786 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import EventForm from '$lib/components/admin/calendar/EventForm.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import WeekView from '$lib/components/admin/calendar/WeekView.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { getEventColor, calendarService } from '$lib/services/calendar';
+	import {SvelteDate, SvelteSet} from 'svelte/reactivity';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let events = $derived(data.events);
+	let teamProfiles = $derived(data.teamProfiles);
+	let eventsError = $derived(data.eventsError);
+	let currentMonth = $derived(data.currentMonth);
+
+	// View mode
+	let viewMode = $state<'list' | 'week'>('list');
+
+	// Calculate week start (Monday) for current month - store as timestamp
+	let weekStartTimestamp = $derived.by(() => {
+		const [year, month] = currentMonth.split('-').map(Number);
+		const firstOfMonth = new Date(year, month - 1, 1);
+		// Get Monday of the week containing the first of the month
+		const dayOfWeek = firstOfMonth.getDay();
+		const diff = dayOfWeek === 0 ? -6 : 1 - dayOfWeek; // Adjust for Monday start
+		const monday = new SvelteDate(firstOfMonth);
+		monday.setDate(monday.getDate() + diff);
+		return monday.getTime();
+	});
+
+	// Convert to Date for WeekView prop
+	function getWeekStart(): Date {
+		return new Date(weekStartTimestamp);
+	}
+
+	// Bulk selection
+	let selectedEvents = new SvelteSet<string>();
+	let hasSelection = $derived(selectedEvents.size > 0);
+	let bulkDeleting = $state(false);
+
+	function toggleSelect(eventId: string) {
+		if (selectedEvents.has(eventId)) {
+			selectedEvents.delete(eventId);
+		} else {
+			selectedEvents.add(eventId);
+		}
+	}
+
+	function isSelected(eventId: string): boolean {
+		return selectedEvents.has(eventId);
+	}
+
+	function selectAll() {
+		filteredEvents.forEach((e) => selectedEvents.add(e.id));
+	}
+
+	function clearSelection() {
+		selectedEvents.clear();
+	}
+
+	async function bulkDelete() {
+		if (!confirm(`Delete ${selectedEvents.size} event${selectedEvents.size !== 1 ? 's' : ''}? This cannot be undone.`)) {
+			return;
+		}
+
+		bulkDeleting = true;
+		try {
+			for (const id of selectedEvents) {
+				await calendarService.deleteEvent(id);
+			}
+			selectedEvents.clear();
+			await invalidateAll();
+		} catch (err) {
+			console.error('Bulk delete failed:', err);
+		} finally {
+			bulkDeleting = false;
+		}
+	}
+
+	// Search
+	let searchQuery = $state('');
+
+	// Time filter
+	let timeFilter = $state<'all' | 'upcoming' | 'today' | 'past'>('all');
+
+	// Get event date for filtering
+	function getEventDate(event: (typeof events)[number]): Date {
+		if (event.start.dateTime) {
+			return new Date(event.start.dateTime);
+		}
+		if (event.start.date) {
+			return new Date(event.start.date + 'T00:00:00');
+		}
+		return new Date();
+	}
+
+	// Filter by search query
+	let searchFiltered = $derived.by(() => {
+		if (!searchQuery.trim()) return events;
+
+		const query = searchQuery.toLowerCase();
+		return events.filter(
+			(e) =>
+				e.summary.toLowerCase().includes(query) ||
+				e.description?.toLowerCase().includes(query) ||
+				e.location?.toLowerCase().includes(query) ||
+				e.attendees?.some(
+					(a) =>
+						a.email.toLowerCase().includes(query) || a.displayName?.toLowerCase().includes(query)
+				)
+		);
+	});
+
+	// Filter by time
+	let filteredEvents = $derived.by(() => {
+		if (timeFilter === 'all') return searchFiltered;
+
+		const now = new Date();
+		const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+		const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+
+		return searchFiltered.filter((e) => {
+			const eventDate = getEventDate(e);
+			if (timeFilter === 'today') {
+				return eventDate >= todayStart && eventDate <= todayEnd;
+			}
+			if (timeFilter === 'past') {
+				return eventDate < todayStart;
+			}
+			// upcoming
+			return eventDate >= now;
+		});
+	});
+
+	// Counts for time filter tabs
+	let timeCounts = $derived.by(() => {
+		const now = new Date();
+		const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+		const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+
+		let upcoming = 0;
+		let today = 0;
+		let past = 0;
+
+		for (const e of searchFiltered) {
+			const eventDate = getEventDate(e);
+			if (eventDate >= todayStart && eventDate <= todayEnd) {
+				today++;
+			} else if (eventDate < todayStart) {
+				past++;
+			} else if (eventDate >= now) {
+				upcoming++;
+			}
+		}
+
+		return { all: searchFiltered.length, upcoming, today, past };
+	});
+
+	// Time filter tab definitions
+	const timeFilterTabs = [
+		{ id: 'all' as const, label: 'All', color: 'accent7' },
+		{ id: 'upcoming' as const, label: 'Upcoming', color: 'primary' },
+		{ id: 'today' as const, label: 'Today', color: 'accent' },
+		{ id: 'past' as const, label: 'Past', color: 'secondary' }
+	];
+
+	// Get current tab index for compact navigation
+	let currentTabIndex = $derived(timeFilterTabs.findIndex((t) => t.id === timeFilter));
+	let currentTab = $derived(timeFilterTabs[currentTabIndex]);
+
+	function navigateTimeFilter(delta: number) {
+		const newIndex = (currentTabIndex + delta + timeFilterTabs.length) % timeFilterTabs.length;
+		timeFilter = timeFilterTabs[newIndex].id;
+	}
+
+	// Group events by date
+	let eventsByDate = $derived.by(() => {
+		const grouped: Record<string, typeof events> = {};
+
+		for (const event of filteredEvents) {
+			const dateKey = getEventDateKey(event);
+			if (!grouped[dateKey]) {
+				grouped[dateKey] = [];
+			}
+			grouped[dateKey].push(event);
+		}
+
+		// Sort dates and return as entries
+		return Object.entries(grouped).sort((a, b) => a[0].localeCompare(b[0]));
+	});
+
+	// Get the date key for grouping (YYYY-MM-DD)
+	function getEventDateKey(event: (typeof events)[number]): string {
+		if (event.start.date) {
+			return event.start.date;
+		}
+		if (event.start.dateTime) {
+			return event.start.dateTime.split('T')[0];
+		}
+		return 'Unknown';
+	}
+
+	// Format date for section headers
+	function formatDateHeader(dateStr: string): string {
+		if (dateStr === 'Unknown') return 'Unknown Date';
+
+		const date = new Date(dateStr + 'T00:00:00');
+		const now = Date.now();
+		const todayStart = now - (now % 86400000); // Start of today in ms
+
+		const dateTime = date.getTime();
+		if (dateTime >= todayStart && dateTime < todayStart + 86400000) {
+			return 'Today';
+		}
+		if (dateTime >= todayStart + 86400000 && dateTime < todayStart + 172800000) {
+			return 'Tomorrow';
+		}
+
+		return date.toLocaleDateString('en-US', {
+			weekday: 'long',
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	// Format time for event display
+	function formatEventTime(event: (typeof events)[number]): string {
+		if (event.start.date) {
+			return 'All day';
+		}
+		if (event.start.dateTime) {
+			const start = new Date(event.start.dateTime);
+			const end = event.end?.dateTime ? new Date(event.end.dateTime) : null;
+
+			const startStr = start.toLocaleTimeString('en-US', {
+				hour: 'numeric',
+				minute: '2-digit',
+				hour12: true
+			});
+
+			if (end) {
+				const endStr = end.toLocaleTimeString('en-US', {
+					hour: 'numeric',
+					minute: '2-digit',
+					hour12: true
+				});
+				return `${startStr} - ${endStr}`;
+			}
+
+			return startStr;
+		}
+		return '';
+	}
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Event',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	function handleEventClick(event: { id: string }) {
+		goto(`/admin/calendar/${event.id}`);
+	}
+</script>
+
+{#snippet createFormContent()}
+	<EventForm {teamProfiles} onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>Calendar - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent7-600 md:text-3xl dark:text-accent7-400">
+							Calendar
+						</h1>
+						<p class="mt-2 text-theme-secondary">View and manage scheduled events.</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="hidden items-center gap-2 rounded-lg bg-accent7-500 px-4 py-2 text-white transition-colors hover:bg-accent7-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Event</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Month Navigation and View Toggle -->
+		<div class="mb-6 flex flex-wrap items-center justify-center gap-4">
+			<MonthSelector value={currentMonth} />
+
+			<!-- View Toggle (hidden on mobile - week view doesn't work on small screens) -->
+			<div class="hidden gap-1 rounded-lg bg-black/5 p-1 sm:flex dark:bg-white/5">
+				<button
+					type="button"
+					onclick={() => (viewMode = 'list')}
+					class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+						{viewMode === 'list'
+						? 'bg-accent7-500/15 text-accent7-600 dark:text-accent7-400'
+						: 'text-theme-secondary hover:bg-black/5 dark:hover:bg-white/5'}"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+					</svg>
+					List
+				</button>
+				<button
+					type="button"
+					onclick={() => (viewMode = 'week')}
+					class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+						{viewMode === 'week'
+						? 'bg-accent7-500/15 text-accent7-600 dark:text-accent7-400'
+						: 'text-theme-secondary hover:bg-black/5 dark:hover:bg-white/5'}"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+					</svg>
+					Week
+				</button>
+			</div>
+		</div>
+
+		<!-- Error State -->
+		{#if eventsError}
+			<div class="mb-6 rounded-lg border border-error-500/30 bg-error-500/10 p-4">
+				<div class="flex items-center gap-3">
+					<svg
+						class="h-5 w-5 shrink-0 text-error-600 dark:text-error-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+					<div>
+						<p class="font-medium text-error-600 dark:text-error-400">
+							Failed to load calendar events
+						</p>
+						<p class="text-sm text-error-600/80 dark:text-error-400/80">
+							{eventsError.message}
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Search and Filters -->
+		<div class="mb-6 space-y-4">
+			<!-- Search -->
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search events..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-accent7-500 focus:ring-1 focus:ring-accent7-500"
+				/>
+			</div>
+
+			<!-- Time Filter Tabs - Compact on mobile -->
+			<div class="flex items-center justify-center gap-1 rounded-lg bg-black/5 p-1 sm:hidden dark:bg-white/5" role="tablist">
+				<button
+					type="button"
+					onclick={() => navigateTimeFilter(-1)}
+					class="interactive rounded-md p-2 text-theme-secondary"
+					aria-label="Previous filter"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+					</svg>
+				</button>
+				<div
+					class="flex-1 rounded-md px-4 py-2 text-center text-sm font-medium
+						{currentTab.color === 'accent7'
+						? 'bg-accent7-500/15 text-accent7-600 dark:text-accent7-400'
+						: currentTab.color === 'primary'
+							? 'bg-primary-500/15 text-primary-600 dark:text-primary-400'
+							: currentTab.color === 'accent'
+								? 'bg-accent-500/15 text-accent-600 dark:text-accent-400'
+								: 'bg-secondary-500/15 text-secondary-600 dark:text-secondary-400'}"
+					role="tab"
+					aria-selected="true"
+				>
+					{currentTab.label}
+					<span
+						class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs
+							{currentTab.color === 'accent7'
+							? 'bg-accent7-500/20'
+							: currentTab.color === 'primary'
+								? 'bg-primary-500/20'
+								: currentTab.color === 'accent'
+									? 'bg-accent-500/20'
+									: 'bg-secondary-500/20'}"
+					>
+						{timeCounts[currentTab.id]}
+					</span>
+				</div>
+				<button
+					type="button"
+					onclick={() => navigateTimeFilter(1)}
+					class="interactive rounded-md p-2 text-theme-secondary"
+					aria-label="Next filter"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- Time Filter Tabs - Full on desktop -->
+			<div class="hidden gap-1 rounded-lg bg-black/5 p-1 sm:flex dark:bg-white/5" role="tablist">
+				{#each timeFilterTabs as tab (tab.id)}
+					{@const isActive = timeFilter === tab.id}
+					{@const count = timeCounts[tab.id]}
+					<button
+						type="button"
+						onclick={() => (timeFilter = tab.id)}
+						class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors
+							{isActive
+							? tab.color === 'accent7'
+								? 'bg-accent7-500/15 text-accent7-600 dark:text-accent7-400'
+								: tab.color === 'primary'
+									? 'bg-primary-500/15 text-primary-600 dark:text-primary-400'
+									: tab.color === 'accent'
+										? 'bg-accent-500/15 text-accent-600 dark:text-accent-400'
+										: 'bg-secondary-500/15 text-secondary-600 dark:text-secondary-400'
+							: 'text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/5'}"
+						role="tab"
+						aria-selected={isActive}
+					>
+						{tab.label}
+						<span
+							class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs
+								{isActive
+								? tab.color === 'accent7'
+									? 'bg-accent7-500/20'
+									: tab.color === 'primary'
+										? 'bg-primary-500/20'
+										: tab.color === 'accent'
+											? 'bg-accent-500/20'
+											: 'bg-secondary-500/20'
+								: 'bg-black/5 dark:bg-white/5'}"
+						>
+							{count}
+						</span>
+					</button>
+				{/each}
+			</div>
+
+			<!-- Bulk Selection Bar -->
+			{#if hasSelection}
+				<div class="flex flex-col gap-3 rounded-lg bg-accent7-500/10 p-3 sm:flex-row sm:items-center sm:justify-between">
+					<div class="flex flex-wrap items-center justify-center gap-3 sm:justify-start">
+						<span class="text-sm font-medium text-accent7-600 dark:text-accent7-400">
+							{selectedEvents.size} event{selectedEvents.size !== 1 ? 's' : ''} selected
+						</span>
+						<button
+							type="button"
+							onclick={selectAll}
+							class="text-sm text-accent7-600 underline hover:no-underline dark:text-accent7-400"
+						>
+							Select all
+						</button>
+						<button
+							type="button"
+							onclick={clearSelection}
+							class="text-sm text-theme-secondary underline hover:no-underline"
+						>
+							Clear
+						</button>
+					</div>
+					<button
+						type="button"
+						onclick={bulkDelete}
+						disabled={bulkDeleting}
+						class="flex w-full items-center justify-center gap-2 rounded-lg bg-error-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-error-600 disabled:opacity-50 sm:w-auto"
+					>
+						{#if bulkDeleting}
+							<svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" style="fill: none" stroke="currentColor">
+								<circle cx="12" cy="12" r="10" stroke-width="4" class="opacity-25"></circle>
+								<path stroke-width="4" d="M4 12a8 8 0 018-8" class="opacity-75"></path>
+							</svg>
+							Deleting...
+						{:else}
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+							</svg>
+							Delete
+						{/if}
+					</button>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Week View -->
+		{#if viewMode === 'week'}
+			<WeekView events={filteredEvents} weekStart={getWeekStart()} onEventClick={handleEventClick} />
+		{:else}
+			<!-- List View -->
+			{#if eventsByDate.length > 0}
+				<div class="space-y-8">
+					{#each eventsByDate as [dateKey, dateEvents] (dateKey)}
+					<div>
+						<!-- Date Header -->
+						<div class="mb-4 flex items-center gap-3">
+							<div class="h-px flex-1 bg-accent7-500/20"></div>
+							<h2 class="text-sm font-semibold text-accent7-600 dark:text-accent7-400">
+								{formatDateHeader(dateKey)}
+							</h2>
+							<div class="h-px flex-1 bg-accent7-500/20"></div>
+						</div>
+
+						<!-- Events for this date -->
+						<div class="space-y-3">
+							{#each dateEvents as event (event.id)}
+								{@const eventColor = getEventColor(event.colorId)}
+								{@const selected = isSelected(event.id)}
+								<div class="flex items-start gap-3">
+									<!-- Checkbox -->
+									<button
+										type="button"
+										onclick={() => toggleSelect(event.id)}
+										class="mt-4 flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors
+											{selected
+											? 'border-accent7-500 bg-accent7-500 text-white'
+											: 'border-theme bg-theme hover:border-accent7-400'}"
+										aria-label={selected ? 'Deselect event' : 'Select event'}
+									>
+										{#if selected}
+											<svg class="h-3.5 w-3.5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+											</svg>
+										{/if}
+									</button>
+									<a href="/admin/calendar/{event.id}" class="block flex-1">
+										<div class="card-calendar">
+											<div class="flex items-start justify-between gap-4">
+												<div class="min-w-0 flex-1 space-y-2">
+													<!-- Event Title -->
+													<div class="flex flex-wrap items-center gap-3">
+														{#if eventColor}
+															<span
+																class="h-3 w-3 shrink-0 rounded-full {eventColor.bg}"
+																title={eventColor.name}
+															></span>
+														{/if}
+														<h3 class="text-lg font-semibold text-accent7-600 dark:text-accent7-400">
+															{event.summary}
+														</h3>
+													{#if event.start.date}
+														<span
+															class="inline-flex items-center rounded-full bg-accent7-500/10 px-2.5 py-0.5 text-xs font-medium text-accent7-600 dark:text-accent7-400"
+														>
+															All Day
+														</span>
+													{/if}
+												</div>
+
+												<!-- Event Details -->
+												<div class="flex flex-wrap items-center gap-4 text-sm text-theme-secondary">
+													<!-- Time -->
+													<span class="flex items-center gap-1.5">
+														<svg
+															class="h-4 w-4"
+															style="fill: none"
+															stroke="currentColor"
+															viewBox="0 0 24 24"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+															/>
+														</svg>
+														{formatEventTime(event)}
+													</span>
+
+													<!-- Location -->
+													{#if event.location}
+														<span class="flex items-center gap-1.5">
+															<svg
+																class="h-4 w-4"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+																/>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+																/>
+															</svg>
+															{event.location}
+														</span>
+													{/if}
+
+													<!-- Attendees count (hidden on mobile) -->
+													{#if event.attendees && event.attendees.length > 0}
+														<span class="hidden items-center gap-1.5 sm:flex">
+															<svg
+																class="h-4 w-4"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+																/>
+															</svg>
+															{event.attendees.length} attendee{event.attendees.length !== 1
+																? 's'
+																: ''}
+														</span>
+													{/if}
+												</div>
+
+												<!-- Description preview (hidden on mobile) -->
+												{#if event.description}
+													<p class="hidden line-clamp-2 text-sm text-theme-muted sm:block">
+														{event.description}
+													</p>
+												{/if}
+											</div>
+
+											<!-- Chevron -->
+											<svg
+												class="mt-1 h-5 w-5 shrink-0 text-theme-muted"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 5l7 7-7 7"
+												/>
+											</svg>
+										</div>
+									</div>
+								</a>
+							</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent7-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Events Found</h2>
+				<p class="empty-state-text">
+					No events match "{searchQuery}". Try a different search term.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent7-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Upcoming Events</h2>
+				<p class="empty-state-text">
+					Get started by creating your first calendar event. Schedule meetings, reminders, and more.
+				</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent7-500 px-4 py-2 text-white transition-colors hover:bg-accent7-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Event</span>
+				</button>
+			</div>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={showCreateForm}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-accent7-500 text-white shadow-lg transition-colors hover:bg-accent7-600 sm:hidden"
+	aria-label="Create Event"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
diff --git a/src/routes/admin/calendar/[event]/+page.server.ts b/src/routes/admin/calendar/[event]/+page.server.ts
new file mode 100644
index 0000000..8d2ccc3
--- /dev/null
+++ b/src/routes/admin/calendar/[event]/+page.server.ts
@@ -0,0 +1,27 @@
+import { calendarService } from '$lib/services/calendar';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, parent }) => {
+	const parentData = await parent();
+	const eventId = params.event;
+
+	const eventResult = await calendarService.getEvent(eventId);
+
+	if (eventResult.error) {
+		throw error(404, {
+			message: eventResult.error.message || 'Event not found'
+		});
+	}
+
+	if (!eventResult.data) {
+		throw error(404, {
+			message: 'Event not found'
+		});
+	}
+
+	return {
+		event: eventResult.data,
+		teamProfiles: parentData.team?.data?.teamProfiles ?? []
+	};
+};
diff --git a/src/routes/admin/calendar/[event]/+page.svelte b/src/routes/admin/calendar/[event]/+page.svelte
new file mode 100644
index 0000000..ac81d0c
--- /dev/null
+++ b/src/routes/admin/calendar/[event]/+page.svelte
@@ -0,0 +1,470 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import EventForm from '$lib/components/admin/calendar/EventForm.svelte';
+	import { calendarService } from '$lib/services/calendar';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let event = $derived(data.event);
+	let teamProfiles = $derived(data.teamProfiles);
+
+	let showDeleteModal = $state(false);
+	let isDeleting = $state(false);
+
+	// Format date for display
+	function formatDateTime(eventDateTime: { dateTime?: string; date?: string } | undefined): string {
+		if (!eventDateTime) return '—';
+
+		if (eventDateTime.dateTime) {
+			const dt = new Date(eventDateTime.dateTime);
+			return dt.toLocaleString('en-US', {
+				weekday: 'long',
+				month: 'long',
+				day: 'numeric',
+				year: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit',
+				hour12: true
+			});
+		}
+
+		if (eventDateTime.date) {
+			const dt = new Date(eventDateTime.date + 'T00:00:00');
+			return dt.toLocaleDateString('en-US', {
+				weekday: 'long',
+				month: 'long',
+				day: 'numeric',
+				year: 'numeric'
+			});
+		}
+
+		return '—';
+	}
+
+	// Format reminder time
+	function formatReminderTime(minutes: number): string {
+		if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
+		if (minutes < 1440) {
+			const hours = Math.floor(minutes / 60);
+			return `${hours} hour${hours !== 1 ? 's' : ''}`;
+		}
+		if (minutes < 10080) {
+			const days = Math.floor(minutes / 1440);
+			return `${days} day${days !== 1 ? 's' : ''}`;
+		}
+		const weeks = Math.floor(minutes / 10080);
+		return `${weeks} week${weeks !== 1 ? 's' : ''}`;
+	}
+
+	// Get event duration
+	let eventDuration = $derived.by(() => {
+		if (event.start.date) {
+			// All-day event
+			const start = new Date(event.start.date);
+			const end = event.end?.date ? new Date(event.end.date) : start;
+			const days = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+			return days <= 1 ? 'All day' : `${days} days`;
+		}
+
+		if (event.start.dateTime && event.end?.dateTime) {
+			const start = new Date(event.start.dateTime);
+			const end = new Date(event.end.dateTime);
+			const diffMs = end.getTime() - start.getTime();
+			const diffMins = Math.round(diffMs / (1000 * 60));
+
+			if (diffMins < 60) {
+				return `${diffMins} minute${diffMins !== 1 ? 's' : ''}`;
+			}
+
+			const hours = Math.floor(diffMins / 60);
+			const mins = diffMins % 60;
+			if (mins === 0) {
+				return `${hours} hour${hours !== 1 ? 's' : ''}`;
+			}
+			return `${hours}h ${mins}m`;
+		}
+
+		return '';
+	});
+
+	function showEditForm() {
+		offCanvas.showRight({
+			title: 'Edit Event',
+			content: editFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	async function handleDelete() {
+		isDeleting = true;
+		try {
+			const result = await calendarService.deleteEvent(event.id);
+			if (result.error) {
+				console.error('Failed to delete event:', result.error);
+				alert('Failed to delete event: ' + result.error.message);
+				return;
+			}
+			await goto('/admin/calendar', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to delete event:', err);
+			alert('Failed to delete event. Please try again.');
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+		}
+	}
+</script>
+
+{#snippet editFormContent()}
+	<EventForm {teamProfiles} {event} onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>{event.summary} - Calendar - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={event.summary}
+			subtitle={formatDateTime(event.start)}
+			colorScheme="accent7"
+			backHref="/admin/calendar"
+			onEdit={showEditForm}
+		/>
+
+		<!-- Event Details Card -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Event Details</h3>
+
+			<div class="space-y-4">
+				<!-- Start Time -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent7-500/20">
+							<svg
+								class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="text-sm text-theme-muted">Start</p>
+							<p class="font-medium text-theme">{formatDateTime(event.start)}</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- End Time -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent7-500/20">
+							<svg
+								class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="text-sm text-theme-muted">End</p>
+							<p class="font-medium text-theme">{formatDateTime(event.end)}</p>
+						</div>
+					</div>
+					{#if eventDuration}
+						<span
+							class="rounded-full bg-accent7-500/10 px-3 py-1 text-sm font-medium text-accent7-600 dark:text-accent7-400"
+						>
+							{eventDuration}
+						</span>
+					{/if}
+				</div>
+
+				<!-- Location -->
+				{#if event.location}
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20"
+							>
+								<svg
+									class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Location</p>
+								<p class="font-medium text-theme">{event.location}</p>
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Google Calendar Link -->
+				{#if event.htmlLink}
+					<div class="flex items-center justify-between py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/20">
+								<svg
+									class="h-5 w-5 text-primary-600 dark:text-primary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">View in Google Calendar</p>
+								<a
+									href={event.htmlLink}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="font-medium text-primary-500 hover:text-primary-600"
+								>
+									Open in new tab
+								</a>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Description -->
+		{#if event.description}
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Description</h3>
+				<p class="whitespace-pre-wrap text-theme">{event.description}</p>
+			</div>
+		{/if}
+
+		<!-- Attendees -->
+		{#if event.attendees && event.attendees.length > 0}
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">
+					Attendees ({event.attendees.length})
+				</h3>
+				<div class="space-y-3">
+					{#each event.attendees as attendee (attendee.email)}
+						<div
+							class="flex items-center gap-3 rounded-lg border border-theme bg-theme-secondary p-3"
+						>
+							<div
+								class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent7-500/20"
+							>
+								<svg
+									class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+									/>
+								</svg>
+							</div>
+							<div class="min-w-0 flex-1">
+								{#if attendee.displayName}
+									<p class="truncate font-medium text-theme">{attendee.displayName}</p>
+									<p class="truncate text-sm text-theme-muted">{attendee.email}</p>
+								{:else}
+									<p class="truncate font-medium text-theme">{attendee.email}</p>
+								{/if}
+							</div>
+							{#if attendee.optional}
+								<span
+									class="flex-shrink-0 rounded-full bg-gray-500/10 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400"
+								>
+									Optional
+								</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Reminders -->
+		{#if event.reminders}
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Reminders</h3>
+				{#if event.reminders.useDefault}
+					<div
+						class="flex items-center gap-3 rounded-lg border border-theme bg-theme-secondary p-3"
+					>
+						<div
+							class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent7-500/20"
+						>
+							<svg
+								class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Default reminders</p>
+							<p class="text-sm text-theme-muted">Using calendar's default reminder settings</p>
+						</div>
+					</div>
+				{:else if event.reminders.overrides && event.reminders.overrides.length > 0}
+					<div class="space-y-3">
+						{#each event.reminders.overrides as reminder, index (index)}
+							{@const methodLabel = reminder.method === 'email' ? 'Email' : 'Popup'}
+							{@const timeLabel = formatReminderTime(reminder.minutes)}
+							<div
+								class="flex items-center gap-3 rounded-lg border border-theme bg-theme-secondary p-3"
+							>
+								<div
+									class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent7-500/20"
+								>
+									{#if reminder.method === 'email'}
+										<svg
+											class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+											/>
+										</svg>
+									{:else}
+										<svg
+											class="h-5 w-5 text-accent7-600 dark:text-accent7-400"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+											/>
+										</svg>
+									{/if}
+								</div>
+								<div>
+									<p class="font-medium text-theme">{methodLabel} notification</p>
+									<p class="text-sm text-theme-muted">{timeLabel} before event</p>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<p class="text-sm text-theme-muted italic">No reminders configured for this event.</p>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Metadata -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Metadata</h3>
+			<div class="space-y-2 text-sm">
+				<div class="flex items-center justify-between">
+					<span class="text-theme-muted">Event ID</span>
+					<span class="font-mono text-theme-secondary">{event.id}</span>
+				</div>
+				{#if event.created}
+					<div class="flex items-center justify-between">
+						<span class="text-theme-muted">Created</span>
+						<span class="text-theme-secondary">
+							{new Date(event.created).toLocaleString()}
+						</span>
+					</div>
+				{/if}
+				{#if event.updated}
+					<div class="flex items-center justify-between">
+						<span class="text-theme-muted">Last Updated</span>
+						<span class="text-theme-secondary">
+							{new Date(event.updated).toLocaleString()}
+						</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Danger Zone -->
+		<div
+			class="rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-900/20"
+		>
+			<h2 class="mb-2 text-lg font-semibold text-red-700 dark:text-red-400">Danger Zone</h2>
+			<p class="mb-4 text-sm text-red-600 dark:text-red-300">
+				Deleting this event will remove it from Google Calendar. This action cannot be undone.
+			</p>
+			<button
+				onclick={() => (showDeleteModal = true)}
+				class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
+			>
+				Delete Event
+			</button>
+		</div>
+	</ContentContainer>
+</div>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete Event"
+	message="Are you sure you want to delete '{event.summary}'? This will remove it from Google Calendar and cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
diff --git a/src/routes/admin/customers/+page.svelte b/src/routes/admin/customers/+page.svelte
new file mode 100644
index 0000000..68ccc78
--- /dev/null
+++ b/src/routes/admin/customers/+page.svelte
@@ -0,0 +1,215 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerForm from '$lib/components/admin/customers/CustomerForm.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll, goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			goto('/admin/customers', { replaceState: true, noScroll: true });
+		}
+	});
+
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let searchQuery = $state('');
+
+	let filteredCustomers = $derived(
+		customers.filter((c) => c.name.toLowerCase().includes(searchQuery.toLowerCase()))
+	);
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Customer',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+</script>
+
+{#snippet createFormContent()}
+	<CustomerForm onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>Customers - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent3-600 md:text-3xl dark:text-accent3-400">
+							Customers
+						</h1>
+						<p class="mt-2 text-theme-secondary">
+							Manage customer profiles, contacts, and billing information.
+						</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="hidden items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add Customer</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Search -->
+		<div class="mb-6">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search customers..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+
+		{#if filteredCustomers.length > 0}
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				{#each filteredCustomers as customer (customer.id)}
+					<a
+						href="/admin/customers/{customer.id}"
+						class="flex items-center justify-between card-customer"
+					>
+						<div>
+							<h2 class="text-lg font-semibold text-theme">{customer.name}</h2>
+							<div class="flex items-center gap-2">
+								{#if customer.accounts && customer.accounts.length > 0}
+									<p class="text-sm text-theme-secondary">
+										{customer.accounts.length} account{customer.accounts.length === 1 ? '' : 's'}
+									</p>
+								{:else}
+									<p class="text-sm text-theme-muted">No accounts</p>
+								{/if}
+								{#if customer.waveCustomerId}
+									<span class="badge-primary">Linked</span>
+								{/if}
+							</div>
+						</div>
+						<svg
+							class="h-5 w-5 flex-shrink-0 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No customers found</h2>
+				<p class="empty-state-text">
+					No customers match "{searchQuery}". Try a different search term.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No customers yet</h2>
+				<p class="empty-state-text">
+					Get started by adding your first customer. Customers can be linked to service accounts.
+				</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add Customer</span>
+				</button>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={showCreateForm}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+	aria-label="Add customer"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
diff --git a/src/routes/admin/customers/[customer]/+page.server.ts b/src/routes/admin/customers/[customer]/+page.server.ts
new file mode 100644
index 0000000..dbc6ec9
--- /dev/null
+++ b/src/routes/admin/customers/[customer]/+page.server.ts
@@ -0,0 +1,69 @@
+import { GetCustomerStore } from '$houdini';
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { createWaveServerClient } from '$lib/graphql/wave/client';
+import {
+	GetCustomersDocument,
+	type CustomerEdge,
+	type Customer
+} from '$lib/graphql/wave/generated';
+import type { PageServerLoad } from './$types';
+
+export interface WaveCustomer {
+	id: string;
+	name: string;
+	email: string | null;
+	address: {
+		city: string | null;
+		province: { code: string } | null;
+	} | null;
+	isArchived: boolean;
+}
+
+async function fetchWaveCustomers(): Promise<WaveCustomer[]> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.query(GetCustomersDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		pageSize: 500
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return [];
+	}
+
+	const edges = result.data?.business?.customers?.edges ?? [];
+	return edges
+		.filter((edge: CustomerEdge): edge is CustomerEdge & { node: Customer } => edge.node != null)
+		.map((edge: CustomerEdge & { node: Customer }) => ({
+			id: edge.node.id,
+			name: edge.node.name,
+			email: edge.node.email ?? null,
+			address: edge.node.address
+				? {
+						city: edge.node.address.city ?? null,
+						province: edge.node.address.province ? { code: edge.node.address.province.code } : null
+					}
+				: null,
+			isArchived: edge.node.isArchived
+		}));
+}
+
+export const load: PageServerLoad = async (event) => {
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	// Fetch customer and Wave customers in parallel
+	const [customer, waveCustomers] = await Promise.all([
+		new GetCustomerStore().fetch({
+			...fetchParams,
+			variables: { id: event.params.customer }
+		}),
+		fetchWaveCustomers()
+	]);
+
+	return { customer, waveCustomers };
+};
diff --git a/src/routes/admin/customers/[customer]/+page.svelte b/src/routes/admin/customers/[customer]/+page.svelte
new file mode 100644
index 0000000..8356620
--- /dev/null
+++ b/src/routes/admin/customers/[customer]/+page.svelte
@@ -0,0 +1,441 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import SectionHeader from '$lib/components/admin/SectionHeader.svelte';
+	import { IconEdit, IconTrash } from '$lib/components/icons';
+	import CustomerForm from '$lib/components/admin/customers/CustomerForm.svelte';
+	import ContactForm from '$lib/components/shared/ContactForm.svelte';
+	import AddressForm from '$lib/components/shared/AddressForm.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import WaveCustomerLinkForm from '$lib/components/admin/customers/WaveCustomerLinkForm.svelte';
+	import WaveIntegrationSection from '$lib/components/admin/customers/WaveIntegrationSection.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll, goto } from '$app/navigation';
+	import { formatDate } from '$lib/utils/date';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import {
+		DeleteCustomerStore,
+		DeleteCustomerContactStore,
+		DeleteCustomerAddressStore
+	} from '$houdini';
+
+	let { data }: { data: PageData } = $props();
+
+	let customer = $derived(data.customer?.data?.customer);
+	let contacts = $derived(customer?.contacts ?? []);
+	let addresses = $derived(customer?.addresses ?? []);
+	let accounts = $derived(customer?.accounts ?? []);
+	let waveCustomers = $derived(data.waveCustomers ?? []);
+
+	// Find the linked Wave customer by matching decoded IDs
+	let linkedWaveCustomer = $derived.by(() => {
+		if (!customer?.waveCustomerId) return null;
+		return waveCustomers.find((wc) => fromGlobalId(wc.id) === customer.waveCustomerId) ?? null;
+	});
+
+	// Delete modal state
+	let deleteModalOpen = $state(false);
+	let deleteContactId = $state<string | null>(null);
+	let deleteAddressId = $state<string | null>(null);
+	let deleting = $state(false);
+
+	// Edit state - store the item being edited so snippets can access it
+	let editingContact = $state<(typeof contacts)[number] | null>(null);
+	let editingAddress = $state<(typeof addresses)[number] | null>(null);
+
+	const deleteCustomerStore = new DeleteCustomerStore();
+	const deleteContactStore = new DeleteCustomerContactStore();
+	const deleteAddressStore = new DeleteCustomerAddressStore();
+
+	async function handleRefresh() {
+		await invalidateAll();
+	}
+
+	function showEditForm() {
+		if (!customer) return;
+		offCanvas.showRight({
+			title: 'Edit Customer',
+			content: editFormContent
+		});
+	}
+
+	function showAddContactForm() {
+		if (!customer) return;
+		editingContact = null;
+		offCanvas.showRight({
+			title: 'Add Contact',
+			content: contactFormContent
+		});
+	}
+
+	function showEditContactForm(contact: (typeof contacts)[number]) {
+		if (!customer) return;
+		editingContact = contact;
+		offCanvas.showRight({
+			title: 'Edit Contact',
+			content: contactFormContent
+		});
+	}
+
+	function showAddAddressForm() {
+		if (!customer) return;
+		editingAddress = null;
+		offCanvas.showRight({
+			title: 'Add Address',
+			content: addressFormContent
+		});
+	}
+
+	function showEditAddressForm(address: (typeof addresses)[number]) {
+		if (!customer) return;
+		editingAddress = address;
+		offCanvas.showRight({
+			title: 'Edit Address',
+			content: addressFormContent
+		});
+	}
+
+	async function handleDeleteCustomer() {
+		if (!customer) return;
+		deleting = true;
+		try {
+			const res = await deleteCustomerStore.mutate({ id: customer.id });
+			if (res.errors?.length) {
+				throw new Error(res.errors.map((e) => e.message).join(', '));
+			}
+			await goto('/admin/customers');
+		} finally {
+			deleting = false;
+		}
+	}
+
+	async function handleDeleteContact() {
+		if (!deleteContactId) return;
+		const res = await deleteContactStore.mutate({ id: deleteContactId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteContactId = null;
+		await invalidateAll();
+	}
+
+	async function handleDeleteAddress() {
+		if (!deleteAddressId) return;
+		const res = await deleteAddressStore.mutate({ id: deleteAddressId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteAddressId = null;
+		await invalidateAll();
+	}
+
+	function showWaveLinkForm() {
+		if (!customer) return;
+		offCanvas.showRight({
+			title: 'Link Wave Customer',
+			content: waveLinkFormContent
+		});
+	}
+</script>
+
+{#snippet editFormContent()}
+	{#if customer}
+		<CustomerForm {customer} onSuccess={handleRefresh} />
+	{/if}
+{/snippet}
+
+{#snippet contactFormContent()}
+	{#if customer}
+		<ContactForm
+			entityType="customer"
+			entityId={customer.id}
+			contact={editingContact ?? undefined}
+			showActiveToggle={false}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet addressFormContent()}
+	{#if customer}
+		<AddressForm
+			entityType="customer"
+			entityId={customer.id}
+			address={editingAddress ?? undefined}
+			showActiveToggle={false}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet waveLinkFormContent()}
+	{#if customer}
+		<WaveCustomerLinkForm
+			customerId={customer.id}
+			currentWaveCustomerId={customer.waveCustomerId}
+			{waveCustomers}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>{customer?.name ?? 'Customer'} - Customers - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		{#if customer}
+			<AdminPageHeader
+				title={customer.name}
+				subtitle="Customer Details"
+				backHref="/admin/customers"
+				invalidateOnBack
+			/>
+
+			<div class="space-y-8">
+				<!-- Customer Info Card -->
+				<div class="card-padded">
+					<SectionHeader
+						title="Customer Information"
+						buttonText="Edit"
+						buttonIcon="none"
+						onButtonClick={showEditForm}
+					/>
+
+					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div>
+							<p class="detail-label">Name</p>
+							<p class="text-theme">{customer.name}</p>
+						</div>
+						<div>
+							<p class="detail-label">Status</p>
+							<span
+								class={customer.status === 'ACTIVE'
+									? 'badge-success'
+									: customer.status === 'PENDING'
+										? 'badge-warning'
+										: 'badge-neutral'}
+							>
+								{customer.status}
+							</span>
+						</div>
+						<div>
+							<p class="detail-label">Billing Email</p>
+							<p class="text-theme">{customer.billingEmail || '—'}</p>
+						</div>
+						<div>
+							<p class="detail-label">Billing Terms</p>
+							<p class="text-theme">{customer.billingTerms || '—'}</p>
+						</div>
+						<div>
+							<p class="detail-label">Start Date</p>
+							<p class="text-theme">{formatDate(customer.startDate)}</p>
+						</div>
+						<div>
+							<p class="detail-label">End Date</p>
+							<p class="text-theme">{formatDate(customer.endDate)}</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Wave Integration Section -->
+				<WaveIntegrationSection
+					waveCustomerId={customer.waveCustomerId}
+					{linkedWaveCustomer}
+					onLink={showWaveLinkForm}
+				/>
+
+				<!-- Contacts Section -->
+				<div class="card-padded">
+					<SectionHeader title="Contacts" buttonText="Add" onButtonClick={showAddContactForm} />
+
+					{#if contacts.length > 0}
+						<div class="space-y-3">
+							{#each contacts as contact (contact.id)}
+								<div
+									class="flex items-center justify-between rounded-lg border border-theme bg-theme p-3"
+								>
+									<div class="min-w-0 flex-1">
+										<div class="flex items-center gap-2">
+											<span class="font-medium text-theme">{contact.fullName}</span>
+											{#if contact.isPrimary}
+												<span class="badge-primary">Primary</span>
+											{/if}
+										</div>
+										{#if contact.email}
+											<p class="text-sm text-theme-secondary">{contact.email}</p>
+										{/if}
+										{#if contact.phone}
+											<p class="text-sm text-theme-muted">{contact.phone}</p>
+										{/if}
+									</div>
+									<div class="flex shrink-0 items-center gap-1">
+										<button
+											type="button"
+											onclick={() => showEditContactForm(contact)}
+											class="rounded p-1.5 text-gray-500 hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
+											aria-label="Edit contact"
+										>
+											<IconEdit />
+										</button>
+										<button
+											type="button"
+											onclick={() => (deleteContactId = contact.id)}
+											class="rounded p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-500 dark:text-gray-400 dark:hover:bg-red-900/20"
+											aria-label="Delete contact"
+										>
+											<IconTrash />
+										</button>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<p class="text-center text-theme-muted">No contacts added yet.</p>
+					{/if}
+				</div>
+
+				<!-- Addresses Section -->
+				<div class="card-padded">
+					<SectionHeader title="Addresses" buttonText="Add" onButtonClick={showAddAddressForm} />
+
+					{#if addresses.length > 0}
+						<div class="space-y-3">
+							{#each addresses as address (address.id)}
+								<div
+									class="flex items-center justify-between rounded-lg border border-theme bg-theme p-3"
+								>
+									<div class="min-w-0 flex-1">
+										<div class="flex items-center gap-2">
+											<span class="font-medium text-theme">{address.streetAddress}</span>
+											{#if address.isPrimary}
+												<span class="badge-primary">Primary</span>
+											{/if}
+											<span class="badge-neutral">
+												{address.addressType}
+											</span>
+										</div>
+										<p class="text-sm text-theme-secondary">
+											{address.city}, {address.state}
+											{address.zipCode}
+										</p>
+									</div>
+									<div class="flex shrink-0 items-center gap-1">
+										<button
+											type="button"
+											onclick={() => showEditAddressForm(address)}
+											class="rounded p-1.5 text-gray-500 hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
+											aria-label="Edit address"
+										>
+											<IconEdit />
+										</button>
+										<button
+											type="button"
+											onclick={() => (deleteAddressId = address.id)}
+											class="rounded p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-500 dark:text-gray-400 dark:hover:bg-red-900/20"
+											aria-label="Delete address"
+										>
+											<IconTrash />
+										</button>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<p class="text-center text-theme-muted">No addresses added yet.</p>
+					{/if}
+				</div>
+
+				<!-- Linked Accounts Section -->
+				{#if accounts.length > 0}
+					<div class="card-padded">
+						<h2 class="mb-4 text-lg font-semibold text-theme">Linked Accounts</h2>
+						<div class="space-y-2">
+							{#each accounts as account (account.id)}
+								<a
+									href="/admin/accounts/{account.id}"
+									class="flex items-center justify-between rounded-lg border border-theme bg-theme p-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+								>
+									<span class="font-medium text-primary-600 dark:text-primary-400"
+										>{account.name}</span
+									>
+									<svg
+										class="h-4 w-4 text-theme-muted"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								</a>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Danger Zone -->
+				<div class="danger-zone">
+					<h2 class="danger-zone-title">Danger Zone</h2>
+					<p class="danger-zone-text">
+						Deleting this customer will remove all associated contacts and addresses. This action
+						cannot be undone.
+					</p>
+					<button type="button" onclick={() => (deleteModalOpen = true)} class="btn-danger">
+						Delete Customer
+					</button>
+				</div>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">Customer not found</h2>
+				<p class="empty-state-text">
+					The customer you're looking for doesn't exist or has been deleted.
+				</p>
+				<a href="/admin/customers" class="mt-4 btn-primary">Back to Customers</a>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Delete Customer Modal -->
+<DeleteConfirmModal
+	bind:open={deleteModalOpen}
+	title="Delete Customer"
+	message="Are you sure you want to delete this customer? All contacts and addresses will be removed. This action cannot be undone."
+	loading={deleting}
+	onconfirm={handleDeleteCustomer}
+	oncancel={() => (deleteModalOpen = false)}
+/>
+
+<!-- Delete Contact Modal -->
+<DeleteConfirmModal
+	open={!!deleteContactId}
+	title="Delete Contact"
+	message="Are you sure you want to delete this contact?"
+	onconfirm={handleDeleteContact}
+	oncancel={() => (deleteContactId = null)}
+/>
+
+<!-- Delete Address Modal -->
+<DeleteConfirmModal
+	open={!!deleteAddressId}
+	title="Delete Address"
+	message="Are you sure you want to delete this address?"
+	onconfirm={handleDeleteAddress}
+	oncancel={() => (deleteAddressId = null)}
+/>
diff --git a/src/routes/admin/events/+page.server.ts b/src/routes/admin/events/+page.server.ts
new file mode 100644
index 0000000..5d318d3
--- /dev/null
+++ b/src/routes/admin/events/+page.server.ts
@@ -0,0 +1,28 @@
+import { AdminEventsStore } from '$houdini';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { parent } = event;
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Gate to ADMIN only
+	if (me?.__typename !== 'TeamProfileType' || me.role !== 'ADMIN') {
+		throw error(403, 'Admin access required');
+	}
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	const events = await new AdminEventsStore().fetch({
+		...fetchParams,
+		variables: { limit: 100, offset: 0 }
+	});
+
+	return {
+		events
+	};
+};
diff --git a/src/routes/admin/events/+page.svelte b/src/routes/admin/events/+page.svelte
new file mode 100644
index 0000000..c7579cd
--- /dev/null
+++ b/src/routes/admin/events/+page.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import { getEventTypeLabel } from '$lib/data/eventTypes';
+	import { formatDistanceToNow } from 'date-fns';
+	import { goto } from '$app/navigation';
+
+	let { data }: { data: PageData } = $props();
+
+	let events = $derived(data.events?.data?.events ?? []);
+
+	function formatEventTime(dateStr: string): string {
+		try {
+			return formatDistanceToNow(new Date(dateStr), { addSuffix: true });
+		} catch {
+			return dateStr;
+		}
+	}
+
+	function handleRowClick(eventId: string) {
+		goto(`/admin/events/${eventId}`);
+	}
+</script>
+
+<svelte:head>
+	<title>Event Log - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex items-start gap-4">
+				<a
+					href="/admin"
+					class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Go back"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				</a>
+				<div>
+					<h1 class="text-2xl font-bold text-purple-600 md:text-3xl dark:text-purple-400">
+						Event Log
+					</h1>
+					<p class="mt-2 text-theme-secondary">
+						View system events that may trigger notifications.
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<div class="mb-4">
+			<p class="text-sm text-theme-muted">
+				Showing the last {events.length} events.
+			</p>
+		</div>
+
+		{#if events.length > 0}
+			<div class="overflow-hidden rounded-lg border border-theme">
+				<table class="w-full">
+					<thead class="bg-black/5 dark:bg-white/5">
+						<tr>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase"
+							>
+								Event Type
+							</th>
+							<th
+								class="px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase"
+							>
+								Entity
+							</th>
+							<th
+								class="hidden px-4 py-3 text-left text-xs font-semibold tracking-wider text-theme-muted uppercase sm:table-cell"
+							>
+								Triggered By
+							</th>
+							<th
+								class="px-4 py-3 text-right text-xs font-semibold tracking-wider text-theme-muted uppercase"
+							>
+								Time
+							</th>
+						</tr>
+					</thead>
+					<tbody class="divide-theme divide-y">
+						{#each events as event (event.id)}
+							<tr
+								class="cursor-pointer hover:bg-black/5 dark:hover:bg-white/5"
+								onclick={() => handleRowClick(event.id)}
+								onkeydown={(e) => e.key === 'Enter' && handleRowClick(event.id)}
+								tabindex="0"
+								role="button"
+							>
+								<td class="px-4 py-3">
+									<span
+										class="inline-flex rounded-full bg-purple-500/10 px-2 py-0.5 text-xs font-medium text-purple-600 dark:text-purple-400"
+									>
+										{getEventTypeLabel(event.eventType)}
+									</span>
+								</td>
+								<td class="px-4 py-3">
+									<span class="text-sm text-theme">{event.entityType}</span>
+									<span class="block truncate font-mono text-xs text-theme-muted">
+										{event.entityId.substring(0, 8)}...
+									</span>
+								</td>
+								<td class="hidden px-4 py-3 sm:table-cell">
+									{#if event.triggeredById}
+										<span class="text-sm text-theme-muted">
+											{event.triggeredByType === 'teamprofile' ? 'Team' : 'Customer'}
+										</span>
+									{:else}
+										<span class="text-sm text-theme-muted italic">System</span>
+									{/if}
+								</td>
+								<td class="px-4 py-3 text-right">
+									<span class="text-sm text-theme-muted">
+										{formatEventTime(event.createdAt)}
+									</span>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No events yet</h2>
+				<p class="empty-state-text">Events will appear here as they occur in the system.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/events/[event]/+page.server.ts b/src/routes/admin/events/[event]/+page.server.ts
new file mode 100644
index 0000000..93782a2
--- /dev/null
+++ b/src/routes/admin/events/[event]/+page.server.ts
@@ -0,0 +1,32 @@
+import { AdminEventStore } from '$houdini';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { parent } = event;
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Gate to ADMIN only
+	if (me?.__typename !== 'TeamProfileType' || me.role !== 'ADMIN') {
+		throw error(403, 'Admin access required');
+	}
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	const eventResult = await new AdminEventStore().fetch({
+		...fetchParams,
+		variables: { id: event.params.event }
+	});
+
+	if (!eventResult.data?.event) {
+		throw error(404, 'Event not found');
+	}
+
+	return {
+		event: eventResult
+	};
+};
diff --git a/src/routes/admin/events/[event]/+page.svelte b/src/routes/admin/events/[event]/+page.svelte
new file mode 100644
index 0000000..6264c75
--- /dev/null
+++ b/src/routes/admin/events/[event]/+page.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import { getEventTypeLabel } from '$lib/data/eventTypes';
+	import { format } from 'date-fns';
+
+	let { data }: { data: PageData } = $props();
+
+	let event = $derived(data.event?.data?.event);
+
+	function formatDateTime(dateStr: string): string {
+		try {
+			return format(new Date(dateStr), 'PPpp');
+		} catch {
+			return dateStr;
+		}
+	}
+
+	function formatJson(obj: unknown): string {
+		if (!obj || (typeof obj === 'object' && Object.keys(obj).length === 0)) {
+			return 'None';
+		}
+		return JSON.stringify(obj, null, 2);
+	}
+</script>
+
+<svelte:head>
+	<title>Event Details - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex items-start gap-4">
+				<a
+					href="/admin/events"
+					class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Go back"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				</a>
+				<div>
+					<h1 class="text-2xl font-bold text-purple-600 md:text-3xl dark:text-purple-400">
+						Event Details
+					</h1>
+					<p class="mt-2 text-theme-secondary">View details for a system event.</p>
+				</div>
+			</div>
+		</div>
+
+		{#if event}
+			<div class="space-y-6">
+				<!-- Event Type Card -->
+				<div class="rounded-lg border border-theme bg-theme-card p-6">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Event Type</h2>
+					<div class="flex items-center gap-3">
+						<span
+							class="inline-flex rounded-full bg-purple-500/10 px-3 py-1 text-sm font-medium text-purple-600 dark:text-purple-400"
+						>
+							{getEventTypeLabel(event.eventType)}
+						</span>
+						<span class="font-mono text-xs text-theme-muted">
+							{event.eventType}
+						</span>
+					</div>
+				</div>
+
+				<!-- Entity Info Card -->
+				<div class="rounded-lg border border-theme bg-theme-card p-6">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Entity</h2>
+					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div>
+							<dt class="text-sm font-medium text-theme-muted">Entity Type</dt>
+							<dd class="mt-1 text-theme">{event.entityType}</dd>
+						</div>
+						<div>
+							<dt class="text-sm font-medium text-theme-muted">Entity ID</dt>
+							<dd class="mt-1 font-mono text-sm text-theme">{event.entityId}</dd>
+						</div>
+					</dl>
+				</div>
+
+				<!-- Triggered By Card -->
+				<div class="rounded-lg border border-theme bg-theme-card p-6">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Triggered By</h2>
+					{#if event.triggeredById}
+						<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							<div>
+								<dt class="text-sm font-medium text-theme-muted">Profile Type</dt>
+								<dd class="mt-1 text-theme">
+									{event.triggeredByType === 'teamprofile' ? 'Team Member' : 'Customer'}
+								</dd>
+							</div>
+							<div>
+								<dt class="text-sm font-medium text-theme-muted">Profile ID</dt>
+								<dd class="mt-1 font-mono text-sm text-theme">{event.triggeredById}</dd>
+							</div>
+						</dl>
+					{:else}
+						<p class="text-theme-muted italic">System-generated event</p>
+					{/if}
+				</div>
+
+				<!-- Metadata Card -->
+				<div class="rounded-lg border border-theme bg-theme-card p-6">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Metadata</h2>
+					<pre
+						class="overflow-x-auto rounded-lg bg-black/5 p-4 font-mono text-sm text-theme dark:bg-white/5">{formatJson(
+							event.metadata
+						)}</pre>
+				</div>
+
+				<!-- Timestamps Card -->
+				<div class="rounded-lg border border-theme bg-theme-card p-6">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Timestamps</h2>
+					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div>
+							<dt class="text-sm font-medium text-theme-muted">Created At</dt>
+							<dd class="mt-1 text-theme">{formatDateTime(event.createdAt)}</dd>
+						</div>
+						<div>
+							<dt class="text-sm font-medium text-theme-muted">Updated At</dt>
+							<dd class="mt-1 text-theme">{formatDateTime(event.updatedAt)}</dd>
+						</div>
+					</dl>
+				</div>
+
+				<!-- Event ID -->
+				<div class="text-center">
+					<span class="text-xs text-theme-muted">Event ID: </span>
+					<span class="font-mono text-xs text-theme-muted">{event.id}</span>
+				</div>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">Event not found</h2>
+				<p class="empty-state-text">The requested event could not be found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/invoices/+page.svelte b/src/routes/admin/invoices/+page.svelte
new file mode 100644
index 0000000..18c9811
--- /dev/null
+++ b/src/routes/admin/invoices/+page.svelte
@@ -0,0 +1,458 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import InvoiceForm from '$lib/components/admin/invoices/InvoiceForm.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { goto } from '$app/navigation';
+	import { invalidateDashboard } from '$lib/utils/invalidate';
+	import { page } from '$app/state';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			goto('/admin/invoices', { replaceState: true, noScroll: true });
+		}
+	});
+
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let invoices = $derived(data.invoices ?? []);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Sort invoices by date descending (most recent first)
+	let sortedInvoices = $derived([...invoices].sort((a, b) => b.date.localeCompare(a.date)));
+
+	// Search and filter
+	let searchQuery = $state('');
+	let selectedStatus = $state<string>('');
+	let selectedCustomerId = $state<string>('');
+
+	// Filter invoices
+	let filteredInvoices = $derived.by(() => {
+		let filtered = sortedInvoices;
+
+		// Filter by status
+		if (selectedStatus) {
+			filtered = filtered.filter((i) => i.status === selectedStatus);
+		}
+
+		// Filter by customer (comparing UUIDs)
+		if (selectedCustomerId) {
+			const selectedUuid = fromGlobalId(selectedCustomerId);
+			filtered = filtered.filter((i) => i.customerId === selectedUuid);
+		}
+
+		// Filter by search query (customer name or date)
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			filtered = filtered.filter((i) => {
+				const customerName = getCustomerName(i.customerId).toLowerCase();
+				const date = formatDate(i.date).toLowerCase();
+				return customerName.includes(query) || date.includes(query);
+			});
+		}
+
+		return filtered;
+	});
+
+	// Get customer name from UUID
+	function getCustomerName(customerId: string): string {
+		return customerLookup.get(customerId)?.customerName ?? 'Unknown';
+	}
+
+	// Format date for display
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	// Get status badge classes
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SENT':
+				return 'bg-primary-500/10 text-primary-600 dark:text-primary-400';
+			case 'PAID':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'OVERDUE':
+				return 'bg-error-500/10 text-error-600 dark:text-error-400';
+			case 'CANCELLED':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	// Get status display label
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'SENT':
+				return 'Sent';
+			case 'PAID':
+				return 'Paid';
+			case 'OVERDUE':
+				return 'Overdue';
+			case 'CANCELLED':
+				return 'Cancelled';
+			default:
+				return status;
+		}
+	}
+
+	// Get payment type label
+	function getPaymentTypeLabel(paymentType: string | null): string {
+		if (!paymentType) return '';
+		switch (paymentType) {
+			case 'CHECK':
+				return 'Check';
+			case 'CREDIT_CARD':
+				return 'Credit Card';
+			case 'BANK_TRANSFER':
+				return 'Bank Transfer';
+			case 'CASH':
+				return 'Cash';
+			default:
+				return paymentType;
+		}
+	}
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Invoice',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateDashboard();
+	}
+
+	// Active customers for filter dropdown
+	let activeCustomers = $derived(customers.filter((c) => c.status === 'ACTIVE'));
+</script>
+
+{#snippet createFormContent()}
+	<InvoiceForm {customers} onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>Invoices - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent6-600 md:text-3xl dark:text-accent6-400">
+							Invoices
+						</h1>
+						<p class="mt-2 text-theme-secondary">Create and manage customer invoices.</p>
+					</div>
+				</div>
+				<div class="hidden items-center gap-2 sm:flex">
+					<a
+						href="/admin/invoices/wave"
+						class="inline-flex items-center gap-2 rounded-lg border border-accent6-500/30 bg-accent6-500/10 px-4 py-2 text-accent6-600 transition-colors hover:bg-accent6-500/20 dark:text-accent6-400"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13 10V3L4 14h7v7l9-11h-7z"
+							/>
+						</svg>
+						<span>Wave</span>
+					</a>
+					<button
+						type="button"
+						onclick={showCreateForm}
+						class="inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						<span>Create Invoice</span>
+					</button>
+				</div>
+			</div>
+
+			<!-- Mobile action buttons -->
+			<div class="mt-4 flex gap-2 sm:hidden">
+				<a
+					href="/admin/invoices/wave"
+					class="flex flex-1 items-center justify-center gap-2 rounded-lg border border-accent6-500/30 bg-accent6-500/10 px-4 py-2.5 text-sm font-medium text-accent6-600 transition-colors hover:bg-accent6-500/20 dark:text-accent6-400"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 10V3L4 14h7v7l9-11h-7z"
+						/>
+					</svg>
+					<span>Wave</span>
+				</a>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-primary-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Search and Filter -->
+		<div class="mb-6 flex flex-col gap-4 sm:flex-row">
+			<!-- Search -->
+			<div class="relative flex-1">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search invoices..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+
+			<!-- Status Filter -->
+			<select
+				bind:value={selectedStatus}
+				class="rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 sm:w-40"
+			>
+				<option value="">All Statuses</option>
+				<option value="DRAFT">Draft</option>
+				<option value="SENT">Sent</option>
+				<option value="PAID">Paid</option>
+				<option value="OVERDUE">Overdue</option>
+				<option value="CANCELLED">Cancelled</option>
+			</select>
+
+			<!-- Customer Filter -->
+			<select
+				bind:value={selectedCustomerId}
+				class="rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 sm:w-64"
+			>
+				<option value="">All Customers</option>
+				{#each activeCustomers as customer (customer.id)}
+					<option value={customer.id}>{customer.name}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Invoices List -->
+		{#if filteredInvoices.length > 0}
+			<div class="space-y-4">
+				{#each filteredInvoices as invoice (invoice.id)}
+					<a href="/admin/invoices/{invoice.id}" class="block">
+						<div class="card-invoice">
+							<div class="flex items-start justify-between gap-4">
+								<div class="min-w-0 flex-1 space-y-2">
+									<!-- Customer Name & Date -->
+									<div class="flex flex-wrap items-center gap-3">
+										<h3 class="text-lg font-semibold text-accent6-600 dark:text-accent6-400">
+											{getCustomerName(invoice.customerId)}
+										</h3>
+										<span
+											class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getStatusClasses(invoice.status)}`}
+										>
+											{getStatusLabel(invoice.status)}
+										</span>
+									</div>
+
+									<!-- Invoice Details -->
+									<div class="flex flex-wrap items-center gap-4 text-sm text-theme-secondary">
+										<span class="flex items-center gap-1.5">
+											<svg
+												class="h-4 w-4"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+												/>
+											</svg>
+											{formatDate(invoice.date)}
+										</span>
+
+										{#if invoice.status === 'PAID' && invoice.datePaid}
+											<span
+												class="flex items-center gap-1.5 text-success-600 dark:text-success-400"
+											>
+												<svg
+													class="h-4 w-4"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+													/>
+												</svg>
+												Paid {formatDate(invoice.datePaid)}
+											</span>
+										{/if}
+
+										{#if invoice.paymentType}
+											<span class="flex items-center gap-1.5">
+												<svg
+													class="h-4 w-4"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+													/>
+												</svg>
+												{getPaymentTypeLabel(invoice.paymentType)}
+											</span>
+										{/if}
+
+										{#if invoice.waveInvoiceId}
+											<span class="badge-primary">Linked</span>
+										{/if}
+									</div>
+								</div>
+
+								<!-- Chevron -->
+								<svg
+									class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery || selectedStatus || selectedCustomerId}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent6-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Invoices Found</h2>
+				<p class="empty-state-text">
+					No invoices match your search criteria. Try adjusting your filters.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent6-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Invoices Yet</h2>
+				<p class="empty-state-text">
+					Get started by creating your first invoice. Track payments and billing for all your
+					customers.
+				</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Invoice</span>
+				</button>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/invoices/[invoice]/+page.server.ts b/src/routes/admin/invoices/[invoice]/+page.server.ts
new file mode 100644
index 0000000..684af72
--- /dev/null
+++ b/src/routes/admin/invoices/[invoice]/+page.server.ts
@@ -0,0 +1,497 @@
+import { GetInvoiceStore, UpdateInvoiceStore } from '$houdini';
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { createWaveServerClient } from '$lib/graphql/wave/client';
+import {
+	GetCustomersDocument,
+	GetProductsDocument,
+	GetInvoiceDocument,
+	type CustomerEdge,
+	type Customer,
+	type ProductEdge,
+	type Product
+} from '$lib/graphql/wave/generated';
+import {
+	createWaveInvoice,
+	deleteWaveInvoice,
+	sendWaveInvoice,
+	updateWaveInvoice,
+	approveWaveInvoice
+} from '$lib/graphql/wave/mutations';
+import { fromGlobalId } from '$lib/utils/relay';
+import type { PageServerLoad, Actions } from './$types';
+import { error, fail } from '@sveltejs/kit';
+
+export interface WaveCustomer {
+	id: string;
+	name: string;
+	email: string | null;
+	isArchived: boolean;
+}
+
+export interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: number;
+	isArchived: boolean;
+}
+
+export interface WaveInvoiceItem {
+	product: { id: string; name: string };
+	description: string | null;
+	quantity: number;
+	unitPrice: number;
+	subtotal: { value: string };
+	total: { value: string };
+}
+
+export interface WaveInvoice {
+	id: string;
+	invoiceNumber: string;
+	invoiceDate: string;
+	dueDate: string;
+	status: string;
+	title: string;
+	subhead: string | null;
+	poNumber: string | null;
+	memo: string | null;
+	footer: string | null;
+	pdfUrl: string;
+	viewUrl: string;
+	customer: { id: string; name: string; email: string | null };
+	items: WaveInvoiceItem[];
+	subtotal: { value: string; currency: { code: string; symbol: string } };
+	taxTotal: { value: string; currency: { code: string; symbol: string } };
+	discountTotal: { value: string; currency: { code: string; symbol: string } };
+	total: { value: string; currency: { code: string; symbol: string } };
+	amountDue: { value: string; currency: { code: string; symbol: string } };
+	amountPaid: { value: string; currency: { code: string; symbol: string } };
+	lastSentAt: string | null;
+	lastSentVia: string | null;
+	lastViewedAt: string | null;
+}
+
+async function fetchWaveCustomers(): Promise<WaveCustomer[]> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.query(GetCustomersDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		pageSize: 500
+	});
+
+	if (result.error) {
+		console.error('Wave API error (customers):', result.error);
+		return [];
+	}
+
+	const edges = result.data?.business?.customers?.edges ?? [];
+	return edges
+		.filter((edge: CustomerEdge): edge is CustomerEdge & { node: Customer } => edge.node != null)
+		.map((edge: CustomerEdge & { node: Customer }) => ({
+			id: edge.node.id,
+			name: edge.node.name,
+			email: edge.node.email ?? null,
+			isArchived: edge.node.isArchived ?? false
+		}));
+}
+
+async function fetchWaveProducts(): Promise<WaveProduct[]> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.query(GetProductsDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		pageSize: 500,
+		isSold: true,
+		isArchived: false
+	});
+
+	if (result.error) {
+		console.error('Wave API error (products):', result.error);
+		return [];
+	}
+
+	const edges = result.data?.business?.products?.edges ?? [];
+	return edges
+		.filter((edge: ProductEdge): edge is ProductEdge & { node: Product } => edge.node != null)
+		.map((edge: ProductEdge & { node: Product }) => ({
+			id: edge.node.id,
+			name: edge.node.name,
+			description: edge.node.description ?? null,
+			unitPrice: parseFloat(edge.node.unitPrice),
+			isArchived: edge.node.isArchived
+		}));
+}
+
+async function fetchWaveInvoice(waveInvoiceId: string): Promise<WaveInvoice | null> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	// The stored waveInvoiceId is decoded (e.g., "businessId;Invoice:invoiceId")
+	// Wave API expects base64-encoded Global ID with "Business:" prefix
+	const waveGlobalId = btoa(`Business:${waveInvoiceId}`);
+
+	const result = await client.query(GetInvoiceDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		invoiceId: waveGlobalId
+	});
+
+	if (result.error) {
+		console.error('Wave API error (invoice):', result.error);
+		return null;
+	}
+
+	const invoice = result.data?.business?.invoice;
+	if (!invoice) return null;
+
+	return {
+		id: invoice.id,
+		invoiceNumber: invoice.invoiceNumber,
+		invoiceDate: invoice.invoiceDate,
+		dueDate: invoice.dueDate,
+		status: invoice.status,
+		title: invoice.title,
+		subhead: invoice.subhead ?? null,
+		poNumber: invoice.poNumber ?? null,
+		memo: invoice.memo ?? null,
+		footer: invoice.footer ?? null,
+		pdfUrl: invoice.pdfUrl,
+		viewUrl: invoice.viewUrl,
+		customer: {
+			id: invoice.customer.id,
+			name: invoice.customer.name,
+			email: invoice.customer.email ?? null
+		},
+		items: (invoice.items ?? []).map(
+			(item: {
+				product: { id: string; name: string };
+				description: string | null;
+				quantity: string;
+				unitPrice: string;
+				subtotal: { value: string };
+				total: { value: string };
+			}) => ({
+				product: { id: item.product.id, name: item.product.name },
+				description: item.description ?? null,
+				quantity: parseFloat(item.quantity),
+				unitPrice: parseFloat(item.unitPrice),
+				subtotal: { value: item.subtotal.value },
+				total: { value: item.total.value }
+			})
+		),
+		subtotal: {
+			value: invoice.subtotal.value,
+			currency: { code: invoice.subtotal.currency.code, symbol: invoice.subtotal.currency.symbol }
+		},
+		taxTotal: {
+			value: invoice.taxTotal.value,
+			currency: { code: invoice.taxTotal.currency.code, symbol: invoice.taxTotal.currency.symbol }
+		},
+		discountTotal: {
+			value: invoice.discountTotal.value,
+			currency: {
+				code: invoice.discountTotal.currency.code,
+				symbol: invoice.discountTotal.currency.symbol
+			}
+		},
+		total: {
+			value: invoice.total.value,
+			currency: { code: invoice.total.currency.code, symbol: invoice.total.currency.symbol }
+		},
+		amountDue: {
+			value: invoice.amountDue.value,
+			currency: { code: invoice.amountDue.currency.code, symbol: invoice.amountDue.currency.symbol }
+		},
+		amountPaid: {
+			value: invoice.amountPaid.value,
+			currency: {
+				code: invoice.amountPaid.currency.code,
+				symbol: invoice.amountPaid.currency.symbol
+			}
+		},
+		lastSentAt: invoice.lastSentAt ?? null,
+		lastSentVia: invoice.lastSentVia ?? null,
+		lastViewedAt: invoice.lastViewedAt ?? null
+	};
+}
+
+export const load: PageServerLoad = async (event) => {
+	const { invoice: invoiceId } = event.params;
+	const { parent } = event;
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	// Fetch the invoice, parent data, and Wave data in parallel
+	const [invoiceResult, parentData, waveCustomers, waveProducts] = await Promise.all([
+		new GetInvoiceStore().fetch({
+			...fetchParams,
+			variables: {
+				id: invoiceId
+			}
+		}),
+		parent(),
+		fetchWaveCustomers(),
+		fetchWaveProducts()
+	]);
+
+	if (!invoiceResult.data?.invoice) {
+		throw error(404, 'Invoice not found');
+	}
+
+	const invoice = invoiceResult.data.invoice;
+
+	// Fetch Wave invoice if linked
+	let waveInvoice: WaveInvoice | null = null;
+	if (invoice.waveInvoiceId) {
+		waveInvoice = await fetchWaveInvoice(invoice.waveInvoiceId);
+	}
+
+	return {
+		invoice,
+		customers: parentData.customers,
+		customerLookup: parentData.customerLookup,
+		accounts: parentData.accounts,
+		accountLookup: parentData.accountLookup,
+		waveCustomers,
+		waveProducts,
+		waveInvoice
+	};
+};
+
+export const actions: Actions = {
+	createWaveInvoice: async (event) => {
+		const { request, params, locals } = event;
+		const formData = await request.formData();
+		const invoiceId = params.invoice;
+		const customerId = formData.get('customerId') as string;
+		const invoiceDate = formData.get('invoiceDate') as string;
+		const dueDate = formData.get('dueDate') as string;
+		const memo = formData.get('memo') as string | null;
+		const footer = formData.get('footer') as string | null;
+		const itemsJson = formData.get('items') as string;
+		const discountJson = formData.get('discount') as string | null;
+
+		if (!customerId || !itemsJson) {
+			return fail(400, { error: 'Missing required fields' });
+		}
+
+		let items;
+		try {
+			items = JSON.parse(itemsJson);
+		} catch {
+			return fail(400, { error: 'Invalid items data' });
+		}
+
+		// Parse discount if provided
+		let discounts;
+		if (discountJson) {
+			try {
+				const discount = JSON.parse(discountJson);
+				if (discount && discount.value > 0) {
+					discounts = [
+						{
+							discountType: discount.type as 'PERCENTAGE' | 'FIXED',
+							name: discount.name || 'Discount',
+							...(discount.type === 'PERCENTAGE'
+								? { percentage: discount.value.toString() }
+								: { amount: discount.value.toString() })
+						}
+					];
+				}
+			} catch {
+				// Ignore invalid discount data
+			}
+		}
+
+		const result = await createWaveInvoice({
+			businessId: PUBLIC_WAVE_BUSINESS_ID,
+			customerId,
+			status: 'DRAFT',
+			invoiceDate,
+			dueDate,
+			items,
+			discounts,
+			memo: memo || undefined,
+			footer: footer || undefined
+		});
+
+		if (!result.success || !result.invoice) {
+			return fail(400, { error: result.error || 'Failed to create Wave invoice' });
+		}
+
+		// Update Nexus invoice with the Wave invoice ID
+		const waveInvoiceId = fromGlobalId(result.invoice.id);
+		console.log('[createWaveInvoice] Wave invoice created:', {
+			waveGlobalId: result.invoice.id,
+			waveInvoiceId,
+			nexusInvoiceId: invoiceId
+		});
+
+		try {
+			const updateResult = await new UpdateInvoiceStore().mutate(
+				{ input: { id: invoiceId, waveInvoiceId } },
+				{ event, metadata: { cookie: locals.cookie } }
+			);
+
+			console.log('[createWaveInvoice] Update result:', {
+				data: updateResult.data,
+				errors: updateResult.errors
+			});
+
+			if (updateResult.errors?.length) {
+				return fail(400, {
+					error: `Wave invoice created but failed to link: ${updateResult.errors.map((e) => e.message).join(', ')}`
+				});
+			}
+
+			return { success: true, waveInvoiceId };
+		} catch (err) {
+			console.error('[createWaveInvoice] Exception during update:', err);
+			return fail(500, {
+				error: `Wave invoice created (ID: ${waveInvoiceId}) but failed to save to Nexus: ${err instanceof Error ? err.message : 'Unknown error'}`
+			});
+		}
+	},
+
+	sendWaveInvoice: async (event) => {
+		const { request, locals } = event;
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+		const nexusInvoiceId = formData.get('nexusInvoiceId') as string;
+		const customerEmail = formData.get('customerEmail') as string;
+
+		if (!invoiceId) {
+			return fail(400, { error: 'Missing invoice ID' });
+		}
+
+		if (!customerEmail) {
+			return fail(400, { error: 'Customer email is required to send invoice' });
+		}
+
+		const result = await sendWaveInvoice(invoiceId, [customerEmail]);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to send Wave invoice' });
+		}
+
+		// Update Nexus invoice status to SENT
+		if (nexusInvoiceId) {
+			await new UpdateInvoiceStore().mutate(
+				{ input: { id: nexusInvoiceId, status: 'SENT' } },
+				{ event, metadata: { cookie: locals.cookie } }
+			);
+		}
+
+		return { success: true };
+	},
+
+	approveWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+
+		if (!invoiceId) {
+			return fail(400, { error: 'Missing invoice ID' });
+		}
+
+		const result = await approveWaveInvoice(invoiceId);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to approve Wave invoice' });
+		}
+
+		return { success: true };
+	},
+
+	updateWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+		const invoiceDate = formData.get('invoiceDate') as string;
+		const dueDate = formData.get('dueDate') as string;
+		const memo = formData.get('memo') as string | null;
+		const footer = formData.get('footer') as string | null;
+		const itemsJson = formData.get('items') as string;
+		const discountJson = formData.get('discount') as string | null;
+
+		if (!invoiceId || !itemsJson) {
+			return fail(400, { error: 'Missing required fields' });
+		}
+
+		let items;
+		try {
+			items = JSON.parse(itemsJson);
+		} catch {
+			return fail(400, { error: 'Invalid items data' });
+		}
+
+		// Parse discount if provided
+		let discounts;
+		if (discountJson) {
+			try {
+				const discount = JSON.parse(discountJson);
+				if (discount && discount.value > 0) {
+					discounts = [
+						{
+							discountType: discount.type as 'PERCENTAGE' | 'FIXED',
+							name: discount.name || 'Discount',
+							...(discount.type === 'PERCENTAGE'
+								? { percentage: discount.value.toString() }
+								: { amount: discount.value.toString() })
+						}
+					];
+				}
+			} catch {
+				// Ignore invalid discount data
+			}
+		}
+
+		const result = await updateWaveInvoice({
+			id: invoiceId,
+			invoiceDate,
+			dueDate,
+			items,
+			discounts,
+			memo: memo || undefined,
+			footer: footer || undefined
+		});
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to update Wave invoice' });
+		}
+
+		return { success: true };
+	},
+
+	deleteWaveInvoice: async (event) => {
+		const { request, locals } = event;
+		const formData = await request.formData();
+		const waveInvoiceId = formData.get('waveInvoiceId') as string;
+		const nexusInvoiceId = formData.get('nexusInvoiceId') as string;
+
+		if (!waveInvoiceId || !nexusInvoiceId) {
+			return fail(400, { error: 'Missing required fields' });
+		}
+
+		// Delete from Wave
+		const result = await deleteWaveInvoice(waveInvoiceId);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to delete Wave invoice' });
+		}
+
+		// Clear waveInvoiceId on Nexus invoice
+		const updateResult = await new UpdateInvoiceStore().mutate(
+			{ input: { id: nexusInvoiceId, waveInvoiceId: '' } },
+			{ event, metadata: { cookie: locals.cookie } }
+		);
+
+		if (updateResult.errors?.length) {
+			return fail(400, {
+				error: `Wave invoice deleted but failed to unlink from Nexus: ${updateResult.errors.map((e) => e.message).join(', ')}`
+			});
+		}
+
+		return { success: true };
+	}
+};
diff --git a/src/routes/admin/invoices/[invoice]/+page.svelte b/src/routes/admin/invoices/[invoice]/+page.svelte
new file mode 100644
index 0000000..a689c2b
--- /dev/null
+++ b/src/routes/admin/invoices/[invoice]/+page.svelte
@@ -0,0 +1,1017 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import InvoiceForm from '$lib/components/admin/invoices/InvoiceForm.svelte';
+	import AddRevenuesModal from '$lib/components/admin/invoices/AddRevenuesModal.svelte';
+	import AddProjectsModal from '$lib/components/admin/invoices/AddProjectsModal.svelte';
+	import InvoiceTabs from '$lib/components/admin/invoices/InvoiceTabs.svelte';
+	import WaveValidationSection from '$lib/components/admin/invoices/wave/WaveValidationSection.svelte';
+	import WaveLinkProductModal from '$lib/components/admin/invoices/wave/WaveLinkProductModal.svelte';
+	import WaveInvoiceForm from '$lib/components/admin/invoices/wave/WaveInvoiceForm.svelte';
+	import WaveInvoiceEditForm from '$lib/components/admin/invoices/wave/WaveInvoiceEditForm.svelte';
+	import WaveInvoicePreview from '$lib/components/admin/invoices/wave/WaveInvoicePreview.svelte';
+	import WaveCustomerLinkForm from '$lib/components/admin/customers/WaveCustomerLinkForm.svelte';
+	import { DeleteInvoiceStore, UpdateInvoiceStore } from '$houdini';
+	import { enhance } from '$app/forms';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { PageData } from './$types';
+	import type { InvoiceTab } from '$lib/components/admin/invoices/wave/types';
+
+	let { data }: { data: PageData } = $props();
+
+	let invoice = $derived(data.invoice);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let customerLookup = $derived(data.customerLookup);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+	let accountLookup = $derived(data.accountLookup);
+	let waveCustomers = $derived(data.waveCustomers);
+	let waveProducts = $derived(data.waveProducts);
+	let waveInvoice = $derived(data.waveInvoice);
+
+	// Tab state
+	let activeTab = $state<InvoiceTab>('details');
+
+	// Get customer name from UUID
+	let customerName = $derived(
+		customerLookup.get(invoice.customerId)?.customerName ?? 'Unknown Customer'
+	);
+
+	let showDeleteModal = $state(false);
+	let showAddRevenuesModal = $state(false);
+	let showAddProjectsModal = $state(false);
+	let isDeleting = $state(false);
+	let isUpdatingStatus = $state(false);
+
+	// Wave integration state
+	let showLinkProductModal = $state(false);
+	let linkingEntity = $state<{
+		type: 'revenue' | 'project';
+		id: string;
+		description: string;
+		currentWaveServiceId: string | null;
+	} | null>(null);
+	let showWaveInvoiceForm = $state(false);
+	let isEditingWaveInvoice = $state(false);
+	let isSendingWaveInvoice = $state(false);
+	let isApprovingWaveInvoice = $state(false);
+	let isRefreshingWaveInvoice = $state(false);
+	let isDeletingWaveInvoice = $state(false);
+	let approveWaveInvoiceFormRef = $state<HTMLFormElement | null>(null);
+	let deleteWaveInvoiceFormRef = $state<HTMLFormElement | null>(null);
+
+	// Wave validation derived state
+	let customerData = $derived(() => {
+		const customer = customers.find((c) => fromGlobalId(c.id) === invoice.customerId);
+		return {
+			customerName: customer?.name ?? 'Unknown Customer',
+			waveCustomerId: customer?.waveCustomerId ?? null
+		};
+	});
+
+	let unlinkedRevenues = $derived(invoice.revenues.filter((r) => !r.waveServiceId));
+	let unlinkedProjects = $derived(invoice.projects.filter((p) => !p.waveServiceId));
+	let validationErrors = $derived(
+		(customerData().waveCustomerId ? 0 : 1) + unlinkedRevenues.length + unlinkedProjects.length
+	);
+	let hasWaveInvoice = $derived(!!invoice.waveInvoiceId && !!waveInvoice);
+
+	const deleteStore = new DeleteInvoiceStore();
+	const updateStore = new UpdateInvoiceStore();
+
+	// Calculate totals
+	let revenuesTotal = $derived(
+		invoice.revenues.reduce((sum, r) => sum + parseFloat(String(r.amount ?? 0)), 0)
+	);
+
+	let projectsTotal = $derived(
+		invoice.projects.reduce((sum, p) => sum + parseFloat(String(p.amount ?? 0)), 0)
+	);
+
+	let invoiceTotal = $derived(revenuesTotal + projectsTotal);
+
+	// Format date for display
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatShortDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	// Get status badge classes
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SENT':
+				return 'bg-primary-500/10 text-primary-600 dark:text-primary-400';
+			case 'PAID':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'OVERDUE':
+				return 'bg-error-500/10 text-error-600 dark:text-error-400';
+			case 'CANCELLED':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	// Get status display label
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'SENT':
+				return 'Sent';
+			case 'PAID':
+				return 'Paid';
+			case 'OVERDUE':
+				return 'Overdue';
+			case 'CANCELLED':
+				return 'Cancelled';
+			default:
+				return status;
+		}
+	}
+
+	// Get payment type label
+	function getPaymentTypeLabel(paymentType: string | null): string {
+		if (!paymentType) return '—';
+		switch (paymentType) {
+			case 'CHECK':
+				return 'Check';
+			case 'CREDIT_CARD':
+				return 'Credit Card';
+			case 'BANK_TRANSFER':
+				return 'Bank Transfer';
+			case 'CASH':
+				return 'Cash';
+			default:
+				return paymentType;
+		}
+	}
+
+	// Get account name for a revenue (accountId is UUID, account.id is GlobalID)
+	function getAccountNameForRevenue(accountId: string): string {
+		const account = accounts.find((a) => fromGlobalId(a.id) === accountId);
+		return account?.name ?? 'Unknown Account';
+	}
+
+	// Get account name for a project
+	function getAccountNameForProject(project: { accountAddressId: string | null }): string {
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			if (accountInfo) {
+				return accountInfo.accountName;
+			}
+		}
+		return '';
+	}
+
+	// Get project display name
+	function getProjectDisplayName(project: {
+		name: string;
+		date: string;
+		accountAddressId: string | null;
+	}): string {
+		const locationName = getAccountNameForProject(project);
+
+		if (locationName) {
+			return `${project.name} - ${locationName}`;
+		}
+		return project.name;
+	}
+
+	// Sorted revenues by account name
+	let sortedRevenues = $derived(
+		[...invoice.revenues].sort((a, b) => {
+			const nameA = getAccountNameForRevenue(a.accountId);
+			const nameB = getAccountNameForRevenue(b.accountId);
+			return nameA.localeCompare(nameB);
+		})
+	);
+
+	// Sorted projects by account name
+	let sortedProjects = $derived(
+		[...invoice.projects].sort((a, b) => {
+			const nameA = getAccountNameForProject(a);
+			const nameB = getAccountNameForProject(b);
+			return nameA.localeCompare(nameB);
+		})
+	);
+
+	const statusOptions = [
+		{ value: 'DRAFT', label: 'Draft' },
+		{ value: 'SENT', label: 'Sent' },
+		{ value: 'PAID', label: 'Paid' },
+		{ value: 'OVERDUE', label: 'Overdue' },
+		{ value: 'CANCELLED', label: 'Cancelled' }
+	];
+
+	// Quick status update
+	async function updateStatus(newStatus: string) {
+		if (newStatus === invoice.status) return;
+		isUpdatingStatus = true;
+
+		try {
+			// If marking as paid and no date_paid, set it to today
+			const datePaid =
+				newStatus === 'PAID' && !invoice.datePaid
+					? new Date().toISOString().split('T')[0]
+					: invoice.datePaid;
+
+			await updateStore.mutate({
+				input: {
+					id: invoice.id,
+					status: newStatus,
+					datePaid
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to update status:', err);
+		} finally {
+			isUpdatingStatus = false;
+		}
+	}
+
+	// Remove a revenue from the invoice
+	async function removeRevenue(revenueId: string) {
+		// IDs are already GlobalIDs from the GraphQL query
+		const newRevenueIds = invoice.revenues.map((r) => r.id).filter((id) => id !== revenueId);
+
+		try {
+			await updateStore.mutate({
+				input: {
+					id: invoice.id,
+					revenueIds: newRevenueIds
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove revenue:', err);
+		}
+	}
+
+	// Remove a project from the invoice
+	async function removeProject(projectId: string) {
+		// IDs are already GlobalIDs from the GraphQL query
+		const newProjectIds = invoice.projects.map((p) => p.id).filter((id) => id !== projectId);
+
+		try {
+			await updateStore.mutate({
+				input: {
+					id: invoice.id,
+					projectIds: newProjectIds
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove project:', err);
+		}
+	}
+
+	function showEditForm() {
+		offCanvas.showRight({
+			title: 'Edit Invoice',
+			content: editFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	// Wave integration handlers
+	function handleLinkCustomer() {
+		const customer = customers.find((c) => fromGlobalId(c.id) === invoice.customerId);
+		if (!customer) return;
+
+		offCanvas.showRight({
+			title: 'Link Wave Customer',
+			content: linkCustomerContent
+		});
+	}
+
+	function handleLinkRevenue(revenueId: string, accountName: string) {
+		const revenue = invoice.revenues.find((r) => r.id === revenueId);
+		if (!revenue) return;
+
+		linkingEntity = {
+			type: 'revenue',
+			id: revenueId,
+			description: accountName,
+			currentWaveServiceId: revenue.waveServiceId ?? null
+		};
+		showLinkProductModal = true;
+	}
+
+	function handleLinkProject(projectId: string, projectName: string) {
+		const project = invoice.projects.find((p) => p.id === projectId);
+		if (!project) return;
+
+		linkingEntity = {
+			type: 'project',
+			id: projectId,
+			description: projectName,
+			currentWaveServiceId: project.waveServiceId ?? null
+		};
+		showLinkProductModal = true;
+	}
+
+	async function handleLinkProductSuccess() {
+		showLinkProductModal = false;
+		linkingEntity = null;
+		await invalidateAll();
+	}
+
+	function handleLinkProductCancel() {
+		showLinkProductModal = false;
+		linkingEntity = null;
+	}
+
+	function handleCreateWaveInvoice() {
+		showWaveInvoiceForm = true;
+	}
+
+	async function handleWaveInvoiceSuccess() {
+		showWaveInvoiceForm = false;
+		await invalidateAll();
+	}
+
+	function handleWaveInvoiceCancel() {
+		showWaveInvoiceForm = false;
+	}
+
+	let sendWaveInvoiceFormRef = $state<HTMLFormElement | null>(null);
+
+	function handleSendWaveInvoice() {
+		sendWaveInvoiceFormRef?.requestSubmit();
+	}
+
+	function handleApproveWaveInvoice() {
+		approveWaveInvoiceFormRef?.requestSubmit();
+	}
+
+	async function handleRefreshWaveInvoice() {
+		isRefreshingWaveInvoice = true;
+		await invalidateAll();
+		isRefreshingWaveInvoice = false;
+	}
+
+	function handleEditWaveInvoice() {
+		isEditingWaveInvoice = true;
+	}
+
+	async function handleEditWaveInvoiceSuccess() {
+		isEditingWaveInvoice = false;
+		await invalidateAll();
+	}
+
+	function handleEditWaveInvoiceCancel() {
+		isEditingWaveInvoice = false;
+	}
+
+	function handleDeleteWaveInvoice() {
+		if (confirm('Are you sure you want to delete this Wave invoice? This cannot be undone.')) {
+			deleteWaveInvoiceFormRef?.requestSubmit();
+		}
+	}
+
+	async function handleDelete() {
+		isDeleting = true;
+		try {
+			await deleteStore.mutate({ id: invoice.id });
+			await goto('/admin/invoices', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to delete invoice:', err);
+			alert('Failed to delete invoice. Please try again.');
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+		}
+	}
+</script>
+
+{#snippet editFormContent()}
+	<InvoiceForm {customers} {invoice} onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet linkCustomerContent()}
+	{@const customer = customers.find((c) => fromGlobalId(c.id) === invoice.customerId)}
+	{#if customer}
+		<WaveCustomerLinkForm
+			customerId={customer.id}
+			currentWaveCustomerId={customer.waveCustomerId}
+			{waveCustomers}
+			onSuccess={handleSuccess}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>Invoice - {customerName} - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={customerName}
+			subtitle={formatDate(invoice.date)}
+			colorScheme="accent6"
+			backHref="/admin/invoices"
+		/>
+
+		<!-- Status & Actions Card -->
+		<div class="mb-6 card-padded">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+				<div class="flex items-center gap-3">
+					<span
+						class={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${getStatusClasses(invoice.status)}`}
+					>
+						{getStatusLabel(invoice.status)}
+					</span>
+					{#if invoice.waveInvoiceId}
+						<span class="badge-primary">Linked</span>
+					{/if}
+				</div>
+
+				<div class="flex items-center gap-3">
+					<!-- Quick Status Update -->
+					<select
+						onchange={(e) => updateStatus(e.currentTarget.value)}
+						disabled={isUpdatingStatus}
+						class="rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#each statusOptions as option (option.value)}
+							<option value={option.value} selected={option.value === invoice.status}
+								>{option.label}</option
+							>
+						{/each}
+					</select>
+
+					<!-- Edit Button -->
+					<button
+						onclick={showEditForm}
+						class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+							/>
+						</svg>
+						Edit
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Tabs -->
+		<InvoiceTabs
+			{activeTab}
+			waveLinked={hasWaveInvoice}
+			{validationErrors}
+			onTabChange={(tab) => (activeTab = tab)}
+		/>
+
+		{#if activeTab === 'details'}
+			<!-- Invoice Summary Card -->
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Invoice Summary</h3>
+
+				<div class="space-y-4">
+					<!-- Revenues Total -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20"
+							>
+								<svg
+									class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="font-medium text-theme">Revenues</p>
+								<p class="text-sm text-theme-muted">
+									{invoice.revenues.length} item{invoice.revenues.length !== 1 ? 's' : ''}
+								</p>
+							</div>
+						</div>
+						<p class="text-lg font-bold text-secondary-600 dark:text-secondary-400">
+							{formatCurrency(revenuesTotal)}
+						</p>
+					</div>
+
+					<!-- Projects Total -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/20">
+								<svg
+									class="h-5 w-5 text-accent-600 dark:text-accent-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="font-medium text-theme">Projects</p>
+								<p class="text-sm text-theme-muted">
+									{invoice.projects.length} item{invoice.projects.length !== 1 ? 's' : ''}
+								</p>
+							</div>
+						</div>
+						<p class="text-lg font-bold text-accent-600 dark:text-accent-400">
+							{formatCurrency(projectsTotal)}
+						</p>
+					</div>
+
+					<!-- Invoice Total -->
+					<div class="flex items-center justify-between py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent6-500/20">
+								<svg
+									class="h-5 w-5 text-accent6-600 dark:text-accent6-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="font-medium text-theme">Invoice Total</p>
+								<p class="text-sm text-theme-muted">Combined total</p>
+							</div>
+						</div>
+						<p class="text-xl font-bold text-accent6-600 dark:text-accent6-400">
+							{formatCurrency(invoiceTotal)}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Revenues Section -->
+			<div class="mb-6 card-padded">
+				<div class="mb-4 flex items-center justify-between">
+					<h3 class="text-sm font-medium text-theme-muted">Revenues</h3>
+					<button
+						onclick={() => (showAddRevenuesModal = true)}
+						class="flex items-center gap-1.5 rounded-lg bg-secondary-500/10 px-3 py-1.5 text-sm font-medium text-secondary-600 transition-colors hover:bg-secondary-500/20 dark:text-secondary-400"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Add Revenues
+					</button>
+				</div>
+
+				{#if invoice.revenues.length === 0}
+					<p class="text-sm text-theme-muted italic">No revenues added to this invoice.</p>
+				{:else}
+					<div class="space-y-2">
+						{#each sortedRevenues as revenue (revenue.id)}
+							<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+								<div class="flex items-start justify-between gap-2">
+									<div class="min-w-0 flex-1">
+										<p class="text-sm font-medium text-theme">
+											{getAccountNameForRevenue(revenue.accountId)}
+										</p>
+										<p class="text-xs text-theme-muted">
+											{formatShortDate(revenue.startDate)}
+											{#if revenue.endDate}
+												- {formatShortDate(revenue.endDate)}
+											{:else}
+												- Ongoing
+											{/if}
+										</p>
+									</div>
+									<div class="flex items-center gap-2">
+										{#if revenue.waveServiceId}
+											<span class="badge-primary">Linked</span>
+										{/if}
+										<span class="text-sm font-semibold text-secondary-600 dark:text-secondary-400">
+											{formatCurrency(revenue.amount)}
+										</span>
+										<button
+											onclick={() => removeRevenue(revenue.id)}
+											class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+											title="Remove revenue"
+										>
+											<svg
+												class="h-4 w-4"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Projects Section -->
+			<div class="mb-6 card-padded">
+				<div class="mb-4 flex items-center justify-between">
+					<h3 class="text-sm font-medium text-theme-muted">Projects</h3>
+					<button
+						onclick={() => (showAddProjectsModal = true)}
+						class="flex items-center gap-1.5 rounded-lg bg-accent-500/10 px-3 py-1.5 text-sm font-medium text-accent-600 transition-colors hover:bg-accent-500/20 dark:text-accent-400"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Add Projects
+					</button>
+				</div>
+
+				{#if invoice.projects.length === 0}
+					<p class="text-sm text-theme-muted italic">No projects added to this invoice.</p>
+				{:else}
+					<div class="space-y-2">
+						{#each sortedProjects as project (project.id)}
+							<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+								<div class="flex items-start justify-between gap-2">
+									<div class="min-w-0 flex-1">
+										<p class="text-sm font-medium text-theme">{getProjectDisplayName(project)}</p>
+										<p class="text-xs text-theme-muted">{formatShortDate(project.date)}</p>
+									</div>
+									<div class="flex items-center gap-2">
+										{#if project.waveServiceId}
+											<span class="badge-primary">Linked</span>
+										{/if}
+										<span class="text-sm font-semibold text-accent-600 dark:text-accent-400">
+											{formatCurrency(project.amount)}
+										</span>
+										<button
+											onclick={() => removeProject(project.id)}
+											class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+											title="Remove project"
+										>
+											<svg
+												class="h-4 w-4"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+										</button>
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Invoice Details Card -->
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Invoice Details</h3>
+
+				<div class="space-y-4">
+					<!-- Customer -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent6-500/20">
+								<svg
+									class="h-5 w-5 text-accent6-600 dark:text-accent6-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Customer</p>
+								<p class="font-medium text-theme">{customerName}</p>
+							</div>
+						</div>
+					</div>
+
+					<!-- Invoice Date -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/20">
+								<svg
+									class="h-5 w-5 text-primary-600 dark:text-primary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Invoice Date</p>
+								<p class="font-medium text-theme">{formatDate(invoice.date)}</p>
+							</div>
+						</div>
+					</div>
+
+					<!-- Payment Info (if paid) -->
+					{#if invoice.status === 'PAID'}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-success-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-success-600 dark:text-success-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="text-sm text-theme-muted">Date Paid</p>
+									<p class="font-medium text-success-600 dark:text-success-400">
+										{formatDate(invoice.datePaid)}
+									</p>
+								</div>
+							</div>
+						</div>
+
+						<div class="flex items-center justify-between py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="text-sm text-theme-muted">Payment Method</p>
+									<p class="font-medium text-theme">{getPaymentTypeLabel(invoice.paymentType)}</p>
+								</div>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Danger Zone -->
+			<div class="danger-zone">
+				<h2 class="danger-zone-title">Danger Zone</h2>
+				<p class="danger-zone-text">
+					Deleting this invoice will permanently remove it. This action cannot be undone.
+				</p>
+				<button onclick={() => (showDeleteModal = true)} class="btn-danger">
+					Delete Invoice
+				</button>
+			</div>
+		{:else if activeTab === 'wave'}
+			<!-- Wave Tab Content -->
+			{#if hasWaveInvoice && waveInvoice}
+				<!-- Hidden form for approving Wave invoice -->
+				<form
+					bind:this={approveWaveInvoiceFormRef}
+					method="POST"
+					action="?/approveWaveInvoice"
+					use:enhance={() => {
+						isApprovingWaveInvoice = true;
+						return async ({ result }) => {
+							isApprovingWaveInvoice = false;
+							if (result.type === 'failure') {
+								const errorMsg = result.data?.error;
+								alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to approve invoice');
+							} else if (result.type === 'success') {
+								await invalidateAll();
+							}
+						};
+					}}
+					class="hidden"
+				>
+					<input type="hidden" name="invoiceId" value={waveInvoice.id} />
+				</form>
+
+				<!-- Hidden form for sending Wave invoice -->
+				<form
+					bind:this={sendWaveInvoiceFormRef}
+					method="POST"
+					action="?/sendWaveInvoice"
+					use:enhance={() => {
+						isSendingWaveInvoice = true;
+						return async ({ result }) => {
+							isSendingWaveInvoice = false;
+							if (result.type === 'failure') {
+								const errorMsg = result.data?.error;
+								alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to send invoice');
+							} else if (result.type === 'success') {
+								await invalidateAll();
+							}
+						};
+					}}
+					class="hidden"
+				>
+					<input type="hidden" name="invoiceId" value={waveInvoice.id} />
+					<input type="hidden" name="nexusInvoiceId" value={invoice.id} />
+					<input type="hidden" name="customerEmail" value={waveInvoice.customer.email ?? ''} />
+				</form>
+
+				<!-- Hidden form for deleting Wave invoice -->
+				<form
+					bind:this={deleteWaveInvoiceFormRef}
+					method="POST"
+					action="?/deleteWaveInvoice"
+					use:enhance={() => {
+						isDeletingWaveInvoice = true;
+						return async ({ result }) => {
+							isDeletingWaveInvoice = false;
+							if (result.type === 'failure') {
+								const errorMsg = result.data?.error;
+								alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to delete invoice');
+							} else if (result.type === 'success') {
+								await invalidateAll();
+							}
+						};
+					}}
+					class="hidden"
+				>
+					<input type="hidden" name="waveInvoiceId" value={waveInvoice.id} />
+					<input type="hidden" name="nexusInvoiceId" value={invoice.id} />
+				</form>
+
+				{#if isEditingWaveInvoice}
+					<!-- Wave Invoice Edit Form -->
+					<WaveInvoiceEditForm
+						{waveInvoice}
+						{waveProducts}
+						onSuccess={handleEditWaveInvoiceSuccess}
+						onCancel={handleEditWaveInvoiceCancel}
+					/>
+				{:else}
+					<!-- Wave Invoice Preview -->
+					<WaveInvoicePreview
+						{waveInvoice}
+						onSend={handleSendWaveInvoice}
+						onApprove={handleApproveWaveInvoice}
+						onRefresh={handleRefreshWaveInvoice}
+						onEdit={handleEditWaveInvoice}
+						onDelete={handleDeleteWaveInvoice}
+						isSending={isSendingWaveInvoice}
+						isApproving={isApprovingWaveInvoice}
+						isRefreshing={isRefreshingWaveInvoice}
+						isDeleting={isDeletingWaveInvoice}
+					/>
+				{/if}
+			{:else if showWaveInvoiceForm}
+				<!-- Wave Invoice Creation Form -->
+				<WaveInvoiceForm
+					{invoice}
+					waveCustomerId={customerData().waveCustomerId ?? ''}
+					revenues={invoice.revenues}
+					projects={invoice.projects}
+					{waveProducts}
+					onSuccess={handleWaveInvoiceSuccess}
+					onCancel={handleWaveInvoiceCancel}
+				/>
+			{:else}
+				<!-- Wave Validation Section -->
+				<WaveValidationSection
+					customer={customerData()}
+					revenues={invoice.revenues}
+					projects={invoice.projects}
+					{waveProducts}
+					{accounts}
+					onLinkCustomer={handleLinkCustomer}
+					onLinkRevenue={handleLinkRevenue}
+					onLinkProject={handleLinkProject}
+					onCreateInvoice={handleCreateWaveInvoice}
+				/>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete Invoice"
+	message="Are you sure you want to delete this invoice? This action cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
+
+<AddRevenuesModal bind:open={showAddRevenuesModal} {invoice} {accounts} onSuccess={handleSuccess} />
+
+<AddProjectsModal
+	bind:open={showAddProjectsModal}
+	{invoice}
+	{accountLookup}
+	onSuccess={handleSuccess}
+/>
+
+<!-- Wave Link Product Modal -->
+{#if linkingEntity}
+	<WaveLinkProductModal
+		open={showLinkProductModal}
+		entityType={linkingEntity.type}
+		entityId={linkingEntity.id}
+		entityDescription={linkingEntity.description}
+		currentWaveServiceId={linkingEntity.currentWaveServiceId}
+		{waveProducts}
+		onSuccess={handleLinkProductSuccess}
+		onCancel={handleLinkProductCancel}
+	/>
+{/if}
diff --git a/src/routes/admin/invoices/wave/+page.server.ts b/src/routes/admin/invoices/wave/+page.server.ts
new file mode 100644
index 0000000..7484d58
--- /dev/null
+++ b/src/routes/admin/invoices/wave/+page.server.ts
@@ -0,0 +1,593 @@
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { fail } from '@sveltejs/kit';
+import {
+	createWaveProduct,
+	updateWaveProduct,
+	archiveWaveProduct,
+	createWaveCustomer,
+	updateWaveCustomer,
+	deleteWaveCustomer
+} from '$lib/graphql/wave/mutations';
+import type { PageServerLoad, Actions } from './$types';
+
+const WAVE_API_URL = 'https://gql.waveapps.com/graphql/public';
+
+const GET_ALL_DATA_QUERY = `
+	query GetAllWaveData($businessId: ID!, $invoicePage: Int, $invoicePageSize: Int, $productPageSize: Int, $customerPageSize: Int) {
+		business(id: $businessId) {
+			id
+			name
+			accounts(types: [INCOME], isArchived: false) {
+				edges {
+					node {
+						id
+						name
+						subtype {
+							value
+						}
+					}
+				}
+			}
+			invoices(page: $invoicePage, pageSize: $invoicePageSize, sort: [INVOICE_DATE_DESC]) {
+				edges {
+					node {
+						id
+						invoiceNumber
+						invoiceDate
+						dueDate
+						status
+						title
+						customer {
+							id
+							name
+							email
+						}
+						amountDue {
+							value
+							currency {
+								code
+								symbol
+							}
+						}
+						amountPaid {
+							value
+							currency {
+								code
+								symbol
+							}
+						}
+						total {
+							value
+							currency {
+								code
+								symbol
+							}
+						}
+						lastSentAt
+						lastViewedAt
+					}
+				}
+				pageInfo {
+					currentPage
+					totalPages
+					totalCount
+				}
+			}
+			products(pageSize: $productPageSize, sort: [NAME_ASC], isArchived: false) {
+				edges {
+					node {
+						id
+						name
+						description
+						unitPrice
+						isSold
+						isBought
+						isArchived
+						incomeAccount {
+							id
+							name
+						}
+						expenseAccount {
+							id
+							name
+						}
+						defaultSalesTaxes {
+							id
+							name
+							abbreviation
+						}
+						createdAt
+						modifiedAt
+					}
+				}
+				pageInfo {
+					currentPage
+					totalPages
+					totalCount
+				}
+			}
+			archivedProducts: products(pageSize: $productPageSize, sort: [NAME_ASC], isArchived: true) {
+				edges {
+					node {
+						id
+						name
+						description
+						unitPrice
+						isSold
+						isBought
+						isArchived
+						incomeAccount {
+							id
+							name
+						}
+						expenseAccount {
+							id
+							name
+						}
+						defaultSalesTaxes {
+							id
+							name
+							abbreviation
+						}
+						createdAt
+						modifiedAt
+					}
+				}
+			}
+			customers(pageSize: $customerPageSize, sort: [NAME_ASC]) {
+				edges {
+					node {
+						id
+						name
+						firstName
+						lastName
+						email
+						phone
+						mobile
+						currency {
+							code
+							symbol
+						}
+						address {
+							addressLine1
+							addressLine2
+							city
+							province {
+								code
+								name
+							}
+							country {
+								code
+								name
+							}
+							postalCode
+						}
+						internalNotes
+						outstandingAmount {
+							value
+							currency {
+								code
+							}
+						}
+						overdueAmount {
+							value
+							currency {
+								code
+							}
+						}
+						createdAt
+						modifiedAt
+						isArchived
+					}
+				}
+				pageInfo {
+					currentPage
+					totalPages
+					totalCount
+				}
+			}
+		}
+	}
+`;
+
+interface WaveInvoice {
+	id: string;
+	invoiceNumber: string;
+	invoiceDate: string;
+	dueDate: string;
+	status: string;
+	title: string | null;
+	customer: {
+		id: string;
+		name: string;
+		email: string | null;
+	};
+	amountDue: {
+		value: string;
+		currency: {
+			code: string;
+			symbol: string;
+		};
+	};
+	amountPaid: {
+		value: string;
+		currency: {
+			code: string;
+			symbol: string;
+		};
+	};
+	total: {
+		value: string;
+		currency: {
+			code: string;
+			symbol: string;
+		};
+	};
+	lastSentAt: string | null;
+	lastViewedAt: string | null;
+}
+
+interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: string;
+	isSold: boolean;
+	isBought: boolean;
+	isArchived: boolean;
+	incomeAccount: { id: string; name: string } | null;
+	expenseAccount: { id: string; name: string } | null;
+	defaultSalesTaxes: Array<{ id: string; name: string; abbreviation: string }>;
+	createdAt: string;
+	modifiedAt: string;
+}
+
+interface WaveCustomer {
+	id: string;
+	name: string;
+	firstName: string | null;
+	lastName: string | null;
+	email: string | null;
+	phone: string | null;
+	mobile: string | null;
+	currency: { code: string; symbol: string } | null;
+	address: {
+		addressLine1: string | null;
+		addressLine2: string | null;
+		city: string | null;
+		province: { code: string; name: string } | null;
+		country: { code: string; name: string } | null;
+		postalCode: string | null;
+	} | null;
+	internalNotes: string | null;
+	outstandingAmount: { value: string; currency: { code: string } };
+	overdueAmount: { value: string; currency: { code: string } };
+	createdAt: string;
+	modifiedAt: string;
+	isArchived: boolean | null;
+}
+
+interface WaveAccount {
+	id: string;
+	name: string;
+	subtype: { value: string };
+}
+
+interface WaveResponse {
+	data?: {
+		business: {
+			id: string;
+			name: string;
+			accounts: {
+				edges: Array<{ node: WaveAccount }>;
+			};
+			invoices: {
+				edges: Array<{ node: WaveInvoice }>;
+				pageInfo: {
+					currentPage: number;
+					totalPages: number;
+					totalCount: number;
+				};
+			};
+			products: {
+				edges: Array<{ node: WaveProduct }>;
+				pageInfo: {
+					currentPage: number;
+					totalPages: number;
+					totalCount: number;
+				};
+			};
+			archivedProducts: {
+				edges: Array<{ node: WaveProduct }>;
+			};
+			customers: {
+				edges: Array<{ node: WaveCustomer }>;
+				pageInfo: {
+					currentPage: number;
+					totalPages: number;
+					totalCount: number;
+				};
+			};
+		};
+	};
+	errors?: Array<{ message: string }>;
+}
+
+export const load: PageServerLoad = async ({ url }) => {
+	const page = parseInt(url.searchParams.get('page') ?? '1', 10);
+	const pageSize = 20;
+
+	try {
+		const response = await fetch(WAVE_API_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${WAVE_ACCESS_TOKEN}`
+			},
+			body: JSON.stringify({
+				query: GET_ALL_DATA_QUERY,
+				variables: {
+					businessId: PUBLIC_WAVE_BUSINESS_ID,
+					invoicePage: page,
+					invoicePageSize: pageSize,
+					productPageSize: 100,
+					customerPageSize: 100
+				}
+			})
+		});
+
+		const result: WaveResponse = await response.json();
+
+		if (result.errors) {
+			console.error('Wave API errors:', result.errors);
+			return {
+				invoices: [],
+				products: [],
+				archivedProducts: [],
+				customers: [],
+				incomeAccounts: [],
+				invoicePageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+				productPageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+				customerPageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+				businessName: null,
+				error: result.errors[0]?.message ?? 'Unknown error'
+			};
+		}
+
+		const business = result.data?.business;
+
+		// Extract income accounts
+		const incomeAccounts = business?.accounts.edges.map((e) => e.node) ?? [];
+
+		// Transform products to have unitPrice as number
+		const products = (business?.products.edges.map((e) => e.node) ?? []).map((p) => ({
+			...p,
+			unitPrice: parseFloat(p.unitPrice)
+		}));
+
+		// Transform archived products to have unitPrice as number
+		const archivedProducts = (business?.archivedProducts.edges.map((e) => e.node) ?? []).map(
+			(p) => ({
+				...p,
+				unitPrice: parseFloat(p.unitPrice)
+			})
+		);
+
+		// Filter out archived customers
+		const customers = (business?.customers.edges.map((e) => e.node) ?? []).filter(
+			(c) => !c.isArchived
+		);
+
+		return {
+			invoices: business?.invoices.edges.map((e) => e.node) ?? [],
+			products,
+			archivedProducts,
+			customers,
+			incomeAccounts,
+			invoicePageInfo: business?.invoices.pageInfo ?? {
+				currentPage: 1,
+				totalPages: 1,
+				totalCount: 0
+			},
+			productPageInfo: business?.products.pageInfo ?? {
+				currentPage: 1,
+				totalPages: 1,
+				totalCount: 0
+			},
+			customerPageInfo: business?.customers.pageInfo ?? {
+				currentPage: 1,
+				totalPages: 1,
+				totalCount: 0
+			},
+			businessName: business?.name ?? null,
+			error: null
+		};
+	} catch (err) {
+		console.error('Wave API fetch error:', err);
+		return {
+			invoices: [],
+			products: [],
+			archivedProducts: [],
+			customers: [],
+			incomeAccounts: [],
+			invoicePageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+			productPageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+			customerPageInfo: { currentPage: 1, totalPages: 1, totalCount: 0 },
+			businessName: null,
+			error: err instanceof Error ? err.message : 'Failed to fetch data'
+		};
+	}
+};
+
+export const actions: Actions = {
+	// Product actions
+	createProduct: async ({ request }) => {
+		const formData = await request.formData();
+		const name = formData.get('name') as string;
+		const unitPrice = parseFloat(formData.get('unitPrice') as string);
+		const description = (formData.get('description') as string) || undefined;
+		const incomeAccountId = (formData.get('incomeAccountId') as string) || undefined;
+
+		if (!name || isNaN(unitPrice)) {
+			return fail(400, { error: 'Name and unit price are required' });
+		}
+
+		const result = await createWaveProduct({ name, unitPrice, description, incomeAccountId });
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to create product' });
+		}
+
+		return { success: true, product: result.product };
+	},
+
+	updateProduct: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+		const name = (formData.get('name') as string) || undefined;
+		const unitPriceStr = formData.get('unitPrice') as string;
+		const unitPrice = unitPriceStr ? parseFloat(unitPriceStr) : undefined;
+		const description = (formData.get('description') as string) || undefined;
+		const incomeAccountId = (formData.get('incomeAccountId') as string) || undefined;
+
+		if (!id) {
+			return fail(400, { error: 'Product ID is required' });
+		}
+
+		const result = await updateWaveProduct({ id, name, unitPrice, description, incomeAccountId });
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to update product' });
+		}
+
+		return { success: true, product: result.product };
+	},
+
+	archiveProduct: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+
+		if (!id) {
+			return fail(400, { error: 'Product ID is required' });
+		}
+
+		const result = await archiveWaveProduct(id);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to archive product' });
+		}
+
+		return { success: true };
+	},
+
+	// Customer actions
+	createCustomer: async ({ request }) => {
+		const formData = await request.formData();
+		const name = formData.get('name') as string;
+		const firstName = (formData.get('firstName') as string) || undefined;
+		const lastName = (formData.get('lastName') as string) || undefined;
+		const email = (formData.get('email') as string) || undefined;
+		const phone = (formData.get('phone') as string) || undefined;
+		const internalNotes = (formData.get('internalNotes') as string) || undefined;
+
+		// Address fields
+		const addressLine1 = (formData.get('addressLine1') as string) || undefined;
+		const addressLine2 = (formData.get('addressLine2') as string) || undefined;
+		const city = (formData.get('city') as string) || undefined;
+		const provinceCode = (formData.get('provinceCode') as string) || undefined;
+		const countryCode = (formData.get('countryCode') as string) || undefined;
+		const postalCode = (formData.get('postalCode') as string) || undefined;
+
+		if (!name) {
+			return fail(400, { error: 'Name is required' });
+		}
+
+		// Build address object if any address fields are provided
+		const hasAddressFields =
+			addressLine1 || addressLine2 || city || provinceCode || countryCode || postalCode;
+		const address = hasAddressFields
+			? { addressLine1, addressLine2, city, provinceCode, countryCode, postalCode }
+			: undefined;
+
+		const result = await createWaveCustomer({
+			name,
+			firstName,
+			lastName,
+			email,
+			phone,
+			address,
+			internalNotes
+		});
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to create customer' });
+		}
+
+		return { success: true, customer: result.customer };
+	},
+
+	updateCustomer: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+		const name = (formData.get('name') as string) || undefined;
+		const firstName = (formData.get('firstName') as string) || undefined;
+		const lastName = (formData.get('lastName') as string) || undefined;
+		const email = (formData.get('email') as string) || undefined;
+		const phone = (formData.get('phone') as string) || undefined;
+		const internalNotes = (formData.get('internalNotes') as string) || undefined;
+
+		// Address fields
+		const addressLine1 = (formData.get('addressLine1') as string) || undefined;
+		const addressLine2 = (formData.get('addressLine2') as string) || undefined;
+		const city = (formData.get('city') as string) || undefined;
+		const provinceCode = (formData.get('provinceCode') as string) || undefined;
+		const countryCode = (formData.get('countryCode') as string) || undefined;
+		const postalCode = (formData.get('postalCode') as string) || undefined;
+
+		if (!id) {
+			return fail(400, { error: 'Customer ID is required' });
+		}
+
+		// Build address object if any address fields are provided
+		const hasAddressFields =
+			addressLine1 || addressLine2 || city || provinceCode || countryCode || postalCode;
+		const address = hasAddressFields
+			? { addressLine1, addressLine2, city, provinceCode, countryCode, postalCode }
+			: undefined;
+
+		const result = await updateWaveCustomer({
+			id,
+			name,
+			firstName,
+			lastName,
+			email,
+			phone,
+			address,
+			internalNotes
+		});
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to update customer' });
+		}
+
+		return { success: true, customer: result.customer };
+	},
+
+	deleteCustomer: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+
+		if (!id) {
+			return fail(400, { error: 'Customer ID is required' });
+		}
+
+		const result = await deleteWaveCustomer(id);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to delete customer' });
+		}
+
+		return { success: true };
+	}
+};
diff --git a/src/routes/admin/invoices/wave/+page.svelte b/src/routes/admin/invoices/wave/+page.svelte
new file mode 100644
index 0000000..f20f111
--- /dev/null
+++ b/src/routes/admin/invoices/wave/+page.svelte
@@ -0,0 +1,508 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import WaveTabs, { type WaveTab } from '$lib/components/admin/invoices/wave/WaveTabs.svelte';
+	import WaveProductsTab from '$lib/components/admin/invoices/wave/WaveProductsTab.svelte';
+	import WaveCustomersTab from '$lib/components/admin/invoices/wave/WaveCustomersTab.svelte';
+	import type { WaveProduct, WaveCustomer } from '$lib/components/admin/invoices/wave/types';
+	import { SvelteDate } from 'svelte/reactivity';
+	import { enhance } from '$app/forms';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let invoices = $derived(data.invoices);
+	let products = $derived(data.products as WaveProduct[]);
+	let archivedProducts = $derived(data.archivedProducts as WaveProduct[]);
+	let customers = $derived(data.customers as WaveCustomer[]);
+	let incomeAccounts = $derived(data.incomeAccounts);
+	let invoicePageInfo = $derived(data.invoicePageInfo);
+
+	// Tab state
+	let activeTab = $state<WaveTab>('invoices');
+
+	// Delete modal state
+	let showDeleteModal = $state(false);
+	let deleteType = $state<'product' | 'customer'>('product');
+	let deleteItem = $state<WaveProduct | WaveCustomer | null>(null);
+	let deleteFormRef = $state<HTMLFormElement | null>(null);
+	let isDeleting = $state(false);
+
+	// Invoice filters (existing functionality)
+	let searchQuery = $state('');
+	let selectedStatus = $state<string>('');
+
+	let filteredInvoices = $derived.by(() => {
+		let filtered = invoices;
+		if (selectedStatus) {
+			filtered = filtered.filter((i) => i.status === selectedStatus);
+		}
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			filtered = filtered.filter((i) => {
+				const customerName = i.customer.name.toLowerCase();
+				const invoiceNumber = i.invoiceNumber.toLowerCase();
+				return customerName.includes(query) || invoiceNumber.includes(query);
+			});
+		}
+		return filtered;
+	});
+
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatCurrency(value: string, symbol: string): string {
+		const num = parseFloat(value.replace(/,/g, ''));
+		return `${symbol}${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
+
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+			case 'SAVED':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SENT':
+				return 'bg-primary-500/10 text-primary-600 dark:text-primary-400';
+			case 'VIEWED':
+				return 'bg-accent2-500/10 text-accent2-600 dark:text-accent2-400';
+			case 'PAID':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'PARTIAL':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			case 'OVERDUE':
+				return 'bg-error-500/10 text-error-600 dark:text-error-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'SAVED':
+				return 'Saved';
+			case 'SENT':
+				return 'Sent';
+			case 'VIEWED':
+				return 'Viewed';
+			case 'PAID':
+				return 'Paid';
+			case 'PARTIAL':
+				return 'Partial';
+			case 'OVERDUE':
+				return 'Overdue';
+			default:
+				return status;
+		}
+	}
+
+	function isOverdue(dueDate: string, status: string): boolean {
+		if (status === 'PAID') return false;
+		const due = new Date(dueDate + 'T00:00:00');
+		const today = new SvelteDate();
+		today.setHours(0, 0, 0, 0);
+		return due < today;
+	}
+
+	function handleArchiveProduct(product: WaveProduct) {
+		deleteType = 'product';
+		deleteItem = product;
+		showDeleteModal = true;
+	}
+
+	function handleDeleteCustomer(customer: WaveCustomer) {
+		deleteType = 'customer';
+		deleteItem = customer;
+		showDeleteModal = true;
+	}
+
+	async function handleConfirmDelete() {
+		if (!deleteItem) return;
+		deleteFormRef?.requestSubmit();
+	}
+
+	function handleCancelDelete() {
+		showDeleteModal = false;
+		deleteItem = null;
+	}
+
+	// Computed values for delete modal
+	let deleteTitle = $derived(deleteType === 'product' ? 'Archive Product' : 'Delete Customer');
+	let deleteMessage = $derived.by(() => {
+		const name = deleteItem?.name ?? '';
+		if (deleteType === 'product') {
+			return `Are you sure you want to archive "${name}"? This will hide it from the active products list.`;
+		}
+		return `Are you sure you want to delete "${name}"? This action cannot be undone.`;
+	});
+	let deleteConfirmLabel = $derived(deleteType === 'product' ? 'Archive' : 'Delete');
+</script>
+
+<svelte:head>
+	<title>Wave - Admin - Nexus</title>
+</svelte:head>
+
+<!-- Hidden forms for delete actions -->
+<form
+	bind:this={deleteFormRef}
+	method="POST"
+	action={deleteType === 'product' ? '?/archiveProduct' : '?/deleteCustomer'}
+	use:enhance={() => {
+		isDeleting = true;
+		return async ({ result, update }) => {
+			isDeleting = false;
+			if (result.type === 'success') {
+				showDeleteModal = false;
+				deleteItem = null;
+				await update({ reset: false });
+			} else if (result.type === 'failure') {
+				showDeleteModal = false;
+				deleteItem = null;
+			}
+		};
+	}}
+	class="hidden"
+>
+	<input type="hidden" name="id" value={deleteItem?.id ?? ''} />
+</form>
+
+<!-- Delete Confirmation Modal -->
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title={deleteTitle}
+	message={deleteMessage}
+	confirmLabel={deleteConfirmLabel}
+	loading={isDeleting}
+	onconfirm={handleConfirmDelete}
+	oncancel={handleCancelDelete}
+/>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin/invoices"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent6-600 md:text-3xl dark:text-accent6-400">
+							Wave
+						</h1>
+						<p class="mt-2 text-theme-secondary">
+							{#if data.businessName}
+								Managing <span class="font-medium">{data.businessName}</span>
+							{:else}
+								Manage your Wave accounting data
+							{/if}
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Error State -->
+		{#if data.error}
+			<div class="mb-6 danger-zone">
+				<div class="flex items-start gap-3">
+					<svg
+						class="h-5 w-5 flex-shrink-0 text-error-500"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+					<div>
+						<h3 class="font-medium text-error-700 dark:text-error-400">Failed to load Wave data</h3>
+						<p class="mt-1 text-sm text-error-600 dark:text-error-300">{data.error}</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Tabs -->
+		<WaveTabs
+			{activeTab}
+			invoiceCount={invoicePageInfo.totalCount}
+			productCount={products.length}
+			customerCount={customers.length}
+			onTabChange={(tab) => (activeTab = tab)}
+		/>
+
+		<!-- Tab Content -->
+		{#if activeTab === 'invoices'}
+			<!-- Search and Filter -->
+			{#if invoices.length > 0 || searchQuery || selectedStatus}
+				<div class="mb-6 flex flex-col gap-4 sm:flex-row">
+					<div class="relative flex-1">
+						<svg
+							class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+						<input
+							type="text"
+							bind:value={searchQuery}
+							placeholder="Search by customer or invoice #..."
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
+						/>
+					</div>
+
+					<select
+						bind:value={selectedStatus}
+						class="rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500 sm:w-40"
+					>
+						<option value="">All Statuses</option>
+						<option value="DRAFT">Draft</option>
+						<option value="SAVED">Saved</option>
+						<option value="SENT">Sent</option>
+						<option value="VIEWED">Viewed</option>
+						<option value="PARTIAL">Partial</option>
+						<option value="PAID">Paid</option>
+						<option value="OVERDUE">Overdue</option>
+					</select>
+				</div>
+			{/if}
+
+			<!-- Invoices List -->
+			{#if filteredInvoices.length > 0}
+				<div class="space-y-4">
+					{#each filteredInvoices as invoice (invoice.id)}
+						{@const overdue = isOverdue(invoice.dueDate, invoice.status)}
+						<a href="/admin/invoices/wave/{invoice.id}" class="block card-invoice">
+							<div class="flex items-start justify-between gap-4">
+								<div class="min-w-0 flex-1 space-y-2">
+									<div class="flex flex-wrap items-center gap-3">
+										<h3 class="text-lg font-semibold text-accent6-600 dark:text-accent6-400">
+											{invoice.customer.name}
+										</h3>
+										<span
+											class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${overdue && invoice.status !== 'PAID' ? 'bg-error-500/10 text-error-600 dark:text-error-400' : getStatusClasses(invoice.status)}`}
+										>
+											{overdue && invoice.status !== 'PAID'
+												? 'Overdue'
+												: getStatusLabel(invoice.status)}
+										</span>
+									</div>
+
+									<div class="flex flex-wrap items-center gap-4 text-sm text-theme-secondary">
+										<span class="font-medium">#{invoice.invoiceNumber}</span>
+
+										<span class="flex items-center gap-1.5">
+											<svg
+												class="h-4 w-4"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+												/>
+											</svg>
+											{formatDate(invoice.invoiceDate)}
+										</span>
+
+										{#if invoice.dueDate}
+											<span
+												class="flex items-center gap-1.5"
+												class:text-error-600={overdue && invoice.status !== 'PAID'}
+												class:dark:text-error-400={overdue && invoice.status !== 'PAID'}
+											>
+												<svg
+													class="h-4 w-4"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+													/>
+												</svg>
+												Due {formatDate(invoice.dueDate)}
+											</span>
+										{/if}
+
+										{#if invoice.status === 'PAID'}
+											<span
+												class="flex items-center gap-1.5 text-success-600 dark:text-success-400"
+											>
+												<svg
+													class="h-4 w-4"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+													/>
+												</svg>
+												Paid
+											</span>
+										{/if}
+
+										{#if invoice.lastViewedAt}
+											<span
+												class="flex items-center gap-1.5 text-accent2-600 dark:text-accent2-400"
+											>
+												<svg
+													class="h-4 w-4"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Viewed
+											</span>
+										{/if}
+									</div>
+								</div>
+
+								<div class="flex-shrink-0 text-right">
+									<div class="text-lg font-semibold text-theme">
+										{formatCurrency(invoice.total.value, invoice.total.currency.symbol)}
+									</div>
+									{#if parseFloat(invoice.amountDue.value) > 0 && invoice.status !== 'PAID'}
+										<div class="text-sm text-theme-secondary">
+											{formatCurrency(invoice.amountDue.value, invoice.amountDue.currency.symbol)} due
+										</div>
+									{/if}
+								</div>
+							</div>
+						</a>
+					{/each}
+				</div>
+
+				<!-- Pagination -->
+				{#if invoicePageInfo.totalPages > 1}
+					<div class="mt-8 flex items-center justify-center gap-2">
+						{#if invoicePageInfo.currentPage > 1}
+							<a
+								href="?page={invoicePageInfo.currentPage - 1}"
+								class="rounded-lg border border-theme interactive bg-theme-card px-4 py-2 text-sm font-medium text-theme"
+							>
+								Previous
+							</a>
+						{/if}
+
+						<span class="px-4 text-sm text-theme-secondary">
+							Page {invoicePageInfo.currentPage} of {invoicePageInfo.totalPages}
+						</span>
+
+						{#if invoicePageInfo.currentPage < invoicePageInfo.totalPages}
+							<a
+								href="?page={invoicePageInfo.currentPage + 1}"
+								class="rounded-lg border border-theme interactive bg-theme-card px-4 py-2 text-sm font-medium text-theme"
+							>
+								Next
+							</a>
+						{/if}
+					</div>
+				{/if}
+			{:else if searchQuery || selectedStatus}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon text-accent6-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No Invoices Found</h2>
+					<p class="empty-state-text">
+						No invoices match your search criteria. Try adjusting your filters.
+					</p>
+				</div>
+			{:else if !data.error}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon text-accent6-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No Wave Invoices</h2>
+					<p class="empty-state-text">
+						There are no invoices in your Wave account yet. Create invoices in Wave to see them
+						here.
+					</p>
+				</div>
+			{/if}
+		{:else if activeTab === 'products'}
+			<WaveProductsTab
+				{products}
+				{archivedProducts}
+				{incomeAccounts}
+				onArchive={handleArchiveProduct}
+			/>
+		{:else if activeTab === 'customers'}
+			<WaveCustomersTab {customers} onDelete={handleDeleteCustomer} />
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/invoices/wave/[invoice]/+page.server.ts b/src/routes/admin/invoices/wave/[invoice]/+page.server.ts
new file mode 100644
index 0000000..e1824f0
--- /dev/null
+++ b/src/routes/admin/invoices/wave/[invoice]/+page.server.ts
@@ -0,0 +1,468 @@
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { error, fail } from '@sveltejs/kit';
+import {
+	deleteWaveInvoice,
+	sendWaveInvoice,
+	updateWaveInvoice,
+	approveWaveInvoice
+} from '$lib/graphql/wave/mutations';
+import type { PageServerLoad, Actions } from './$types';
+
+const WAVE_API_URL = 'https://gql.waveapps.com/graphql/public';
+
+const GET_PRODUCTS_QUERY = `
+	query GetProducts($businessId: ID!, $pageSize: Int!) {
+		business(id: $businessId) {
+			products(page: 1, pageSize: $pageSize, isSold: true, isArchived: false) {
+				edges {
+					node {
+						id
+						name
+						description
+						unitPrice
+						isArchived
+					}
+				}
+			}
+		}
+	}
+`;
+
+interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: number;
+	isArchived: boolean;
+}
+
+const GET_INVOICE_QUERY = `
+	query GetInvoice($businessId: ID!, $invoiceId: ID!) {
+		business(id: $businessId) {
+			id
+			invoice(id: $invoiceId) {
+				id
+				invoiceNumber
+				invoiceDate
+				dueDate
+				status
+				title
+				subhead
+				poNumber
+				memo
+				footer
+				pdfUrl
+				viewUrl
+				customer {
+					id
+					name
+					firstName
+					lastName
+					email
+					address {
+						addressLine1
+						addressLine2
+						city
+						province {
+							code
+							name
+						}
+						country {
+							code
+							name
+						}
+						postalCode
+					}
+				}
+				items {
+					product {
+						id
+						name
+					}
+					description
+					quantity
+					unitPrice
+					subtotal {
+						value
+						currency {
+							code
+						}
+					}
+					total {
+						value
+						currency {
+							code
+						}
+					}
+					taxes {
+						salesTax {
+							id
+							name
+							abbreviation
+						}
+						amount {
+							value
+							currency {
+								code
+							}
+						}
+					}
+				}
+				discounts {
+					... on FixedInvoiceDiscount {
+						name
+						amount
+					}
+					... on PercentageInvoiceDiscount {
+						name
+						percentage
+					}
+				}
+				subtotal {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				taxTotal {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				discountTotal {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				total {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				amountDue {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				amountPaid {
+					value
+					currency {
+						code
+						symbol
+					}
+				}
+				currency {
+					code
+					symbol
+					name
+				}
+				exchangeRate
+				createdAt
+				modifiedAt
+				lastSentAt
+				lastSentVia
+				lastViewedAt
+			}
+		}
+	}
+`;
+
+interface WaveInvoiceItem {
+	product: {
+		id: string;
+		name: string;
+	} | null;
+	description: string | null;
+	quantity: string;
+	unitPrice: string;
+	subtotal: {
+		value: string;
+		currency: { code: string };
+	};
+	total: {
+		value: string;
+		currency: { code: string };
+	};
+	taxes: Array<{
+		salesTax: {
+			id: string;
+			name: string;
+			abbreviation: string;
+		};
+		amount: {
+			value: string;
+			currency: { code: string };
+		};
+	}>;
+}
+
+interface WaveInvoiceDiscount {
+	name: string;
+	amount?: string;
+	percentage?: number;
+}
+
+interface WaveInvoice {
+	id: string;
+	invoiceNumber: string;
+	invoiceDate: string;
+	dueDate: string;
+	status: string;
+	title: string | null;
+	subhead: string | null;
+	poNumber: string | null;
+	memo: string | null;
+	footer: string | null;
+	pdfUrl: string | null;
+	viewUrl: string | null;
+	customer: {
+		id: string;
+		name: string;
+		firstName: string | null;
+		lastName: string | null;
+		email: string | null;
+		address: {
+			addressLine1: string | null;
+			addressLine2: string | null;
+			city: string | null;
+			province: { code: string; name: string } | null;
+			country: { code: string; name: string } | null;
+			postalCode: string | null;
+		} | null;
+	};
+	items: WaveInvoiceItem[];
+	discounts: WaveInvoiceDiscount[];
+	subtotal: { value: string; currency: { code: string; symbol: string } };
+	taxTotal: { value: string; currency: { code: string; symbol: string } };
+	discountTotal: { value: string; currency: { code: string; symbol: string } };
+	total: { value: string; currency: { code: string; symbol: string } };
+	amountDue: { value: string; currency: { code: string; symbol: string } };
+	amountPaid: { value: string; currency: { code: string; symbol: string } };
+	currency: { code: string; symbol: string; name: string };
+	exchangeRate: number | null;
+	createdAt: string;
+	modifiedAt: string;
+	lastSentAt: string | null;
+	lastSentVia: string | null;
+	lastViewedAt: string | null;
+}
+
+interface WaveResponse {
+	data?: {
+		business: {
+			id: string;
+			invoice: WaveInvoice | null;
+		};
+	};
+	errors?: Array<{ message: string }>;
+}
+
+async function fetchWaveProducts(): Promise<WaveProduct[]> {
+	try {
+		const response = await fetch(WAVE_API_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${WAVE_ACCESS_TOKEN}`
+			},
+			body: JSON.stringify({
+				query: GET_PRODUCTS_QUERY,
+				variables: {
+					businessId: PUBLIC_WAVE_BUSINESS_ID,
+					pageSize: 500
+				}
+			})
+		});
+
+		const result = await response.json();
+		if (result.errors) {
+			console.error('Wave API errors (products):', result.errors);
+			return [];
+		}
+
+		const edges = result.data?.business?.products?.edges ?? [];
+		return edges
+			.filter((edge: { node: WaveProduct | null }) => edge.node != null)
+			.map((edge: { node: WaveProduct }) => ({
+				id: edge.node.id,
+				name: edge.node.name,
+				description: edge.node.description,
+				unitPrice: parseFloat(String(edge.node.unitPrice)),
+				isArchived: edge.node.isArchived
+			}));
+	} catch (err) {
+		console.error('Wave API fetch error (products):', err);
+		return [];
+	}
+}
+
+export const load: PageServerLoad = async ({ params }) => {
+	const invoiceId = params.invoice;
+
+	// Fetch invoice and products in parallel
+	const [invoiceResponse, waveProducts] = await Promise.all([
+		fetch(WAVE_API_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${WAVE_ACCESS_TOKEN}`
+			},
+			body: JSON.stringify({
+				query: GET_INVOICE_QUERY,
+				variables: {
+					businessId: PUBLIC_WAVE_BUSINESS_ID,
+					invoiceId
+				}
+			})
+		}).catch((err) => {
+			console.error('Wave API fetch error:', err);
+			throw error(500, err instanceof Error ? err.message : 'Failed to fetch invoice');
+		}),
+		fetchWaveProducts()
+	]);
+
+	const result: WaveResponse = await invoiceResponse.json();
+
+	if (result.errors) {
+		console.error('Wave API errors:', result.errors);
+		throw error(500, result.errors[0]?.message ?? 'Failed to fetch invoice');
+	}
+
+	const invoice = result.data?.business?.invoice;
+
+	if (!invoice) {
+		throw error(404, 'Invoice not found');
+	}
+
+	return {
+		invoice,
+		waveProducts
+	};
+};
+
+export const actions: Actions = {
+	sendWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+		const customerEmail = formData.get('customerEmail') as string;
+
+		if (!invoiceId) {
+			return fail(400, { error: 'Missing invoice ID' });
+		}
+
+		if (!customerEmail) {
+			return fail(400, { error: 'Customer email is required to send invoice' });
+		}
+
+		const result = await sendWaveInvoice(invoiceId, [customerEmail]);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to send Wave invoice' });
+		}
+
+		return { success: true };
+	},
+
+	approveWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+
+		if (!invoiceId) {
+			return fail(400, { error: 'Missing invoice ID' });
+		}
+
+		const result = await approveWaveInvoice(invoiceId);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to approve Wave invoice' });
+		}
+
+		return { success: true };
+	},
+
+	updateWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+		const invoiceDate = formData.get('invoiceDate') as string;
+		const dueDate = formData.get('dueDate') as string;
+		const memo = formData.get('memo') as string | null;
+		const footer = formData.get('footer') as string | null;
+		const itemsJson = formData.get('items') as string;
+		const discountJson = formData.get('discount') as string | null;
+
+		if (!invoiceId || !itemsJson) {
+			return fail(400, { error: 'Missing required fields' });
+		}
+
+		let items;
+		try {
+			items = JSON.parse(itemsJson);
+		} catch {
+			return fail(400, { error: 'Invalid items data' });
+		}
+
+		// Parse discount if provided
+		let discounts;
+		if (discountJson) {
+			try {
+				const discount = JSON.parse(discountJson);
+				if (discount && discount.value > 0) {
+					discounts = [
+						{
+							discountType: discount.type as 'PERCENTAGE' | 'FIXED',
+							name: discount.name || 'Discount',
+							...(discount.type === 'PERCENTAGE'
+								? { percentage: discount.value.toString() }
+								: { amount: discount.value.toString() })
+						}
+					];
+				}
+			} catch {
+				// Ignore invalid discount data
+			}
+		}
+
+		const result = await updateWaveInvoice({
+			id: invoiceId,
+			invoiceDate,
+			dueDate,
+			items,
+			discounts,
+			memo: memo || undefined,
+			footer: footer || undefined
+		});
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to update Wave invoice' });
+		}
+
+		return { success: true };
+	},
+
+	deleteWaveInvoice: async ({ request }) => {
+		const formData = await request.formData();
+		const invoiceId = formData.get('invoiceId') as string;
+
+		if (!invoiceId) {
+			return fail(400, { error: 'Missing invoice ID' });
+		}
+
+		const result = await deleteWaveInvoice(invoiceId);
+
+		if (!result.success) {
+			return fail(400, { error: result.error || 'Failed to delete Wave invoice' });
+		}
+
+		return { success: true, deleted: true };
+	}
+};
diff --git a/src/routes/admin/invoices/wave/[invoice]/+page.svelte b/src/routes/admin/invoices/wave/[invoice]/+page.svelte
new file mode 100644
index 0000000..1ed401c
--- /dev/null
+++ b/src/routes/admin/invoices/wave/[invoice]/+page.svelte
@@ -0,0 +1,958 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import WaveInvoiceEditForm from '$lib/components/admin/invoices/wave/WaveInvoiceEditForm.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import { SvelteDate } from 'svelte/reactivity';
+	import { enhance } from '$app/forms';
+	import { goto, invalidateAll } from '$app/navigation';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let invoice = $derived(data.invoice);
+	let waveProducts = $derived(data.waveProducts);
+
+	// Edit mode state
+	let isEditing = $state(false);
+	let isSending = $state(false);
+	let isApproving = $state(false);
+	let isDeleting = $state(false);
+	let sendFormRef = $state<HTMLFormElement | null>(null);
+	let approveFormRef = $state<HTMLFormElement | null>(null);
+	let deleteFormRef = $state<HTMLFormElement | null>(null);
+
+	// Can edit DRAFT or SAVED invoices
+	let canEdit = $derived(invoice.status === 'DRAFT' || invoice.status === 'SAVED');
+	let canApprove = $derived(invoice.status === 'DRAFT');
+	let canSend = $derived(invoice.status === 'SAVED');
+	let canDelete = $derived(invoice.status === 'DRAFT' || invoice.status === 'SAVED');
+
+	function handleEdit() {
+		isEditing = true;
+	}
+
+	async function handleEditSuccess() {
+		isEditing = false;
+		await invalidateAll();
+	}
+
+	function handleEditCancel() {
+		isEditing = false;
+	}
+
+	function handleSend() {
+		sendFormRef?.requestSubmit();
+	}
+
+	function handleApprove() {
+		approveFormRef?.requestSubmit();
+	}
+
+	function handleDelete() {
+		if (confirm('Are you sure you want to delete this Wave invoice? This cannot be undone.')) {
+			deleteFormRef?.requestSubmit();
+		}
+	}
+
+	// Convert standalone page invoice format to WaveInvoice format for the edit form
+	let waveInvoiceForEdit = $derived({
+		id: invoice.id,
+		invoiceNumber: invoice.invoiceNumber,
+		invoiceDate: invoice.invoiceDate,
+		dueDate: invoice.dueDate,
+		status: invoice.status,
+		title: invoice.title ?? '',
+		subhead: invoice.subhead,
+		poNumber: invoice.poNumber,
+		memo: invoice.memo,
+		footer: invoice.footer,
+		pdfUrl: invoice.pdfUrl ?? '',
+		viewUrl: invoice.viewUrl ?? '',
+		customer: {
+			id: invoice.customer.id,
+			name: invoice.customer.name,
+			email: invoice.customer.email
+		},
+		items: invoice.items.map((item) => ({
+			product: {
+				id: item.product?.id ?? '',
+				name: item.product?.name ?? ''
+			},
+			description: item.description,
+			quantity: parseFloat(item.quantity),
+			unitPrice: parseFloat(item.unitPrice),
+			subtotal: item.subtotal,
+			total: item.total
+		})),
+		subtotal: invoice.subtotal,
+		taxTotal: invoice.taxTotal,
+		discountTotal: invoice.discountTotal,
+		total: invoice.total,
+		amountDue: invoice.amountDue,
+		amountPaid: invoice.amountPaid,
+		lastSentAt: invoice.lastSentAt,
+		lastSentVia: invoice.lastSentVia,
+		lastViewedAt: invoice.lastViewedAt
+	});
+
+	// Format date for display
+	function formatDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'long',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatShortDate(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	function formatDateTime(dateStr: string | null): string {
+		if (!dateStr) return '—';
+		return new Date(dateStr).toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number | null | undefined, symbol: string = '$'): string {
+		if (value === null || value === undefined) return `${symbol}0.00`;
+		// Remove commas before parsing (Wave API may return formatted strings)
+		const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : value;
+		return `${symbol}${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
+
+	// Get status badge classes
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SAVED':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'SENT':
+				return 'bg-primary-500/10 text-primary-600 dark:text-primary-400';
+			case 'VIEWED':
+				return 'bg-accent2-500/10 text-accent2-600 dark:text-accent2-400';
+			case 'PAID':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'PARTIAL':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			case 'OVERDUE':
+				return 'bg-error-500/10 text-error-600 dark:text-error-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	// Get status display label
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'DRAFT':
+				return 'Draft';
+			case 'SAVED':
+				return 'Saved';
+			case 'SENT':
+				return 'Sent';
+			case 'VIEWED':
+				return 'Viewed';
+			case 'PAID':
+				return 'Paid';
+			case 'PARTIAL':
+				return 'Partial';
+			case 'OVERDUE':
+				return 'Overdue';
+			default:
+				return status;
+		}
+	}
+
+	// Check if invoice is overdue
+	function isOverdue(dueDate: string, status: string): boolean {
+		if (status === 'PAID') return false;
+		const due = new Date(dueDate + 'T00:00:00');
+		const today = new SvelteDate();
+		today.setHours(0, 0, 0, 0);
+		return due < today;
+	}
+
+	// Format customer address
+	function formatAddress(
+		address: {
+			addressLine1: string | null;
+			addressLine2: string | null;
+			city: string | null;
+			province: { code: string; name: string } | null;
+			country: { code: string; name: string } | null;
+			postalCode: string | null;
+		} | null
+	): string[] {
+		if (!address) return [];
+		const lines: string[] = [];
+		if (address.addressLine1) lines.push(address.addressLine1);
+		if (address.addressLine2) lines.push(address.addressLine2);
+		const cityLine: string[] = [];
+		if (address.city) cityLine.push(address.city);
+		if (address.province?.code) cityLine.push(address.province.code);
+		if (address.postalCode) cityLine.push(address.postalCode);
+		if (cityLine.length > 0) lines.push(cityLine.join(', '));
+		if (address.country?.name) lines.push(address.country.name);
+		return lines;
+	}
+
+	let overdue = $derived(isOverdue(invoice.dueDate, invoice.status));
+	let addressLines = $derived(formatAddress(invoice.customer.address));
+</script>
+
+<svelte:head>
+	<title>Invoice #{invoice.invoiceNumber} - Wave - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={invoice.customer.name}
+			subtitle="Invoice #{invoice.invoiceNumber}"
+			colorScheme="accent6"
+			backHref="/admin/invoices/wave"
+		/>
+
+		<!-- Hidden form for approving Wave invoice -->
+		<form
+			bind:this={approveFormRef}
+			method="POST"
+			action="?/approveWaveInvoice"
+			use:enhance={() => {
+				isApproving = true;
+				return async ({ result }) => {
+					isApproving = false;
+					if (result.type === 'failure') {
+						const errorMsg = result.data?.error;
+						alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to approve invoice');
+					} else if (result.type === 'success') {
+						await invalidateAll();
+					}
+				};
+			}}
+			class="hidden"
+		>
+			<input type="hidden" name="invoiceId" value={invoice.id} />
+		</form>
+
+		<!-- Hidden form for sending Wave invoice -->
+		<form
+			bind:this={sendFormRef}
+			method="POST"
+			action="?/sendWaveInvoice"
+			use:enhance={() => {
+				isSending = true;
+				return async ({ result }) => {
+					isSending = false;
+					if (result.type === 'failure') {
+						const errorMsg = result.data?.error;
+						alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to send invoice');
+					} else if (result.type === 'success') {
+						await invalidateAll();
+					}
+				};
+			}}
+			class="hidden"
+		>
+			<input type="hidden" name="invoiceId" value={invoice.id} />
+			<input type="hidden" name="customerEmail" value={invoice.customer.email ?? ''} />
+		</form>
+
+		<!-- Hidden form for deleting Wave invoice -->
+		<form
+			bind:this={deleteFormRef}
+			method="POST"
+			action="?/deleteWaveInvoice"
+			use:enhance={() => {
+				isDeleting = true;
+				return async ({ result }) => {
+					isDeleting = false;
+					if (result.type === 'failure') {
+						const errorMsg = result.data?.error;
+						alert(typeof errorMsg === 'string' ? errorMsg : 'Failed to delete invoice');
+					} else if (result.type === 'success') {
+						await goto('/admin/invoices/wave');
+					}
+				};
+			}}
+			class="hidden"
+		>
+			<input type="hidden" name="invoiceId" value={invoice.id} />
+		</form>
+
+		{#if isEditing}
+			<!-- Edit Mode -->
+			<WaveInvoiceEditForm
+				waveInvoice={waveInvoiceForEdit}
+				{waveProducts}
+				onSuccess={handleEditSuccess}
+				onCancel={handleEditCancel}
+			/>
+		{:else}
+			<!-- Status & Actions Card -->
+			<div class="mb-6 card-padded">
+				<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+					<div class="flex flex-wrap items-center gap-3">
+						<span
+							class={`inline-flex items-center rounded-full px-3 py-1 text-sm font-medium ${overdue && invoice.status !== 'PAID' ? 'bg-error-500/10 text-error-600 dark:text-error-400' : getStatusClasses(invoice.status)}`}
+						>
+							{overdue && invoice.status !== 'PAID' ? 'Overdue' : getStatusLabel(invoice.status)}
+						</span>
+
+						{#if invoice.lastViewedAt}
+							<span
+								class="inline-flex items-center gap-1.5 text-sm text-accent2-600 dark:text-accent2-400"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+									/>
+								</svg>
+								Viewed
+							</span>
+						{/if}
+					</div>
+
+					<div class="flex flex-wrap items-center gap-2">
+						{#if invoice.pdfUrl}
+							<a
+								href={invoice.pdfUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="flex items-center gap-2 rounded-lg border border-theme interactive bg-theme px-3 py-2 text-sm font-medium text-theme"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+									/>
+								</svg>
+								Download PDF
+							</a>
+						{/if}
+
+						{#if canEdit}
+							<button
+								type="button"
+								onclick={handleEdit}
+								class="flex items-center gap-2 rounded-lg border border-theme interactive bg-theme px-3 py-2 text-sm font-medium text-theme"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+									/>
+								</svg>
+								Edit
+							</button>
+						{/if}
+
+						{#if canApprove}
+							<button
+								type="button"
+								onclick={handleApprove}
+								disabled={isApproving}
+								class="flex items-center gap-2 rounded-lg bg-success-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-success-600 disabled:cursor-not-allowed disabled:opacity-50"
+							>
+								{#if isApproving}
+									<IconSpinner class="h-4 w-4" />
+									<span>Approving...</span>
+								{:else}
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5 13l4 4L19 7"
+										/>
+									</svg>
+									Approve
+								{/if}
+							</button>
+						{/if}
+
+						{#if canSend}
+							<button
+								type="button"
+								onclick={handleSend}
+								disabled={isSending}
+								class="flex items-center gap-2 rounded-lg bg-primary-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+							>
+								{#if isSending}
+									<IconSpinner class="h-4 w-4" />
+									<span>Sending...</span>
+								{:else}
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+										/>
+									</svg>
+									Send Invoice
+								{/if}
+							</button>
+						{/if}
+
+						{#if canDelete}
+							<button
+								type="button"
+								onclick={handleDelete}
+								disabled={isDeleting}
+								class="flex items-center gap-2 rounded-lg bg-error-500/10 px-3 py-2 text-sm font-medium text-error-600 transition-colors hover:bg-error-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-error-400"
+							>
+								{#if isDeleting}
+									<IconSpinner class="h-4 w-4" />
+									<span>Deleting...</span>
+								{:else}
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+									Delete
+								{/if}
+							</button>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<!-- Invoice Summary Card -->
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Invoice Summary</h3>
+
+				<div class="space-y-4">
+					<!-- Subtotal -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20"
+							>
+								<svg
+									class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="font-medium text-theme">Subtotal</p>
+								<p class="text-sm text-theme-muted">
+									{invoice.items.length} line item{invoice.items.length !== 1 ? 's' : ''}
+								</p>
+							</div>
+						</div>
+						<p class="text-lg font-bold text-secondary-600 dark:text-secondary-400">
+							{formatCurrency(invoice.subtotal.value, invoice.subtotal.currency.symbol)}
+						</p>
+					</div>
+
+					<!-- Discount (if any) -->
+					{#if parseFloat(invoice.discountTotal.value) > 0}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-warning-600 dark:text-warning-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="font-medium text-theme">Discounts</p>
+									<p class="text-sm text-theme-muted">
+										{invoice.discounts.length} discount{invoice.discounts.length !== 1 ? 's' : ''}
+									</p>
+								</div>
+							</div>
+							<p class="text-lg font-bold text-warning-600 dark:text-warning-400">
+								-{formatCurrency(
+									invoice.discountTotal.value,
+									invoice.discountTotal.currency.symbol
+								)}
+							</p>
+						</div>
+					{/if}
+
+					<!-- Tax (if any) -->
+					{#if parseFloat(invoice.taxTotal.value) > 0}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/20">
+									<svg
+										class="h-5 w-5 text-accent-600 dark:text-accent-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="font-medium text-theme">Tax</p>
+									<p class="text-sm text-theme-muted">Sales tax</p>
+								</div>
+							</div>
+							<p class="text-lg font-bold text-accent-600 dark:text-accent-400">
+								{formatCurrency(invoice.taxTotal.value, invoice.taxTotal.currency.symbol)}
+							</p>
+						</div>
+					{/if}
+
+					<!-- Invoice Total -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent6-500/20">
+								<svg
+									class="h-5 w-5 text-accent6-600 dark:text-accent6-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="font-medium text-theme">Total</p>
+								<p class="text-sm text-theme-muted">{invoice.currency.name}</p>
+							</div>
+						</div>
+						<p class="text-xl font-bold text-accent6-600 dark:text-accent6-400">
+							{formatCurrency(invoice.total.value, invoice.total.currency.symbol)}
+						</p>
+					</div>
+
+					<!-- Amount Paid -->
+					{#if parseFloat(invoice.amountPaid.value) > 0}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-success-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-success-600 dark:text-success-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="font-medium text-theme">Amount Paid</p>
+									<p class="text-sm text-theme-muted">Received payments</p>
+								</div>
+							</div>
+							<p class="text-lg font-bold text-success-600 dark:text-success-400">
+								{formatCurrency(invoice.amountPaid.value, invoice.amountPaid.currency.symbol)}
+							</p>
+						</div>
+					{/if}
+
+					<!-- Amount Due -->
+					{#if parseFloat(invoice.amountDue.value) > 0}
+						<div class="flex items-center justify-between py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg {overdue
+										? 'bg-error-500/20'
+										: 'bg-primary-500/20'}"
+								>
+									<svg
+										class="h-5 w-5 {overdue
+											? 'text-error-600 dark:text-error-400'
+											: 'text-primary-600 dark:text-primary-400'}"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="font-medium text-theme">Amount Due</p>
+									<p
+										class="text-sm {overdue
+											? 'text-error-600 dark:text-error-400'
+											: 'text-theme-muted'}"
+									>
+										{overdue ? 'Overdue' : `Due ${formatShortDate(invoice.dueDate)}`}
+									</p>
+								</div>
+							</div>
+							<p
+								class="text-xl font-bold {overdue
+									? 'text-error-600 dark:text-error-400'
+									: 'text-primary-600 dark:text-primary-400'}"
+							>
+								{formatCurrency(invoice.amountDue.value, invoice.amountDue.currency.symbol)}
+							</p>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Line Items Section -->
+			{#if invoice.items.length > 0}
+				<div class="mb-6 card-padded">
+					<h3 class="mb-4 text-sm font-medium text-theme-muted">Line Items</h3>
+
+					<div class="space-y-2">
+						{#each invoice.items as item, index (index)}
+							<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+								<div class="flex items-start justify-between gap-2">
+									<div class="min-w-0 flex-1">
+										<p class="text-sm font-medium text-theme">
+											{item.product?.name ?? item.description ?? 'Item'}
+										</p>
+										{#if item.description && item.product?.name}
+											<p class="text-xs text-theme-muted">{item.description}</p>
+										{/if}
+										<p class="mt-1 text-xs text-theme-muted">
+											{parseFloat(item.quantity)} x {formatCurrency(
+												item.unitPrice,
+												invoice.currency.symbol
+											)}
+										</p>
+										{#if item.taxes.length > 0}
+											<p class="text-xs text-theme-muted">
+												Tax: {item.taxes.map((t) => t.salesTax.abbreviation).join(', ')}
+											</p>
+										{/if}
+									</div>
+									<div class="flex-shrink-0 text-right">
+										<span class="text-sm font-semibold text-accent6-600 dark:text-accent6-400">
+											{formatCurrency(item.total.value, invoice.currency.symbol)}
+										</span>
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Discounts Section -->
+			{#if invoice.discounts.length > 0}
+				<div class="mb-6 card-padded">
+					<h3 class="mb-4 text-sm font-medium text-theme-muted">Discounts</h3>
+
+					<div class="space-y-2">
+						{#each invoice.discounts as discount, index (index)}
+							<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+								<div class="flex items-center justify-between gap-2">
+									<p class="text-sm font-medium text-theme">{discount.name}</p>
+									<span class="text-sm font-semibold text-warning-600 dark:text-warning-400">
+										{#if discount.amount}
+											-{formatCurrency(discount.amount, invoice.currency.symbol)}
+										{:else if discount.percentage}
+											-{discount.percentage}%
+										{/if}
+									</span>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Invoice Details Card -->
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Invoice Details</h3>
+
+				<div class="space-y-4">
+					<!-- Customer -->
+					<div class="flex items-start justify-between border-b border-theme py-3">
+						<div class="flex items-start gap-3">
+							<div
+								class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent6-500/20"
+							>
+								<svg
+									class="h-5 w-5 text-accent6-600 dark:text-accent6-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Customer</p>
+								<p class="font-medium text-theme">{invoice.customer.name}</p>
+								{#if invoice.customer.email}
+									<p class="text-sm text-theme-muted">{invoice.customer.email}</p>
+								{/if}
+								{#if addressLines.length > 0}
+									<div class="mt-1 text-sm text-theme-muted">
+										{#each addressLines as line (line)}
+											<p>{line}</p>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+
+					<!-- Invoice Date -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/20">
+								<svg
+									class="h-5 w-5 text-primary-600 dark:text-primary-400"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Invoice Date</p>
+								<p class="font-medium text-theme">{formatDate(invoice.invoiceDate)}</p>
+							</div>
+						</div>
+					</div>
+
+					<!-- Due Date -->
+					<div class="flex items-center justify-between border-b border-theme py-3">
+						<div class="flex items-center gap-3">
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-lg {overdue &&
+								invoice.status !== 'PAID'
+									? 'bg-error-500/20'
+									: 'bg-accent-500/20'}"
+							>
+								<svg
+									class="h-5 w-5 {overdue && invoice.status !== 'PAID'
+										? 'text-error-600 dark:text-error-400'
+										: 'text-accent-600 dark:text-accent-400'}"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+							</div>
+							<div>
+								<p class="text-sm text-theme-muted">Due Date</p>
+								<p
+									class="font-medium {overdue && invoice.status !== 'PAID'
+										? 'text-error-600 dark:text-error-400'
+										: 'text-theme'}"
+								>
+									{formatDate(invoice.dueDate)}
+								</p>
+							</div>
+						</div>
+					</div>
+
+					<!-- PO Number (if any) -->
+					{#if invoice.poNumber}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent2-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-accent2-600 dark:text-accent2-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="text-sm text-theme-muted">PO Number</p>
+									<p class="font-medium text-theme">{invoice.poNumber}</p>
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Last Sent -->
+					{#if invoice.lastSentAt}
+						<div class="flex items-center justify-between border-b border-theme py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-primary-600 dark:text-primary-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="text-sm text-theme-muted">Last Sent</p>
+									<p class="font-medium text-theme">
+										{formatDateTime(invoice.lastSentAt)}
+										{#if invoice.lastSentVia}
+											<span class="text-theme-muted">via {invoice.lastSentVia}</span>
+										{/if}
+									</p>
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Last Viewed -->
+					{#if invoice.lastViewedAt}
+						<div class="flex items-center justify-between py-3">
+							<div class="flex items-center gap-3">
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent2-500/20"
+								>
+									<svg
+										class="h-5 w-5 text-accent2-600 dark:text-accent2-400"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										/>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+										/>
+									</svg>
+								</div>
+								<div>
+									<p class="text-sm text-theme-muted">Last Viewed</p>
+									<p class="font-medium text-accent2-600 dark:text-accent2-400">
+										{formatDateTime(invoice.lastViewedAt)}
+									</p>
+								</div>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Memo/Notes (if any) -->
+			{#if invoice.memo || invoice.footer}
+				<div class="mb-6 card-padded">
+					<h3 class="mb-4 text-sm font-medium text-theme-muted">Notes</h3>
+
+					{#if invoice.memo}
+						<div class="mb-4">
+							<p class="text-xs font-medium text-theme-muted">Memo</p>
+							<p class="mt-1 text-sm whitespace-pre-wrap text-theme">{invoice.memo}</p>
+						</div>
+					{/if}
+
+					{#if invoice.footer}
+						<div>
+							<p class="text-xs font-medium text-theme-muted">Footer</p>
+							<p class="mt-1 text-sm whitespace-pre-wrap text-theme">{invoice.footer}</p>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/notifications/+page.server.ts b/src/routes/admin/notifications/+page.server.ts
new file mode 100644
index 0000000..3999ea3
--- /dev/null
+++ b/src/routes/admin/notifications/+page.server.ts
@@ -0,0 +1,30 @@
+import { AdminNotificationRulesStore, AdminProfilesStore } from '$houdini';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { parent } = event;
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Gate to ADMIN only
+	if (me?.__typename !== 'TeamProfileType' || me.role !== 'ADMIN') {
+		throw error(403, 'Admin access required');
+	}
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	// Fetch notification rules and profiles in parallel
+	const [rules, profiles] = await Promise.all([
+		new AdminNotificationRulesStore().fetch(fetchParams),
+		new AdminProfilesStore().fetch(fetchParams)
+	]);
+
+	return {
+		rules,
+		profiles
+	};
+};
diff --git a/src/routes/admin/notifications/+page.svelte b/src/routes/admin/notifications/+page.svelte
new file mode 100644
index 0000000..b3d2674
--- /dev/null
+++ b/src/routes/admin/notifications/+page.svelte
@@ -0,0 +1,580 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import NotificationRuleForm from '$lib/components/admin/notifications/NotificationRuleForm.svelte';
+	import { DeleteNotificationRuleStore, UpdateNotificationRuleStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll } from '$app/navigation';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { AdminNotificationRules$result } from '$houdini';
+
+	type NotificationRule = AdminNotificationRules$result['notificationRules'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	let rules = $derived(data.rules?.data?.notificationRules ?? []);
+	// Convert profile IDs from Relay global IDs to raw UUIDs to match notification rule target IDs
+	let teamProfiles = $derived(
+		data.profiles?.data?.teamProfiles?.map((p) => ({
+			id: fromGlobalId(p.id),
+			fullName: p.fullName,
+			email: p.email,
+			role: p.role
+		})) ?? []
+	);
+	let customerProfiles = $derived(
+		data.profiles?.data?.customerProfiles?.map((p) => ({
+			id: fromGlobalId(p.id),
+			fullName: p.fullName,
+			email: p.email
+		})) ?? []
+	);
+
+	// Rules filter state
+	type StatusFilter = 'all' | 'active' | 'inactive';
+	let statusFilter = $state<StatusFilter>('all');
+	let searchQuery = $state('');
+
+	// Filtered rules
+	let filteredRules = $derived(
+		rules.filter((rule) => {
+			// Status filter
+			if (statusFilter === 'active' && !rule.isActive) return false;
+			if (statusFilter === 'inactive' && rule.isActive) return false;
+
+			// Search filter
+			if (searchQuery) {
+				const query = searchQuery.toLowerCase();
+				if (
+					!rule.name.toLowerCase().includes(query) &&
+					!rule.description?.toLowerCase().includes(query)
+				) {
+					return false;
+				}
+			}
+
+			return true;
+		})
+	);
+
+	// Edit state
+	let editingRule = $state<NotificationRule | null>(null);
+
+	// Delete state
+	let showDeleteModal = $state(false);
+	let isDeleting = $state(false);
+	let ruleToDelete = $state<{ id: string; name: string } | null>(null);
+
+	const deleteStore = new DeleteNotificationRuleStore();
+	const updateStore = new UpdateNotificationRuleStore();
+
+	function getChannelLabel(channel: string): string {
+		switch (channel) {
+			case 'IN_APP':
+				return 'In-App';
+			case 'EMAIL':
+				return 'Email';
+			case 'SMS':
+				return 'SMS';
+			default:
+				return channel;
+		}
+	}
+
+	// Form handlers
+	function showCreateForm() {
+		editingRule = null;
+		offCanvas.showRight({
+			title: 'Create Notification Rule',
+			content: createFormContent
+		});
+	}
+
+	function showEditForm(rule: NotificationRule) {
+		editingRule = rule;
+		offCanvas.showRight({
+			title: 'Edit Notification Rule',
+			content: editFormContent
+		});
+	}
+
+	function showCloneForm(rule: NotificationRule) {
+		// Create a copy with modified name
+		editingRule = {
+			...rule,
+			id: '', // Will be treated as create
+			name: `${rule.name} (Copy)`
+		} as NotificationRule;
+		offCanvas.showRight({
+			title: 'Clone Notification Rule',
+			content: cloneFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	function promptDelete(id: string, name: string) {
+		ruleToDelete = { id, name };
+		showDeleteModal = true;
+	}
+
+	async function handleDelete() {
+		if (!ruleToDelete) return;
+		isDeleting = true;
+
+		try {
+			await deleteStore.mutate({ id: ruleToDelete.id });
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete rule:', err);
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+			ruleToDelete = null;
+		}
+	}
+
+	async function toggleActive(rule: NotificationRule) {
+		try {
+			await updateStore.mutate({
+				input: {
+					id: rule.id,
+					isActive: !rule.isActive
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to toggle rule:', err);
+		}
+	}
+</script>
+
+{#snippet createFormContent()}
+	<NotificationRuleForm {teamProfiles} {customerProfiles} onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet editFormContent()}
+	{#if editingRule}
+		<NotificationRuleForm
+			rule={editingRule}
+			{teamProfiles}
+			{customerProfiles}
+			onSuccess={handleSuccess}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet cloneFormContent()}
+	{#if editingRule}
+		<NotificationRuleForm
+			rule={{ ...editingRule, id: '' }}
+			{teamProfiles}
+			{customerProfiles}
+			onSuccess={handleSuccess}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>Notification Rules - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1
+							class="text-2xl font-bold text-notification-600 md:text-3xl dark:text-notification-400"
+						>
+							Notification Rules
+						</h1>
+						<p class="mt-2 text-theme-secondary">
+							Configure when and how notifications are sent to users.
+						</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="hidden items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add Rule</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Rules -->
+		<!-- Status Filter -->
+		<div class="mb-4 flex items-center gap-2">
+			<button
+				onclick={() => (statusFilter = 'all')}
+				class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {statusFilter === 'all'
+					? 'bg-notification-500/10 text-notification-600 dark:text-notification-400'
+					: 'text-theme-muted hover:bg-black/5 dark:hover:bg-white/10'}"
+			>
+				All ({rules.length})
+			</button>
+			<button
+				onclick={() => (statusFilter = 'active')}
+				class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {statusFilter ===
+				'active'
+					? 'bg-success-500/10 text-success-600 dark:text-success-400'
+					: 'text-theme-muted hover:bg-black/5 dark:hover:bg-white/10'}"
+			>
+				Active ({rules.filter((r) => r.isActive).length})
+			</button>
+			<button
+				onclick={() => (statusFilter = 'inactive')}
+				class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {statusFilter ===
+				'inactive'
+					? 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+					: 'text-theme-muted hover:bg-black/5 dark:hover:bg-white/10'}"
+			>
+				Inactive ({rules.filter((r) => !r.isActive).length})
+			</button>
+		</div>
+
+		<!-- Search -->
+		<div class="mb-6">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search notification rules..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+
+		<!-- Rules List -->
+		{#if filteredRules.length > 0}
+			<div class="space-y-3">
+				{#each filteredRules as rule (rule.id)}
+					<div class="group relative card-notification">
+						<a
+							href="/admin/notifications/{rule.id}"
+							class="absolute inset-0 z-0"
+							aria-label="Edit {rule.name}"
+						></a>
+						<div class="flex items-start justify-between gap-4">
+							<div class="min-w-0 flex-1">
+								<div class="mb-2 flex flex-wrap items-center gap-2">
+									<h3
+										class="font-semibold text-theme transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400"
+									>
+										{rule.name}
+									</h3>
+									<span
+										class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+											rule.isActive
+												? 'bg-success-500/10 text-success-600 dark:text-success-400'
+												: 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+										}`}
+									>
+										{rule.isActive ? 'Active' : 'Inactive'}
+									</span>
+								</div>
+
+								{#if rule.description}
+									<p class="mb-3 text-sm text-theme-muted">{rule.description}</p>
+								{/if}
+
+								<!-- Badges Row -->
+								<div class="flex flex-wrap items-center gap-2">
+									<!-- Event Types Count -->
+									<span
+										class="inline-flex items-center gap-1 rounded-full bg-purple-500/10 px-2 py-0.5 text-xs font-medium text-purple-600 dark:text-purple-400"
+									>
+										<svg
+											class="h-3 w-3"
+											style="fill: none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M13 10V3L4 14h7v7l9-11h-7z"
+											/>
+										</svg>
+										{rule.eventTypes.length} event{rule.eventTypes.length !== 1 ? 's' : ''}
+									</span>
+
+									<!-- Channel Badges -->
+									{#each rule.channels as channel (channel)}
+										<span
+											class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400"
+										>
+											{#if channel === 'IN_APP'}
+												<svg
+													class="h-3 w-3"
+													style="fill: none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+													/>
+												</svg>
+											{:else if channel === 'EMAIL'}
+												<svg
+													class="h-3 w-3"
+													style="fill: none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+													/>
+												</svg>
+											{:else}
+												<svg
+													class="h-3 w-3"
+													style="fill: none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+													/>
+												</svg>
+											{/if}
+											{getChannelLabel(channel)}
+										</span>
+									{/each}
+
+									<!-- Target Roles -->
+									{#if rule.targetRoles.length > 0}
+										<span
+											class="inline-flex items-center gap-1 rounded-full bg-orange-500/10 px-2 py-0.5 text-xs font-medium text-orange-600 dark:text-orange-400"
+										>
+											<svg
+												class="h-3 w-3"
+												style="fill: none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
+												/>
+											</svg>
+											{rule.targetRoles
+												.map((r) =>
+													r === 'ADMIN' ? 'Admin' : r === 'TEAM_LEADER' ? 'Leader' : 'Member'
+												)
+												.join(', ')}
+										</span>
+									{/if}
+								</div>
+							</div>
+
+							<!-- Actions -->
+							<div class="relative z-10 flex flex-shrink-0 items-center gap-1">
+								<!-- Toggle Active -->
+								<button
+									onclick={() => toggleActive(rule)}
+									class="rounded-lg p-2 transition-colors hover:bg-black/10 dark:hover:bg-white/10"
+									title={rule.isActive ? 'Deactivate' : 'Activate'}
+								>
+									{#if rule.isActive}
+										<svg
+											class="h-4 w-4 text-success-500"
+											style="fill: none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+											/>
+										</svg>
+									{:else}
+										<svg
+											class="h-4 w-4 text-theme-muted"
+											style="fill: none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+											/>
+										</svg>
+									{/if}
+								</button>
+
+								<!-- Clone -->
+								<button
+									onclick={() => showCloneForm(rule)}
+									class="rounded-lg p-2 transition-colors hover:bg-black/10 dark:hover:bg-white/10"
+									title="Duplicate"
+								>
+									<svg
+										class="h-4 w-4 text-theme-muted"
+										style="fill: none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+										/>
+									</svg>
+								</button>
+
+								<!-- Edit -->
+								<button
+									onclick={() => showEditForm(rule)}
+									class="rounded-lg bg-notification-500/10 px-3 py-1.5 text-sm font-medium text-notification-600 transition-colors hover:bg-notification-500/20 dark:text-notification-400"
+								>
+									Edit
+								</button>
+
+								<!-- Delete -->
+								<button
+									onclick={() => promptDelete(rule.id, rule.name)}
+									class="rounded-lg bg-error-500/10 p-1.5 text-error-600 transition-colors hover:bg-error-500/20 dark:text-error-400"
+									title="Delete"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</button>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No rules found</h2>
+				<p class="empty-state-text">
+					No notification rules match "{searchQuery}". Try a different search term.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No notification rules yet</h2>
+				<p class="empty-state-text">
+					Get started by creating your first notification rule to automate alerts.
+				</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Rule</span>
+				</button>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={showCreateForm}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+	aria-label="Add notification rule"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete Notification Rule"
+	message="Are you sure you want to delete '{ruleToDelete?.name}'? This action cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
diff --git a/src/routes/admin/notifications/[rule]/+page.server.ts b/src/routes/admin/notifications/[rule]/+page.server.ts
new file mode 100644
index 0000000..9ac0a3e
--- /dev/null
+++ b/src/routes/admin/notifications/[rule]/+page.server.ts
@@ -0,0 +1,36 @@
+import { AdminNotificationRuleStore, AdminProfilesStore } from '$houdini';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { parent } = event;
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Gate to ADMIN only
+	if (me?.__typename !== 'TeamProfileType' || me.role !== 'ADMIN') {
+		throw error(403, 'Admin access required');
+	}
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	const [ruleResult, profiles] = await Promise.all([
+		new AdminNotificationRuleStore().fetch({
+			...fetchParams,
+			variables: { id: event.params.rule }
+		}),
+		new AdminProfilesStore().fetch(fetchParams)
+	]);
+
+	if (!ruleResult.data?.notificationRule) {
+		throw error(404, 'Notification rule not found');
+	}
+
+	return {
+		rule: ruleResult,
+		profiles
+	};
+};
diff --git a/src/routes/admin/notifications/[rule]/+page.svelte b/src/routes/admin/notifications/[rule]/+page.svelte
new file mode 100644
index 0000000..83730b7
--- /dev/null
+++ b/src/routes/admin/notifications/[rule]/+page.svelte
@@ -0,0 +1,481 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import EventTypeSelector from '$lib/components/admin/notifications/EventTypeSelector.svelte';
+	import ChannelSelector from '$lib/components/admin/notifications/ChannelSelector.svelte';
+	import TargetSelector from '$lib/components/admin/notifications/TargetSelector.svelte';
+	import TemplateEditor from '$lib/components/admin/notifications/TemplateEditor.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import {
+		UpdateNotificationRuleStore,
+		DeleteNotificationRuleStore,
+		type EventTypeChoices$options,
+		type NotificationChannelChoices$options,
+		type RoleChoices$options
+	} from '$houdini';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import { formatDate } from '$lib/utils/date';
+
+	let { data }: { data: PageData } = $props();
+
+	let rule = $derived(data.rule?.data?.notificationRule);
+
+	// Convert profile IDs from Relay global IDs to raw UUIDs
+	let teamProfiles = $derived(
+		data.profiles?.data?.teamProfiles?.map((p) => ({
+			id: fromGlobalId(p.id),
+			fullName: p.fullName,
+			email: p.email,
+			role: p.role
+		})) ?? []
+	);
+	let customerProfiles = $derived(
+		data.profiles?.data?.customerProfiles?.map((p) => ({
+			id: fromGlobalId(p.id),
+			fullName: p.fullName,
+			email: p.email
+		})) ?? []
+	);
+
+	// Form state
+	let submitting = $state(false);
+	let error = $state('');
+	let successMessage = $state('');
+	let formInitialized = $state(false);
+
+	let name = $state('');
+	let description = $state('');
+	let eventTypes = $state<string[]>([]);
+	let channels = $state<string[]>(['IN_APP']);
+	let targetRoles = $state<string[]>([]);
+	let targetTeamProfileIds = $state<string[]>([]);
+	let targetCustomerProfileIds = $state<string[]>([]);
+	let templateSubject = $state('');
+	let templateBody = $state('');
+	let conditions = $state<string>('');
+	let isActive = $state(true);
+
+	let conditionsError = $state('');
+
+	// Initialize form state from rule data (only once on initial load)
+	$effect(() => {
+		if (rule && !formInitialized) {
+			name = rule.name ?? '';
+			description = rule.description ?? '';
+			eventTypes = [...(rule.eventTypes ?? [])];
+			channels = [...(rule.channels ?? ['IN_APP'])];
+			targetRoles = [...(rule.targetRoles ?? [])];
+			targetTeamProfileIds = [...(rule.targetTeamProfileIds ?? [])];
+			targetCustomerProfileIds = [...(rule.targetCustomerProfileIds ?? [])];
+			templateSubject = rule.templateSubject ?? '';
+			templateBody = rule.templateBody ?? '';
+			conditions = rule.conditions ? JSON.stringify(rule.conditions, null, 2) : '';
+			isActive = rule.isActive ?? true;
+			formInitialized = true;
+		}
+	});
+
+	const updateStore = new UpdateNotificationRuleStore();
+	const deleteStore = new DeleteNotificationRuleStore();
+
+	const conditionsExample = '{"status": "COMPLETED"}';
+
+	const roleOptions = [
+		{ value: 'ADMIN', label: 'Admin' },
+		{ value: 'TEAM_LEADER', label: 'Team Leader' },
+		{ value: 'TEAM_MEMBER', label: 'Team Member' }
+	];
+
+	// Delete state
+	let showDeleteModal = $state(false);
+	let isDeleting = $state(false);
+
+	function toggleRole(role: string) {
+		if (targetRoles.includes(role)) {
+			targetRoles = targetRoles.filter((r) => r !== role);
+		} else {
+			targetRoles = [...targetRoles, role];
+		}
+	}
+
+	function parseConditions(): Record<string, unknown> | null {
+		if (!conditions.trim()) return null;
+		try {
+			const parsed = JSON.parse(conditions);
+			conditionsError = '';
+			return parsed;
+		} catch {
+			conditionsError = 'Invalid JSON';
+			return null;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!rule) return;
+
+		submitting = true;
+		error = '';
+		successMessage = '';
+
+		try {
+			// Validation
+			if (!name.trim()) {
+				error = 'Please provide a name for the rule';
+				return;
+			}
+
+			if (eventTypes.length === 0) {
+				error = 'Please select at least one event type';
+				return;
+			}
+
+			if (channels.length === 0) {
+				error = 'Please select at least one notification channel';
+				return;
+			}
+
+			// Parse conditions if provided
+			let parsedConditions: Record<string, unknown> | null = null;
+			if (conditions.trim()) {
+				parsedConditions = parseConditions();
+				if (conditionsError) {
+					error = 'Invalid JSON in conditions field';
+					return;
+				}
+			}
+
+			const res = await updateStore.mutate({
+				input: {
+					id: rule.id,
+					name: name.trim(),
+					description: description.trim() || null,
+					eventTypes: eventTypes as EventTypeChoices$options[],
+					channels: channels as NotificationChannelChoices$options[],
+					targetRoles: targetRoles.length > 0 ? (targetRoles as RoleChoices$options[]) : null,
+					targetTeamProfileIds: targetTeamProfileIds.length > 0 ? targetTeamProfileIds : null,
+					targetCustomerProfileIds:
+						targetCustomerProfileIds.length > 0 ? targetCustomerProfileIds : null,
+					templateSubject: templateSubject.trim() || null,
+					templateBody: templateBody.trim() || null,
+					conditions: parsedConditions,
+					isActive
+				}
+			});
+
+			if (res.errors?.length) {
+				error = res.errors.map((e: { message: string }) => e.message).join(', ');
+				return;
+			}
+
+			successMessage = 'Changes saved successfully';
+			await invalidateAll();
+
+			// Clear success message after 3 seconds
+			setTimeout(() => {
+				successMessage = '';
+			}, 3000);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to save notification rule';
+		} finally {
+			submitting = false;
+		}
+	}
+
+	async function handleDelete() {
+		if (!rule) return;
+		isDeleting = true;
+
+		try {
+			await deleteStore.mutate({ id: rule.id });
+			await goto('/admin/notifications');
+		} catch (err) {
+			console.error('Failed to delete rule:', err);
+			error = err instanceof Error ? err.message : 'Failed to delete rule';
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{rule?.name ?? 'Notification Rule'} - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		{#if rule}
+			<!-- Header -->
+			<div class="mb-8">
+				<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+					<div class="flex items-start gap-4">
+						<a
+							href="/admin/notifications"
+							class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+							aria-label="Go back"
+						>
+							<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 19l-7-7 7-7"
+								/>
+							</svg>
+						</a>
+						<div>
+							<div class="flex items-center gap-3">
+								<h1
+									class="text-2xl font-bold text-notification-600 md:text-3xl dark:text-notification-400"
+								>
+									{rule.name}
+								</h1>
+								<span
+									class={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
+										rule.isActive
+											? 'bg-success-500/10 text-success-600 dark:text-success-400'
+											: 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+									}`}
+								>
+									{rule.isActive ? 'Active' : 'Inactive'}
+								</span>
+							</div>
+							<p class="mt-1 text-sm text-theme-muted">
+								Created {formatDate(rule.createdAt) || '—'} · Last updated {formatDate(
+									rule.updatedAt
+								) || '—'}
+							</p>
+						</div>
+					</div>
+					<button
+						type="button"
+						onclick={() => (showDeleteModal = true)}
+						class="inline-flex items-center gap-2 rounded-lg border border-error-500 px-4 py-2 text-sm font-medium text-error-600 transition-colors hover:bg-error-500/10 dark:text-error-400"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+							/>
+						</svg>
+						Delete Rule
+					</button>
+				</div>
+			</div>
+
+			<!-- Messages -->
+			{#if error}
+				<div class="mb-6 alert-error">{error}</div>
+			{/if}
+
+			{#if successMessage}
+				<div
+					class="mb-6 rounded-lg border border-success-400 bg-success-50 p-4 text-sm text-success-700 dark:border-success-600 dark:bg-success-900/20 dark:text-success-400"
+				>
+					{successMessage}
+				</div>
+			{/if}
+
+			<!-- Form -->
+			<form class="space-y-8" onsubmit={handleSubmit}>
+				<!-- Basic Info Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Basic Information</h2>
+					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div class="sm:col-span-2">
+							<label for="name" class="mb-1.5 block text-sm font-medium text-theme">
+								Name <span class="text-error-500">*</span>
+							</label>
+							<input
+								id="name"
+								type="text"
+								bind:value={name}
+								disabled={submitting}
+								placeholder="e.g., Service Completion Alert"
+								class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+							/>
+						</div>
+
+						<div class="sm:col-span-2">
+							<label for="description" class="mb-1.5 block text-sm font-medium text-theme">
+								Description
+							</label>
+							<textarea
+								id="description"
+								bind:value={description}
+								disabled={submitting}
+								rows={2}
+								placeholder="Describe when this rule triggers and what it does"
+								class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+							></textarea>
+						</div>
+
+						<div class="sm:col-span-2">
+							<label class="flex cursor-pointer items-center gap-3">
+								<input
+									type="checkbox"
+									bind:checked={isActive}
+									disabled={submitting}
+									class="border-theme-muted h-5 w-5 rounded text-primary-500 focus:ring-primary-500"
+								/>
+								<span class="text-sm font-medium text-theme">Active</span>
+								<span class="text-xs text-theme-muted">
+									{isActive ? 'This rule will trigger notifications' : 'This rule is disabled'}
+								</span>
+							</label>
+						</div>
+					</div>
+				</section>
+
+				<!-- Event Types Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Trigger Events</h2>
+					<p class="mb-4 text-sm text-theme-muted">
+						Select which events will trigger this notification rule.
+					</p>
+					<EventTypeSelector bind:selected={eventTypes} />
+				</section>
+
+				<!-- Channels Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Delivery Channels</h2>
+					<p class="mb-4 text-sm text-theme-muted">
+						Choose how notifications will be delivered to recipients.
+					</p>
+					<ChannelSelector bind:selected={channels} />
+				</section>
+
+				<!-- Recipients Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Recipients</h2>
+					<p class="mb-4 text-sm text-theme-muted">
+						Define who will receive notifications when this rule triggers.
+					</p>
+
+					<div class="space-y-6">
+						<!-- Target by Role -->
+						<div>
+							<span class="mb-2 block text-sm font-medium text-theme">Target by Role</span>
+							<p class="mb-3 text-xs text-theme-muted">
+								Leave empty to notify all roles. Select specific roles to limit recipients.
+							</p>
+							<div class="flex flex-wrap gap-2">
+								{#each roleOptions as role (role.value)}
+									<button
+										type="button"
+										onclick={() => toggleRole(role.value)}
+										disabled={submitting}
+										class="rounded-lg border px-3 py-1.5 text-sm transition-colors {targetRoles.includes(
+											role.value
+										)
+											? 'border-primary-500 bg-primary-500/10 text-primary-600 dark:text-primary-400'
+											: 'border-theme bg-theme hover:bg-black/5 dark:hover:bg-white/10'}"
+									>
+										{role.label}
+									</button>
+								{/each}
+							</div>
+							{#if targetRoles.length === 0}
+								<p class="mt-2 text-xs text-success-600 dark:text-success-400">
+									All team members will receive notifications
+								</p>
+							{/if}
+						</div>
+
+						<!-- Specific Team Members -->
+						<TargetSelector
+							label="Specific Team Members"
+							profiles={teamProfiles}
+							bind:selectedIds={targetTeamProfileIds}
+							placeholder="Search team members..."
+						/>
+
+						<!-- Specific Customers -->
+						<TargetSelector
+							label="Specific Customers"
+							profiles={customerProfiles}
+							bind:selectedIds={targetCustomerProfileIds}
+							placeholder="Search customers..."
+						/>
+					</div>
+				</section>
+
+				<!-- Template Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Message Template</h2>
+					<p class="mb-4 text-sm text-theme-muted">
+						Customize the notification message. Use variables to include dynamic content.
+					</p>
+					<TemplateEditor bind:subject={templateSubject} bind:body={templateBody} />
+				</section>
+
+				<!-- Advanced Options Section -->
+				<section class="card-notification">
+					<h2 class="mb-4 text-lg font-semibold text-theme">Advanced Options</h2>
+					<div>
+						<label for="conditions" class="mb-1.5 block text-sm font-medium text-theme">
+							Conditions (JSON)
+						</label>
+						<p class="mb-2 text-xs text-theme-muted">
+							Add JSON conditions to filter events. Example: {conditionsExample}
+						</p>
+						<textarea
+							id="conditions"
+							bind:value={conditions}
+							oninput={() => parseConditions()}
+							disabled={submitting}
+							rows={4}
+							placeholder={conditionsExample}
+							class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 font-mono text-sm text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50"
+						></textarea>
+						{#if conditionsError}
+							<p class="mt-1 text-xs text-error-500">{conditionsError}</p>
+						{/if}
+					</div>
+				</section>
+
+				<!-- Actions -->
+				<div class="flex items-center gap-4">
+					<button
+						type="submit"
+						disabled={submitting}
+						class="rounded-lg bg-primary-500 px-6 py-2.5 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{#if submitting}
+							<span class="flex items-center gap-2">
+								<IconSpinner class="h-4 w-4" />
+								<span>Saving...</span>
+							</span>
+						{:else}
+							Save Changes
+						{/if}
+					</button>
+					<a
+						href="/admin/notifications"
+						class="rounded-lg border border-theme interactive bg-theme px-6 py-2.5 font-medium text-theme"
+					>
+						Cancel
+					</a>
+				</div>
+			</form>
+		{:else}
+			<div class="py-12 text-center">
+				<p class="text-theme-muted">Rule not found</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete Notification Rule"
+	message="Are you sure you want to delete '{rule?.name}'? This action cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
diff --git a/src/routes/admin/profiles/+page.server.ts b/src/routes/admin/profiles/+page.server.ts
new file mode 100644
index 0000000..66c11ba
--- /dev/null
+++ b/src/routes/admin/profiles/+page.server.ts
@@ -0,0 +1,21 @@
+import { AdminProfilesStore } from '$houdini';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { parent } = event;
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	// Fetch profiles and parent data in parallel
+	const [profiles, parentData] = await Promise.all([
+		new AdminProfilesStore().fetch(fetchParams),
+		parent()
+	]);
+
+	return {
+		profiles,
+		customers: parentData.customers
+	};
+};
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
new file mode 100644
index 0000000..3772830
--- /dev/null
+++ b/src/routes/admin/profiles/+page.svelte
@@ -0,0 +1,530 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import TeamProfileForm from '$lib/components/admin/profiles/TeamProfileForm.svelte';
+	import CustomerProfileForm from '$lib/components/admin/profiles/CustomerProfileForm.svelte';
+	import { DeleteTeamProfileStore, DeleteCustomerProfileStore } from '$houdini';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll } from '$app/navigation';
+
+	let { data }: { data: PageData } = $props();
+
+	let teamProfiles = $derived(data.profiles?.data?.teamProfiles ?? []);
+	let customerProfiles = $derived(data.profiles?.data?.customerProfiles ?? []);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+
+	// Tab state
+	type TabType = 'team' | 'customer';
+	let activeTab = $state<TabType>('team');
+
+	// Search
+	let searchQuery = $state('');
+
+	// Filtered lists
+	let filteredTeamProfiles = $derived(
+		teamProfiles.filter(
+			(p) =>
+				p.fullName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				(p.email?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false) ||
+				p.role.toLowerCase().includes(searchQuery.toLowerCase())
+		)
+	);
+
+	let filteredCustomerProfiles = $derived(
+		customerProfiles.filter(
+			(p) =>
+				p.fullName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+				(p.email?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false) ||
+				p.customers.some((c) => c.name.toLowerCase().includes(searchQuery.toLowerCase()))
+		)
+	);
+
+	// Edit state
+	let editingTeamProfile = $state<(typeof teamProfiles)[0] | null>(null);
+	let editingCustomerProfile = $state<(typeof customerProfiles)[0] | null>(null);
+
+	// Delete state
+	let showDeleteModal = $state(false);
+	let isDeleting = $state(false);
+	let profileToDelete = $state<{ id: string; name: string; type: 'team' | 'customer' } | null>(
+		null
+	);
+
+	const deleteTeamStore = new DeleteTeamProfileStore();
+	const deleteCustomerStore = new DeleteCustomerProfileStore();
+
+	// Status helpers
+	function getStatusClasses(status: string): string {
+		switch (status) {
+			case 'ACTIVE':
+				return 'bg-success-500/10 text-success-600 dark:text-success-400';
+			case 'INACTIVE':
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+			case 'PENDING':
+				return 'bg-warning-500/10 text-warning-600 dark:text-warning-400';
+			default:
+				return 'bg-gray-500/10 text-gray-600 dark:text-gray-400';
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'ACTIVE':
+				return 'Active';
+			case 'INACTIVE':
+				return 'Inactive';
+			case 'PENDING':
+				return 'Pending';
+			default:
+				return status;
+		}
+	}
+
+	function getRoleLabel(role: string): string {
+		switch (role) {
+			case 'ADMIN':
+				return 'Admin';
+			case 'TEAM_LEADER':
+				return 'Team Leader';
+			case 'TEAM_MEMBER':
+				return 'Team Member';
+			default:
+				return role;
+		}
+	}
+
+	// Form handlers
+	function showCreateTeamForm() {
+		offCanvas.showRight({
+			title: 'Create Team Member',
+			content: createTeamFormContent
+		});
+	}
+
+	function showCreateCustomerForm() {
+		offCanvas.showRight({
+			title: 'Create Customer Profile',
+			content: createCustomerFormContent
+		});
+	}
+
+	function showEditTeamForm(profile: (typeof teamProfiles)[0]) {
+		editingTeamProfile = profile;
+		offCanvas.showRight({
+			title: 'Edit Team Member',
+			content: editTeamFormContent
+		});
+	}
+
+	function showEditCustomerForm(profile: (typeof customerProfiles)[0]) {
+		editingCustomerProfile = profile;
+		offCanvas.showRight({
+			title: 'Edit Customer Profile',
+			content: editCustomerFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateAll();
+	}
+
+	function promptDelete(id: string, name: string, type: 'team' | 'customer') {
+		profileToDelete = { id, name, type };
+		showDeleteModal = true;
+	}
+
+	async function handleDelete() {
+		if (!profileToDelete) return;
+		isDeleting = true;
+
+		try {
+			if (profileToDelete.type === 'team') {
+				await deleteTeamStore.mutate({ id: profileToDelete.id });
+			} else {
+				await deleteCustomerStore.mutate({ id: profileToDelete.id });
+			}
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete profile:', err);
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+			profileToDelete = null;
+		}
+	}
+</script>
+
+{#snippet createTeamFormContent()}
+	<TeamProfileForm onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet createCustomerFormContent()}
+	<CustomerProfileForm {customers} onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet editTeamFormContent()}
+	{#if editingTeamProfile}
+		<TeamProfileForm profile={editingTeamProfile} onSuccess={handleSuccess} />
+	{/if}
+{/snippet}
+
+{#snippet editCustomerFormContent()}
+	{#if editingCustomerProfile}
+		<CustomerProfileForm profile={editingCustomerProfile} {customers} onSuccess={handleSuccess} />
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>Profiles - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent4-600 md:text-3xl dark:text-accent4-400">
+							Profiles
+						</h1>
+						<p class="mt-2 text-theme-secondary">Manage team members and customer profiles.</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={() => (activeTab === 'team' ? showCreateTeamForm() : showCreateCustomerForm())}
+					class="hidden items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Add {activeTab === 'team' ? 'Team Member' : 'Customer Profile'}</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Tabs -->
+		<div class="mb-6 flex items-center justify-between gap-4">
+			<div class="flex items-center rounded-lg border border-theme bg-theme p-1">
+				<button
+					onclick={() => (activeTab = 'team')}
+					class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+					'team'
+						? 'bg-accent4-500/10 text-accent4-600 shadow-sm dark:text-accent4-400'
+						: 'text-theme-muted hover:text-theme'}"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+					Team
+					<span class="rounded-full bg-accent4-500 px-1.5 py-0.5 text-xs text-white">
+						{teamProfiles.length}
+					</span>
+				</button>
+				<button
+					onclick={() => (activeTab = 'customer')}
+					class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+					'customer'
+						? 'bg-accent4-500/10 text-accent4-600 shadow-sm dark:text-accent4-400'
+						: 'text-theme-muted hover:text-theme'}"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+					Customer
+					<span class="rounded-full bg-accent4-500 px-1.5 py-0.5 text-xs text-white">
+						{customerProfiles.length}
+					</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Search -->
+		<div class="mb-6">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search {activeTab === 'team' ? 'team members' : 'customer profiles'}..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+		</div>
+
+		<!-- Team Profiles Tab -->
+		{#if activeTab === 'team'}
+			{#if filteredTeamProfiles.length > 0}
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+					{#each filteredTeamProfiles as profile (profile.id)}
+						<div class="flex min-w-0 items-center justify-between card-profile">
+							<div class="min-w-0 flex-1">
+								<div class="mb-1 flex items-center gap-2">
+									<h3 class="truncate font-semibold text-theme">{profile.fullName}</h3>
+									<span
+										class={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${getStatusClasses(profile.status)}`}
+									>
+										{getStatusLabel(profile.status)}
+									</span>
+								</div>
+								<p class="text-sm text-theme-secondary">{getRoleLabel(profile.role)}</p>
+								{#if profile.email}
+									<p class="truncate text-sm text-theme-muted">{profile.email}</p>
+								{/if}
+								{#if profile.phone}
+									<p class="truncate text-sm text-theme-muted">{profile.phone}</p>
+								{/if}
+							</div>
+							<div class="flex flex-shrink-0 items-center gap-2">
+								<button
+									onclick={() => showEditTeamForm(profile)}
+									class="rounded-lg bg-accent4-500/10 px-3 py-1.5 text-sm font-medium text-accent4-600 transition-colors hover:bg-accent4-500/20 dark:text-accent4-400"
+								>
+									Edit
+								</button>
+								<button
+									onclick={() => promptDelete(profile.id, profile.fullName, 'team')}
+									class="rounded-lg bg-error-500/10 p-1.5 text-error-600 transition-colors hover:bg-error-500/20 dark:text-error-400"
+									title="Delete"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{:else if searchQuery}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No team members found</h2>
+					<p class="empty-state-text">
+						No team members match "{searchQuery}". Try a different search term.
+					</p>
+				</div>
+			{:else}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No team members yet</h2>
+					<p class="empty-state-text">Get started by adding your first team member.</p>
+					<button
+						type="button"
+						onclick={showCreateTeamForm}
+						class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						<span>Add Team Member</span>
+					</button>
+				</div>
+			{/if}
+		{:else}
+			<!-- Customer Profiles Tab -->
+			{#if filteredCustomerProfiles.length > 0}
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+					{#each filteredCustomerProfiles as profile (profile.id)}
+						<div class="flex min-w-0 items-center justify-between card-profile">
+							<div class="min-w-0 flex-1">
+								<div class="mb-1 flex items-center gap-2">
+									<h3 class="truncate font-semibold text-theme">{profile.fullName}</h3>
+									<span
+										class={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${getStatusClasses(profile.status)}`}
+									>
+										{getStatusLabel(profile.status)}
+									</span>
+								</div>
+								{#if profile.customers.length > 0}
+									<p class="truncate text-sm text-theme-secondary">
+										{profile.customers.map((c) => c.name).join(', ')}
+									</p>
+								{:else}
+									<p class="text-sm text-theme-muted">No linked customers</p>
+								{/if}
+								{#if profile.email}
+									<p class="truncate text-sm text-theme-muted">{profile.email}</p>
+								{/if}
+								{#if profile.phone}
+									<p class="truncate text-sm text-theme-muted">{profile.phone}</p>
+								{/if}
+							</div>
+							<div class="flex flex-shrink-0 items-center gap-2">
+								<button
+									onclick={() => showEditCustomerForm(profile)}
+									class="rounded-lg bg-accent4-500/10 px-3 py-1.5 text-sm font-medium text-accent4-600 transition-colors hover:bg-accent4-500/20 dark:text-accent4-400"
+								>
+									Edit
+								</button>
+								<button
+									onclick={() => promptDelete(profile.id, profile.fullName, 'customer')}
+									class="rounded-lg bg-error-500/10 p-1.5 text-error-600 transition-colors hover:bg-error-500/20 dark:text-error-400"
+									title="Delete"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{:else if searchQuery}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No customer profiles found</h2>
+					<p class="empty-state-text">
+						No customer profiles match "{searchQuery}". Try a different search term.
+					</p>
+				</div>
+			{:else}
+				<div class="empty-state">
+					<svg
+						class="empty-state-icon"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+					<h2 class="empty-state-title">No customer profiles yet</h2>
+					<p class="empty-state-text">Get started by adding your first customer profile.</p>
+					<button
+						type="button"
+						onclick={showCreateCustomerForm}
+						class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						<span>Add Customer Profile</span>
+					</button>
+				</div>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={() => (activeTab === 'team' ? showCreateTeamForm() : showCreateCustomerForm())}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+	aria-label="Add {activeTab === 'team' ? 'team member' : 'customer profile'}"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete {profileToDelete?.type === 'team' ? 'Team Member' : 'Customer Profile'}"
+	message="Are you sure you want to delete {profileToDelete?.name}? This action cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
diff --git a/src/routes/admin/projects/+page.svelte b/src/routes/admin/projects/+page.svelte
new file mode 100644
index 0000000..effa4b4
--- /dev/null
+++ b/src/routes/admin/projects/+page.svelte
@@ -0,0 +1,309 @@
+<script lang="ts">
+	import AdminListLayout from '$lib/components/admin/AdminListLayout.svelte';
+	import ProjectForm from '$lib/components/admin/projects/ProjectForm.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { goto } from '$app/navigation';
+	import { invalidateDashboard } from '$lib/utils/invalidate';
+	import { page } from '$app/state';
+	import type { PageData } from './$types';
+	import type { AdminProjects$result } from '$houdini';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	type Project = AdminProjects$result['projects'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			const newUrl = new URL(page.url);
+			newUrl.searchParams.delete('action');
+			goto(newUrl.pathname + newUrl.search, { replaceState: true, noScroll: true });
+		}
+	});
+
+	// Use pre-built lookups from root layout
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+
+	// Get current status from URL, default to 'scheduled'
+	let currentStatus = $derived(page.url.searchParams.get('status') || 'scheduled');
+
+	// Extract data from each status
+	let scheduled = $derived(data.projects.scheduled ?? []);
+	let inProgress = $derived(data.projects.inProgress ?? []);
+	let completed = $derived(data.projects.completed ?? []);
+
+	// Calculate counts for tabs
+	let counts = $derived({
+		scheduled: scheduled.length,
+		inProgress: inProgress.length,
+		completed: completed.length
+	});
+
+	// Select current data based on status
+	let currentData = $derived(
+		currentStatus === 'scheduled'
+			? scheduled
+			: currentStatus === 'in_progress'
+				? inProgress
+				: completed
+	);
+
+	// Search
+	let searchQuery = $state('');
+	let filteredProjects = $derived(() => {
+		if (!searchQuery.trim()) return currentData;
+		const query = searchQuery.toLowerCase();
+		return currentData.filter((project) => {
+			// Search project name
+			if (project.name.toLowerCase().includes(query)) return true;
+			// Search account name
+			if (project.accountAddressId) {
+				const accountInfo = accountLookup.get(project.accountAddressId);
+				if (accountInfo?.accountName.toLowerCase().includes(query)) return true;
+			}
+			// Search customer name
+			if (project.customerId) {
+				const customerInfo = customerLookup.get(project.customerId);
+				if (customerInfo?.customerName.toLowerCase().includes(query)) return true;
+			}
+			return false;
+		});
+	});
+
+	// Count non-admin team members
+	function countNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): number {
+		if (!teamMembers) return 0;
+		return teamMembers.filter((m) => nonAdminTeamIds.has(m.pk)).length;
+	}
+
+	// Get admin profile UUID for dispatched check
+	let adminProfileUuid = $derived(() => {
+		const adminProfile = teamProfiles.find((p) => p.role === 'ADMIN');
+		return adminProfile ? fromGlobalId(adminProfile.id) : null;
+	});
+
+	// Check if project is dispatched (admin is in team members)
+	function isDispatched(teamMembers: { pk: string }[] | null | undefined): boolean {
+		const adminUuid = adminProfileUuid();
+		if (!adminUuid || !teamMembers) return false;
+		return teamMembers.some((m) => m.pk === adminUuid);
+	}
+
+	// Check if project has non-admin team members assigned
+	function hasNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): boolean {
+		return countNonAdminTeamMembers(teamMembers) > 0;
+	}
+
+	// Format date for display
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get status badge class
+	function getStatusClass(status: string): string {
+		switch (status) {
+			case 'SCHEDULED':
+				return 'badge-primary';
+			case 'IN_PROGRESS':
+				return 'badge-accent';
+			case 'COMPLETED':
+				return 'badge-secondary';
+			default:
+				return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+	}
+
+	// Get project display info
+	function getProjectDisplayInfo(project: Project): {
+		accountName: string | null;
+		customerName: string | null;
+		address: string | null;
+	} {
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			return {
+				accountName: accountInfo?.accountName ?? null,
+				customerName: null,
+				address: accountInfo ? formatAddress(accountInfo) : null
+			};
+		}
+
+		const customerInfo = project.customerId ? customerLookup.get(project.customerId) : null;
+		const address = formatAddress({
+			streetAddress: project.streetAddress,
+			city: project.city,
+			state: project.state,
+			zipCode: project.zipCode
+		});
+
+		return {
+			accountName: null,
+			customerName: customerInfo?.customerName ?? null,
+			address
+		};
+	}
+
+	// Format currency
+	function formatCurrency(amount: number | string | null | undefined): string {
+		if (amount == null) return '$0';
+		const num = typeof amount === 'string' ? parseFloat(amount) : amount;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD',
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 0
+		}).format(num);
+	}
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Project',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateDashboard();
+	}
+
+	// Determine empty text based on search
+	let emptyText = $derived(
+		searchQuery
+			? `No projects match "${searchQuery}". Try a different search term.`
+			: 'No projects found for this month and status.'
+	);
+</script>
+
+{#snippet createFormContent()}
+	<ProjectForm {customers} {accounts} {teamProfiles} onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet emptyIcon()}
+	<svg
+		class="empty-state-icon text-accent-400"
+		style="fill: none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+		/>
+	</svg>
+{/snippet}
+
+{#snippet projectItem(project: Project)}
+	{@const displayInfo = getProjectDisplayInfo(project)}
+	{@const teamCount = countNonAdminTeamMembers(project.teamMembers)}
+	<a href="/admin/projects/{project.id}" class="block">
+		<div class="card-project">
+			<div class="flex items-start justify-between gap-4">
+				<div class="min-w-0 flex-1 space-y-1">
+					<!-- Row 1: Date + Status badges -->
+					<div class="flex flex-wrap items-center gap-2">
+						<span
+							class="rounded-full border border-theme bg-theme-secondary px-3 py-1 text-xs font-medium text-theme"
+						>
+							{formatDate(project.date)}
+						</span>
+						<span
+							class="rounded-full px-3 py-1 text-xs font-medium {getStatusClass(project.status)}"
+						>
+							{project.status.replace('_', ' ')}
+						</span>
+						{#if isDispatched(project.teamMembers)}
+							<span
+								class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+							>
+								Dispatched
+							</span>
+						{/if}
+						{#if hasNonAdminTeamMembers(project.teamMembers)}
+							<span
+								class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+							>
+								Assigned
+							</span>
+						{/if}
+						{#if project.waveServiceId}
+							<span class="badge-primary">Linked</span>
+						{/if}
+					</div>
+					<!-- Row 2: Account/Customer Name -->
+					{#if displayInfo.accountName}
+						<p class="text-base font-semibold text-primary-500">
+							{displayInfo.accountName}
+						</p>
+					{:else if displayInfo.customerName}
+						<p class="text-base font-semibold text-primary-500">
+							{displayInfo.customerName}
+						</p>
+					{:else}
+						<p class="text-base font-semibold text-theme-muted italic">
+							No account/customer linked
+						</p>
+					{/if}
+					<!-- Row 3: Project Name -->
+					<p class="text-sm text-theme-secondary">{project.name}</p>
+					<!-- Row 4: Address -->
+					{#if displayInfo.address}
+						<p class="text-sm text-theme-muted">{displayInfo.address}</p>
+					{/if}
+					<!-- Row 5: Amount + Team -->
+					<div class="flex flex-wrap items-center gap-4 text-sm text-theme-muted">
+						<span>{formatCurrency(project.amount)}</span>
+						<span>{teamCount} team member{teamCount !== 1 ? 's' : ''}</span>
+					</div>
+					<!-- Row 6: Notes -->
+					{#if project.notes}
+						<p class="line-clamp-2 text-sm text-theme-muted italic">{project.notes}</p>
+					{/if}
+				</div>
+				<svg
+					class="mt-1 h-5 w-5 shrink-0 text-theme-muted"
+					style="fill: none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+				</svg>
+			</div>
+		</div>
+	</a>
+{/snippet}
+
+<AdminListLayout
+	title="Projects"
+	subtitle="Manage one-time cleaning projects. Create, track progress, and view completed work."
+	items={filteredProjects()}
+	{currentStatus}
+	currentMonth={data.currentMonth}
+	{counts}
+	emptyTitle="No Projects"
+	{emptyText}
+	colorScheme="accent"
+	{searchQuery}
+	onSearchChange={(q) => (searchQuery = q)}
+	searchPlaceholder="Search projects..."
+	createButtonText="New Project"
+	onCreateClick={showCreateForm}
+	{emptyIcon}
+	item={projectItem}
+/>
diff --git a/src/routes/admin/projects/[project]/+page.server.ts b/src/routes/admin/projects/[project]/+page.server.ts
new file mode 100644
index 0000000..c96d11c
--- /dev/null
+++ b/src/routes/admin/projects/[project]/+page.server.ts
@@ -0,0 +1,136 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import {
+	GetProjectStore,
+	ProjectSessionByProjectStore,
+	ProjectScopeStore,
+	ProjectSessionPhotosStore,
+	ProjectSessionVideosStore
+} from '$houdini';
+import type { ProjectSessionPhotos$result, ProjectSessionVideos$result } from '$houdini';
+import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+
+type SessionPhoto = ProjectSessionPhotos$result['projectSessionImages'][number];
+type SessionVideo = ProjectSessionVideos$result['projectSessionVideos'][number];
+import { WAVE_ACCESS_TOKEN } from '$env/static/private';
+import { PUBLIC_WAVE_BUSINESS_ID } from '$env/static/public';
+import { createWaveServerClient } from '$lib/graphql/wave/client';
+import { GetProductsDocument, type ProductEdge, type Product } from '$lib/graphql/wave/generated';
+
+export interface WaveProduct {
+	id: string;
+	name: string;
+	description: string | null;
+	unitPrice: number;
+	isArchived: boolean;
+}
+
+async function fetchWaveProducts(): Promise<WaveProduct[]> {
+	const client = createWaveServerClient(WAVE_ACCESS_TOKEN);
+
+	const result = await client.query(GetProductsDocument, {
+		businessId: PUBLIC_WAVE_BUSINESS_ID,
+		pageSize: 500,
+		isSold: true,
+		isArchived: false
+	});
+
+	if (result.error) {
+		console.error('Wave API error:', result.error);
+		return [];
+	}
+
+	const edges = result.data?.business?.products?.edges ?? [];
+	return edges
+		.filter((edge: ProductEdge): edge is ProductEdge & { node: Product } => edge.node != null)
+		.map((edge: ProductEdge & { node: Product }) => ({
+			id: edge.node.id,
+			name: edge.node.name,
+			description: edge.node.description ?? null,
+			unitPrice: edge.node.unitPrice,
+			isArchived: edge.node.isArchived
+		}));
+}
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const projectId = params.project;
+	const projectUuid = fromGlobalId(projectId);
+
+	// Fetch params for Houdini stores
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Fetch project and Wave products in parallel (Wave is slow, start it early)
+	const [projectData, waveProducts] = await Promise.all([
+		new GetProjectStore().fetch({ ...fetchParams, variables: { id: projectId } }),
+		fetchWaveProducts()
+	]);
+
+	const project = projectData?.data?.project;
+	if (!project) {
+		throw error(404, 'Project not found');
+	}
+
+	// Build parallel fetch promises based on project state
+	const needsSession = project.status === 'IN_PROGRESS' || project.status === 'COMPLETED';
+
+	// Fetch session and scope in parallel
+	const [sessionResult, scopeResult] = await Promise.all([
+		// Session fetch (only if needed)
+		needsSession
+			? new ProjectSessionByProjectStore()
+					.fetch({ ...fetchParams, variables: { projectId: projectUuid } })
+					.catch(() => ({ data: { projectSessions: [] } }))
+			: Promise.resolve(null),
+		// Scope fetch (only if has scopeId)
+		project.scopeId
+			? new ProjectScopeStore()
+					.fetch({
+						...fetchParams,
+						variables: { id: toGlobalId('ProjectScopeType', project.scopeId) }
+					})
+					.catch(() => ({ data: { projectScope: null } }))
+			: Promise.resolve(null)
+	]);
+
+	const baseSession = sessionResult?.data?.projectSessions?.[0] ?? null;
+	let photos: SessionPhoto[] = [];
+	let videos: SessionVideo[] = [];
+
+	// If we have a session, fetch photos and videos in parallel
+	if (baseSession) {
+		const sessionUuid = fromGlobalId(baseSession.id);
+		const [photosResult, videosResult] = await Promise.all([
+			new ProjectSessionPhotosStore()
+				.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+				.catch((err) => {
+					console.error('Failed to fetch session photos:', err);
+					return { data: { projectSessionImages: [] as SessionPhoto[] } };
+				}),
+			new ProjectSessionVideosStore()
+				.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+				.catch((err) => {
+					console.error('Failed to fetch session videos:', err);
+					return { data: { projectSessionVideos: [] as SessionVideo[] } };
+				})
+		]);
+
+		photos = photosResult?.data?.projectSessionImages ?? [];
+		videos = videosResult?.data?.projectSessionVideos ?? [];
+	}
+
+	// Combine session with photos/videos
+	const session = baseSession ? { ...baseSession, photos, videos } : null;
+
+	// Get project scope templates from parent layout (already fetched there)
+	const parentData = await parent();
+
+	return {
+		project,
+		projectUuid,
+		session,
+		scope: scopeResult?.data?.projectScope ?? null,
+		projectScopeTemplates: parentData.projectScopes,
+		waveProducts
+	};
+};
diff --git a/src/routes/admin/projects/[project]/+page.svelte b/src/routes/admin/projects/[project]/+page.svelte
new file mode 100644
index 0000000..17276ea
--- /dev/null
+++ b/src/routes/admin/projects/[project]/+page.svelte
@@ -0,0 +1,942 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import {
+		SessionSectionHeader,
+		SessionContent,
+		StartSessionButton,
+		type ExtendedProjectTask,
+		type ProjectAreaWithCompletions,
+		type ProjectAreaWithTasks
+	} from '$lib/components/session';
+	import ProjectForm from '$lib/components/admin/projects/ProjectForm.svelte';
+	import EventForm from '$lib/components/admin/calendar/EventForm.svelte';
+	import { UpdateProjectStore } from '$houdini';
+	import ProjectScopeSection from '$lib/components/admin/projects/ProjectScopeSection.svelte';
+	import type {
+		ProjectScopeType,
+		ProjectCategoryType,
+		ProjectTaskType
+	} from '$lib/components/admin/projects/ProjectScopeSection.svelte';
+	import ProjectScopeForm from '$lib/components/admin/projects/ProjectScopeForm.svelte';
+	import ProjectCategoryForm from '$lib/components/admin/projects/ProjectCategoryForm.svelte';
+	import ProjectTaskForm from '$lib/components/admin/projects/ProjectTaskForm.svelte';
+	import ProjectDetailsCard from '$lib/components/admin/projects/ProjectDetailsCard.svelte';
+	import ScopeTemplateDropdown from '$lib/components/admin/projects/ScopeTemplateDropdown.svelte';
+	import {
+		openProjectSession,
+		closeProjectSession,
+		revertProjectSession,
+		addProjectTask,
+		removeProjectTask,
+		createProjectNote,
+		updateProjectNote,
+		removeProjectNote,
+		uploadProjectPhoto,
+		updateProjectPhoto,
+		removeProjectPhoto,
+		uploadProjectVideo,
+		updateProjectVideo,
+		removeProjectVideo
+	} from '$lib/utils/session';
+	import {
+		createProjectScopeFromTemplate,
+		deleteProjectScope,
+		deleteProjectScopeCategory,
+		deleteProjectScopeTask
+	} from '$lib/utils/scopes';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { PageData } from './$types';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	let { data }: { data: PageData } = $props();
+
+	// Core data
+	let project = $derived(data.project);
+	let session = $derived(data.session);
+	let scope = $derived(data.scope);
+	let projectUuid = $derived(data.projectUuid);
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+	let teamMemberLookup = $derived(data.teamMemberLookup);
+	let projectScopeTemplates = $derived(data.projectScopeTemplates ?? []);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let waveProducts = $derived(data.waveProducts ?? []);
+
+	// Current user for note authorship
+	let currentUserProfileId = $derived(data.user?.data?.me?.id ?? null);
+
+	// Admin always has permission to revert
+	let canRevertSession = true;
+
+	// Account or customer info
+	let accountInfo = $derived(
+		project.accountAddressId ? (accountLookup.get(project.accountAddressId) ?? null) : null
+	);
+	let customerInfo = $derived(
+		project.customerId ? (customerLookup.get(project.customerId) ?? null) : null
+	);
+
+	// Display name (account or customer)
+	let displayName = $derived(
+		accountInfo?.accountName ?? customerInfo?.customerName ?? 'Project Details'
+	);
+
+	// Address - from account or direct project fields
+	let address = $derived(() => {
+		if (accountInfo) {
+			return formatAddress(accountInfo);
+		}
+		return formatAddress({
+			streetAddress: project.streetAddress,
+			city: project.city,
+			state: project.state,
+			zipCode: project.zipCode
+		});
+	});
+
+	// Team members (non-admin only)
+	let teamMembers = $derived(() => {
+		if (!project.teamMembers) return [];
+		return project.teamMembers
+			.filter((m) => nonAdminTeamIds.has(m.pk))
+			.map((m) => teamMemberLookup.get(m.pk))
+			.filter((m): m is NonNullable<typeof m> => m !== undefined);
+	});
+
+	// Check if admin is dispatched (admin profile is in teamMembers)
+	let adminProfile = $derived(teamProfiles.find((p) => p.role === 'ADMIN'));
+	let adminProfileUuid = $derived(adminProfile ? fromGlobalId(adminProfile.id) : null);
+	let isDispatched = $derived(
+		adminProfileUuid
+			? (project.teamMembers?.some((m) => m.pk === adminProfileUuid) ?? false)
+			: false
+	);
+
+	// Loading states
+	let isStartingSession = $state(false);
+	let isSubmitting = $state(false);
+	let isReverting = $state(false);
+	let submittingTaskId = $state<string | null>(null);
+	let removingTaskId = $state<string | null>(null);
+
+	// Scope management state
+	let expandedCategories = new SvelteSet<string>();
+
+	// Delete confirmation state
+	let deleteScopeId = $state<string | null>(null);
+	let deleteCategoryId = $state<string | null>(null);
+	let deleteTaskId = $state<string | null>(null);
+	let deleteLoading = $state(false);
+
+	// Form context state for off-canvas snippets
+	let formContext = $state<{
+		type: 'addCategory' | 'editCategory' | 'addTask' | 'editTask' | 'editScope';
+		scopeId?: string;
+		categoryId?: string;
+		nextOrder?: number;
+		scope?: ProjectScopeType;
+		category?: ProjectCategoryType;
+		task?: ProjectTaskType;
+	} | null>(null);
+
+	// Check if scope can support session start
+	let hasScopeWithTasks = $derived(() => {
+		if (!scope) return false;
+		const totalTasks =
+			scope.projectAreas?.reduce((acc, cat) => acc + (cat.projectTasks?.length ?? 0), 0) ?? 0;
+		return totalTasks > 0;
+	});
+
+	// Check if scope editing is allowed (only for SCHEDULED projects)
+	let canEditScope = $derived(project.status === 'SCHEDULED');
+
+	// Note: Delete functions are imported from $lib/utils/scopes
+
+	// Build extended tasks from scope (projects use projectAreas and projectTasks)
+	let tasks = $derived<ExtendedProjectTask[]>(
+		scope?.projectAreas?.flatMap(
+			(area) =>
+				area.projectTasks?.map((task) => ({
+					...task,
+					uuid: fromGlobalId(task.id),
+					areaId: area.id,
+					areaName: area.name
+				})) || []
+		) || []
+	);
+
+	// Task tracking
+	let completedTaskIds = $derived(
+		new SvelteSet(session?.completedTasks?.map((ct) => ct.taskId) || [])
+	);
+	let selectedTaskIds = new SvelteSet<string>();
+	let availableTasksCount = $derived(
+		tasks.filter((t) => !completedTaskIds.has(t.uuid) && !selectedTaskIds.has(t.uuid)).length
+	);
+
+	// Group completed tasks by area
+	let completedTasksByArea = $derived.by((): ProjectAreaWithCompletions[] => {
+		if (!session?.completedTasks || !scope?.projectAreas) return [];
+		const areaMap = new SvelteMap<string, ProjectAreaWithCompletions>();
+		scope.projectAreas.forEach((area) => {
+			const areaTasks = session.completedTasks.filter((completion) => {
+				const task = tasks.find((t) => t.uuid === completion.taskId);
+				return task && task.areaId === area.id;
+			});
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, completions: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Group ready to submit tasks by area
+	let readyToSubmitByArea = $derived.by((): ProjectAreaWithTasks[] => {
+		if (!scope?.projectAreas) return [];
+		const areaMap = new SvelteMap<string, ProjectAreaWithTasks>();
+		scope.projectAreas.forEach((area) => {
+			const areaTasks = tasks.filter((t) => t.areaId === area.id && selectedTaskIds.has(t.uuid));
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, tasks: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Helper function to get team member name by ID
+	function getTeamMemberName(completedById: string | null | undefined): string {
+		if (!completedById) return 'Unknown';
+		const member = teamMemberLookup.get(completedById);
+		return member?.fullName || 'Unknown';
+	}
+
+	// Edit project
+	function showEditForm() {
+		offCanvas.showRight({
+			title: 'Edit Project',
+			content: editFormContent
+		});
+	}
+
+	async function handleEditSuccess() {
+		await invalidateAll();
+	}
+
+	// Schedule calendar event
+	const updateProjectStore = new UpdateProjectStore();
+
+	function showScheduleEventForm() {
+		offCanvas.showRight({
+			title: 'Schedule Calendar Event',
+			content: scheduleEventContent
+		});
+	}
+
+	async function handleEventSuccess(eventId: string) {
+		// Save the calendar event ID to the project
+		await updateProjectStore.mutate({
+			input: {
+				id: project.id,
+				calendarEventId: eventId
+			}
+		});
+		await invalidateAll();
+	}
+
+	// Build initial values for calendar event from project data
+	let eventInitialValues = $derived(() => {
+		const projectAddress = address();
+		const titleParts = ['PROJECT:', project.name];
+		if (accountInfo?.accountName) {
+			titleParts.push('-', accountInfo.accountName);
+		}
+		if (customerInfo?.customerName) {
+			titleParts.push('-', customerInfo.customerName);
+		}
+		return {
+			summary: titleParts.join(' '),
+			location: projectAddress || undefined,
+			date: project.date
+		};
+	});
+
+	// Scope management handlers
+	function toggleCategory(categoryId: string) {
+		if (expandedCategories.has(categoryId)) {
+			expandedCategories.delete(categoryId);
+		} else {
+			expandedCategories.add(categoryId);
+		}
+	}
+
+	let showScopeTemplateDropdown = $state(false);
+	let scopeLoading = $state(false);
+
+	function showCreateScopeForm() {
+		offCanvas.showRight({
+			title: 'Create Project Scope',
+			content: createScopeFormContent
+		});
+	}
+
+	async function handleCreateScopeFromTemplate(templateId: string) {
+		scopeLoading = true;
+		try {
+			const projectGlobalId = toGlobalId('ProjectType', projectUuid);
+			await createProjectScopeFromTemplate({
+				templateId,
+				projectId: projectGlobalId,
+				isActive: true
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to create project scope from template:', err);
+		} finally {
+			scopeLoading = false;
+		}
+	}
+
+	function showEditScopeForm(scopeToEdit: ProjectScopeType) {
+		formContext = { type: 'editScope', scope: scopeToEdit };
+		offCanvas.showRight({
+			title: 'Edit Project Scope',
+			content: editScopeFormContent
+		});
+	}
+
+	function handleDeleteScope(scopeId: string) {
+		deleteScopeId = scopeId;
+	}
+
+	async function confirmDeleteScope() {
+		if (!deleteScopeId) return;
+		deleteLoading = true;
+		try {
+			await deleteProjectScope(deleteScopeId);
+			deleteScopeId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete scope:', err);
+			throw err;
+		} finally {
+			deleteLoading = false;
+		}
+	}
+
+	function showAddCategoryForm(scopeId: string, nextOrder: number) {
+		formContext = { type: 'addCategory', scopeId, nextOrder };
+		offCanvas.showRight({
+			title: 'Add Category',
+			content: addCategoryFormContent
+		});
+	}
+
+	function showEditCategoryForm(scopeId: string, category: ProjectCategoryType) {
+		formContext = { type: 'editCategory', scopeId, category };
+		offCanvas.showRight({
+			title: 'Edit Category',
+			content: editCategoryFormContent
+		});
+	}
+
+	function handleDeleteCategory(categoryId: string) {
+		deleteCategoryId = categoryId;
+	}
+
+	async function confirmDeleteCategory() {
+		if (!deleteCategoryId) return;
+		deleteLoading = true;
+		try {
+			await deleteProjectScopeCategory(deleteCategoryId);
+			deleteCategoryId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete category:', err);
+			throw err;
+		} finally {
+			deleteLoading = false;
+		}
+	}
+
+	function showAddTaskForm(categoryId: string, nextOrder: number) {
+		formContext = { type: 'addTask', categoryId, nextOrder };
+		offCanvas.showRight({
+			title: 'Add Task',
+			content: addTaskFormContent
+		});
+	}
+
+	function showEditTaskForm(categoryId: string, task: ProjectTaskType) {
+		formContext = { type: 'editTask', categoryId, task };
+		offCanvas.showRight({
+			title: 'Edit Task',
+			content: editTaskFormContent
+		});
+	}
+
+	function handleDeleteTask(taskId: string) {
+		deleteTaskId = taskId;
+	}
+
+	async function confirmDeleteTask() {
+		if (!deleteTaskId) return;
+		deleteLoading = true;
+		try {
+			await deleteProjectScopeTask(deleteTaskId);
+			deleteTaskId = null;
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to delete task:', err);
+			throw err;
+		} finally {
+			deleteLoading = false;
+		}
+	}
+
+	async function handleScopeSuccess() {
+		await invalidateAll();
+	}
+
+	// Session handlers
+	async function handleStartSession() {
+		isStartingSession = true;
+		try {
+			await openProjectSession({ projectId: projectUuid });
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to start session:', err);
+		} finally {
+			isStartingSession = false;
+		}
+	}
+
+	async function handleCloseSession() {
+		if (!session) return;
+		isSubmitting = true;
+		try {
+			if (selectedTaskIds.size > 0) {
+				const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+					addProjectTask(projectUuid, taskUuid)
+				);
+				await Promise.all(promises);
+				selectedTaskIds.clear();
+			}
+			await closeProjectSession({ projectId: projectUuid });
+			await goto('/admin/projects', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to close session:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	async function handleRevertSession() {
+		if (
+			!confirm(
+				'Are you sure you want to cancel this session? All completed tasks, photos, videos, and notes will be deleted.'
+			)
+		) {
+			return;
+		}
+		isReverting = true;
+		try {
+			await revertProjectSession(projectUuid);
+			await goto('/admin/projects', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to revert session:', err);
+		} finally {
+			isReverting = false;
+		}
+	}
+
+	// Task handlers
+	function toggleTask(taskUuid: string) {
+		if (selectedTaskIds.has(taskUuid)) {
+			selectedTaskIds.delete(taskUuid);
+		} else {
+			selectedTaskIds.add(taskUuid);
+		}
+	}
+
+	async function handleSubmitTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			submittingTaskId = taskUuid;
+			await addProjectTask(projectUuid, taskUuid);
+			selectedTaskIds.delete(taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit task:', err);
+		} finally {
+			submittingTaskId = null;
+		}
+	}
+
+	function handleRemoveTask(taskUuid: string) {
+		selectedTaskIds.delete(taskUuid);
+	}
+
+	async function handleRemoveCompletedTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			removingTaskId = taskUuid;
+			await removeProjectTask(projectUuid, taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove completed task:', err);
+		} finally {
+			removingTaskId = null;
+		}
+	}
+
+	async function handleSubmitAllTasks() {
+		if (!session || selectedTaskIds.size === 0) return;
+		try {
+			isSubmitting = true;
+			const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+				addProjectTask(projectUuid, taskUuid)
+			);
+			await Promise.all(promises);
+			selectedTaskIds.clear();
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit all tasks:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	// Note handlers
+	async function handleAddNote(content: string, internal: boolean) {
+		if (!session) return;
+		await createProjectNote({
+			sessionId: session.id,
+			content,
+			internal,
+			authorId: currentUserProfileId
+		});
+		await invalidateAll();
+	}
+
+	async function handleUpdateNote(noteId: string, content: string, internal: boolean) {
+		await updateProjectNote({ id: noteId, content, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeleteNote(noteId: string) {
+		await removeProjectNote(noteId);
+		await invalidateAll();
+	}
+
+	// Media handlers
+	async function handleUploadPhoto(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadProjectPhoto(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUploadVideo(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadProjectVideo(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUpdatePhoto(
+		photoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateProjectPhoto({ id: photoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleUpdateVideo(
+		videoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateProjectVideo({ id: videoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeletePhoto(photoId: string) {
+		await removeProjectPhoto(photoId);
+		await invalidateAll();
+	}
+
+	async function handleDeleteVideo(videoId: string) {
+		await removeProjectVideo(videoId);
+		await invalidateAll();
+	}
+</script>
+
+{#snippet editFormContent()}
+	<ProjectForm
+		{project}
+		{customers}
+		{accounts}
+		{teamProfiles}
+		{waveProducts}
+		onSuccess={handleEditSuccess}
+	/>
+{/snippet}
+
+{#snippet scheduleEventContent()}
+	<EventForm {teamProfiles} initialValues={eventInitialValues()} onSuccess={handleEventSuccess} />
+{/snippet}
+
+{#snippet createScopeFormContent()}
+	<ProjectScopeForm projectId={project.id} onSuccess={handleScopeSuccess} />
+{/snippet}
+
+{#snippet editScopeFormContent()}
+	{#if formContext?.scope}
+		<ProjectScopeForm
+			projectId={project.id}
+			scope={formContext.scope}
+			onSuccess={handleScopeSuccess}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet addCategoryFormContent()}
+	{#if formContext?.scopeId}
+		<ProjectCategoryForm
+			scopeId={formContext.scopeId}
+			nextOrder={formContext.nextOrder ?? 0}
+			onSuccess={handleScopeSuccess}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet editCategoryFormContent()}
+	{#if formContext?.scopeId && formContext?.category}
+		<ProjectCategoryForm
+			scopeId={formContext.scopeId}
+			category={formContext.category}
+			onSuccess={handleScopeSuccess}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet addTaskFormContent()}
+	{#if formContext?.categoryId}
+		<ProjectTaskForm
+			categoryId={formContext.categoryId}
+			nextOrder={formContext.nextOrder ?? 0}
+			onSuccess={handleScopeSuccess}
+		/>
+	{/if}
+{/snippet}
+
+{#snippet editTaskFormContent()}
+	{#if formContext?.categoryId && formContext?.task}
+		<ProjectTaskForm
+			categoryId={formContext.categoryId}
+			task={formContext.task}
+			onSuccess={handleScopeSuccess}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>{displayName} - Projects - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={displayName}
+			subtitle={project.name}
+			colorScheme="accent"
+			backHref="/admin/projects"
+			invalidateOnBack
+			onEdit={showEditForm}
+		/>
+
+		<!-- Project Details Card -->
+		<ProjectDetailsCard
+			projectId={project.id}
+			projectName={project.name}
+			status={project.status}
+			date={project.date}
+			amount={project.amount}
+			labor={project.labor}
+			address={address()}
+			teamMembers={teamMembers()}
+			notes={project.notes}
+			calendarEventId={project.calendarEventId}
+			waveServiceId={project.waveServiceId}
+			{waveProducts}
+			onScheduleEvent={showScheduleEventForm}
+			{accountInfo}
+			{customerInfo}
+			{isDispatched}
+		/>
+
+		<!-- Project Scope Section (always visible for admin) -->
+		<div class="mb-6 rounded-xl border border-theme bg-theme-card p-6">
+			<div class="mb-4 flex items-center justify-between">
+				<h2 class="text-lg font-semibold text-theme">Project Scope</h2>
+				{#if !scope && canEditScope && !scopeLoading}
+					<ScopeTemplateDropdown
+						templates={projectScopeTemplates}
+						isOpen={showScopeTemplateDropdown}
+						onToggle={() => (showScopeTemplateDropdown = !showScopeTemplateDropdown)}
+						onCreateBlank={showCreateScopeForm}
+						onCreateFromTemplate={handleCreateScopeFromTemplate}
+					/>
+				{/if}
+			</div>
+
+			<!-- Lock notice when scope cannot be edited -->
+			{#if !canEditScope && scope}
+				<div class="mb-4 rounded-lg border border-warning bg-warning p-3">
+					<div class="flex items-center gap-2">
+						<svg
+							class="h-5 w-5 flex-shrink-0 text-warning-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+							/>
+						</svg>
+						<div>
+							<p class="text-sm font-medium text-warning">Scope is locked</p>
+							<p class="text-xs text-warning-700 dark:text-warning-300">
+								{#if project.status === 'IN_PROGRESS'}
+									The scope cannot be modified while the project session is active. Revert the
+									session first to make changes.
+								{:else}
+									The scope cannot be modified after the project has been completed.
+								{/if}
+							</p>
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			{#if scopeLoading}
+				<div class="py-8 text-center">
+					<svg
+						class="mx-auto h-8 w-8 animate-spin text-accent-500"
+						style="fill: none"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+					<p class="mt-3 text-sm text-theme-muted">Creating scope from template...</p>
+				</div>
+			{:else if scope}
+				<ProjectScopeSection
+					{scope}
+					{expandedCategories}
+					editable={canEditScope}
+					onToggleCategory={toggleCategory}
+					onEditScope={canEditScope ? showEditScopeForm : undefined}
+					onDeleteScope={canEditScope ? handleDeleteScope : undefined}
+					onAddCategory={canEditScope ? showAddCategoryForm : undefined}
+					onEditCategory={canEditScope ? showEditCategoryForm : undefined}
+					onDeleteCategory={canEditScope ? handleDeleteCategory : undefined}
+					onAddTask={canEditScope ? showAddTaskForm : undefined}
+					onEditTask={canEditScope ? showEditTaskForm : undefined}
+					onDeleteTask={canEditScope ? handleDeleteTask : undefined}
+				/>
+			{:else}
+				<div class="py-8 text-center">
+					<svg
+						class="mx-auto h-12 w-12 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+						/>
+					</svg>
+					<h3 class="mt-2 text-sm font-medium text-theme">No Scope Defined</h3>
+					<p class="mt-1 text-sm text-theme-muted">
+						{#if canEditScope}
+							A scope with categories and tasks is required before starting a session.
+						{:else}
+							This project does not have a scope assigned.
+						{/if}
+					</p>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Session Section -->
+		{#if project.status === 'IN_PROGRESS' && session}
+			<section>
+				<SessionSectionHeader isActive={true} sessionType="project" />
+				<SessionContent
+					sessionType="project"
+					isActive={true}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					scopeDescription={scope?.description}
+					addressInfo={address()}
+					teamMembers={teamMembers()}
+					areas={scope?.projectAreas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{isSubmitting}
+					{isReverting}
+					{submittingTaskId}
+					{removingTaskId}
+					{getTeamMemberName}
+					onClose={handleCloseSession}
+					onRevert={canRevertSession ? handleRevertSession : undefined}
+					onToggleTask={toggleTask}
+					onSubmitTask={handleSubmitTask}
+					onRemoveTask={handleRemoveTask}
+					onRemoveCompletedTask={handleRemoveCompletedTask}
+					onSubmitAllTasks={handleSubmitAllTasks}
+					onClearSelection={() => selectedTaskIds.clear()}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdatePhoto={handleUpdatePhoto}
+					onUpdateVideo={handleUpdateVideo}
+					onDeletePhoto={handleDeletePhoto}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if project.status === 'COMPLETED' && session}
+			<section>
+				<SessionSectionHeader isActive={false} sessionType="project" />
+				<SessionContent
+					sessionType="project"
+					isActive={false}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					addressInfo={address()}
+					teamMembers={teamMembers()}
+					areas={scope?.projectAreas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{getTeamMemberName}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUpdatePhoto={handleUpdatePhoto}
+					onDeletePhoto={handleDeletePhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdateVideo={handleUpdateVideo}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if project.status === 'SCHEDULED'}
+			{#if hasScopeWithTasks()}
+				<StartSessionButton
+					isLoading={isStartingSession}
+					backLabel="Back to Projects"
+					onStart={handleStartSession}
+					onBack={() => goto('/admin/projects', { invalidateAll: true })}
+				/>
+			{:else}
+				<div class="warning-box">
+					<div class="flex items-start gap-3">
+						<svg
+							class="warning-box-icon"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+							/>
+						</svg>
+						<div>
+							<h3 class="warning-box-title">Scope Required</h3>
+							<p class="warning-box-text">
+								{#if !scope}
+									Create a project scope with categories and tasks before starting a session.
+								{:else}
+									Add at least one category with tasks to the scope before starting a session.
+								{/if}
+							</p>
+						</div>
+					</div>
+					<div class="mt-4 flex items-center gap-3">
+						<a
+							href="/admin/projects"
+							class="rounded-lg border border-theme interactive bg-theme px-4 py-2 text-sm font-medium text-theme"
+						>
+							Back to Projects
+						</a>
+					</div>
+				</div>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Delete Confirmation Modals -->
+<DeleteConfirmModal
+	open={!!deleteScopeId}
+	title="Delete Project Scope"
+	message="Are you sure you want to delete this scope? All categories and tasks will be removed."
+	loading={deleteLoading}
+	onconfirm={confirmDeleteScope}
+	oncancel={() => (deleteScopeId = null)}
+/>
+
+<DeleteConfirmModal
+	open={!!deleteCategoryId}
+	title="Delete Category"
+	message="Are you sure you want to delete this category? All tasks will be removed."
+	loading={deleteLoading}
+	onconfirm={confirmDeleteCategory}
+	oncancel={() => (deleteCategoryId = null)}
+/>
+
+<DeleteConfirmModal
+	open={!!deleteTaskId}
+	title="Delete Task"
+	message="Are you sure you want to delete this task?"
+	loading={deleteLoading}
+	onconfirm={confirmDeleteTask}
+	oncancel={() => (deleteTaskId = null)}
+/>
diff --git a/src/routes/admin/reports/+page.svelte b/src/routes/admin/reports/+page.svelte
new file mode 100644
index 0000000..5455c1b
--- /dev/null
+++ b/src/routes/admin/reports/+page.svelte
@@ -0,0 +1,356 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import ReportForm from '$lib/components/admin/reports/ReportForm.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { goto } from '$app/navigation';
+	import { invalidateDashboard } from '$lib/utils/invalidate';
+	import { page } from '$app/state';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			goto('/admin/reports', { replaceState: true, noScroll: true });
+		}
+	});
+
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let reports = $derived(data.reports ?? []);
+
+	// Create lookup map for team members by UUID (defined early for use in effect)
+	let teamMemberLookup = $derived(
+		new Map(
+			teamProfiles.map((profile) => [
+				fromGlobalId(profile.id),
+				{ id: profile.id, fullName: profile.fullName, lastName: profile.lastName }
+			])
+		)
+	);
+
+	// Sort reports by date descending, then by team member last name ascending
+	let sortedReports = $derived(
+		[...reports].sort((a, b) => {
+			// First sort by date descending
+			const dateCompare = b.date.localeCompare(a.date);
+			if (dateCompare !== 0) return dateCompare;
+
+			// Then by team member last name ascending
+			const aLastName = teamMemberLookup.get(a.teamMemberId)?.lastName ?? '';
+			const bLastName = teamMemberLookup.get(b.teamMemberId)?.lastName ?? '';
+			return aLastName.localeCompare(bLastName);
+		})
+	);
+
+	// Search and filter
+	let searchQuery = $state('');
+	let selectedTeamMemberId = $state<string>('');
+
+	// Filter reports
+	let filteredReports = $derived.by(() => {
+		let filtered = sortedReports;
+
+		// Filter by team member (comparing UUIDs)
+		if (selectedTeamMemberId) {
+			const selectedUuid = fromGlobalId(selectedTeamMemberId);
+			filtered = filtered.filter((r) => r.teamMemberId === selectedUuid);
+		}
+
+		// Filter by search query (team member name or date)
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			filtered = filtered.filter((r) => {
+				const teamMember = teamMemberLookup.get(r.teamMemberId);
+				const name = teamMember?.fullName?.toLowerCase() ?? '';
+				const date = formatReportDate(r.date).toLowerCase();
+				return name.includes(query) || date.includes(query);
+			});
+		}
+
+		return filtered;
+	});
+
+	// Get team member name from UUID
+	function getTeamMemberName(teamMemberId: string): string {
+		return teamMemberLookup.get(teamMemberId)?.fullName ?? 'Unknown';
+	}
+
+	// Format date for display (Dec 15, 2024)
+	function formatReportDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Report',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateDashboard();
+	}
+
+	// Non-admin team members for filter dropdown
+	let nonAdminTeamMembers = $derived(teamProfiles.filter((p) => p.role !== 'ADMIN'));
+</script>
+
+{#snippet createFormContent()}
+	<ReportForm {teamProfiles} onSuccess={handleSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>Reports - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+				<div class="flex items-start gap-4">
+					<a
+						href="/admin"
+						class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+						aria-label="Go back"
+					>
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 19l-7-7 7-7"
+							/>
+						</svg>
+					</a>
+					<div>
+						<h1 class="text-2xl font-bold text-accent2-600 md:text-3xl dark:text-accent2-400">
+							Reports
+						</h1>
+						<p class="mt-2 text-theme-secondary">
+							Create and manage monthly labor reports for team members.
+						</p>
+					</div>
+				</div>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="hidden items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600 sm:inline-flex"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Report</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Search and Filter -->
+		<div class="mb-6 flex flex-col gap-4 sm:flex-row">
+			<!-- Search -->
+			<div class="relative flex-1">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search reports..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
+				/>
+			</div>
+
+			<!-- Team Member Filter -->
+			<select
+				bind:value={selectedTeamMemberId}
+				class="rounded-lg border border-theme bg-theme-card px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 sm:w-64"
+			>
+				<option value="">All Team Members</option>
+				{#each nonAdminTeamMembers as profile (profile.id)}
+					<option value={profile.id}>{profile.fullName}</option>
+				{/each}
+			</select>
+		</div>
+
+		<!-- Reports List -->
+		{#if filteredReports.length > 0}
+			<div class="space-y-4">
+				{#each filteredReports as report (report.id)}
+					<a href="/admin/reports/{report.id}" class="block">
+						<div class="card-report">
+							<div class="flex items-start justify-between gap-4">
+								<div class="min-w-0 flex-1 space-y-3">
+									<!-- Report Month & Team Member -->
+									<div>
+										<h3 class="text-lg font-semibold text-accent2-600 dark:text-accent2-400">
+											{formatReportDate(report.date)}
+										</h3>
+										<p class="text-sm text-theme-secondary">
+											{getTeamMemberName(report.teamMemberId)}
+										</p>
+									</div>
+
+									<!-- Labor Breakdown -->
+									<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+										<!-- Services Labor -->
+										<div class="rounded-lg bg-secondary-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-secondary-600 uppercase dark:text-secondary-400"
+											>
+												Services
+											</p>
+											<p class="mt-1 text-lg font-bold text-secondary-700 dark:text-secondary-300">
+												{formatCurrency(report.servicesLaborTotal)}
+											</p>
+										</div>
+
+										<!-- Projects Labor -->
+										<div class="rounded-lg bg-accent-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-accent-600 uppercase dark:text-accent-400"
+											>
+												Projects
+											</p>
+											<p class="mt-1 text-lg font-bold text-accent-700 dark:text-accent-300">
+												{formatCurrency(report.projectsLaborTotal)}
+											</p>
+										</div>
+
+										<!-- Total Labor -->
+										<div class="rounded-lg bg-accent2-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-accent2-600 uppercase dark:text-accent2-400"
+											>
+												Total
+											</p>
+											<p class="mt-1 text-lg font-bold text-accent2-700 dark:text-accent2-300">
+												{formatCurrency(report.totalLaborValue)}
+											</p>
+										</div>
+									</div>
+								</div>
+
+								<!-- Chevron -->
+								<svg
+									class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery || selectedTeamMemberId}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent2-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Reports Found</h2>
+				<p class="empty-state-text">
+					No reports match your search criteria. Try adjusting your filters.
+				</p>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent2-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Reports Yet</h2>
+				<p class="empty-state-text">
+					Get started by creating your first labor report. Reports track team member earnings from
+					completed services and projects.
+				</p>
+				<button
+					type="button"
+					onclick={showCreateForm}
+					class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-white transition-colors hover:bg-primary-600"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					<span>Create Report</span>
+				</button>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Mobile FAB -->
+<button
+	type="button"
+	onclick={showCreateForm}
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden"
+	aria-label="Create Report"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</button>
diff --git a/src/routes/admin/reports/[report]/+page.server.ts b/src/routes/admin/reports/[report]/+page.server.ts
new file mode 100644
index 0000000..161b3ab
--- /dev/null
+++ b/src/routes/admin/reports/[report]/+page.server.ts
@@ -0,0 +1,30 @@
+import { GetReportStore } from '$houdini';
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { fromGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { report: reportId } = event.params;
+
+	const fetchParams = {
+		event,
+		metadata: { cookie: event.locals.cookie }
+	};
+
+	// Fetch the report with full details
+	const report = await new GetReportStore().fetch({
+		...fetchParams,
+		variables: {
+			id: reportId
+		}
+	});
+
+	if (!report.data?.report) {
+		throw error(404, 'Report not found');
+	}
+
+	return {
+		report: report.data.report,
+		reportUuid: fromGlobalId(reportId)
+	};
+};
diff --git a/src/routes/admin/reports/[report]/+page.svelte b/src/routes/admin/reports/[report]/+page.svelte
new file mode 100644
index 0000000..468fd75
--- /dev/null
+++ b/src/routes/admin/reports/[report]/+page.svelte
@@ -0,0 +1,502 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import AddServicesModal from '$lib/components/admin/reports/AddServicesModal.svelte';
+	import AddProjectsModal from '$lib/components/admin/reports/AddProjectsModal.svelte';
+	import { DeleteReportStore, UpdateReportStore } from '$houdini';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let report = $derived(data.report);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Get team member name from UUID
+	let teamMemberName = $derived(() => {
+		const profile = teamProfiles.find((p) => {
+			return fromGlobalId(p.id) === report.teamMemberId;
+		});
+		return profile?.fullName ?? 'Unknown Team Member';
+	});
+
+	let showDeleteModal = $state(false);
+	let showAddServicesModal = $state(false);
+	let showAddProjectsModal = $state(false);
+	let isDeleting = $state(false);
+
+	const deleteStore = new DeleteReportStore();
+	const updateStore = new UpdateReportStore();
+
+	// Create lookup maps for labor breakdown by service/project ID
+	let serviceLaborMap = $derived(
+		new Map(
+			(report.laborBreakdown?.services ?? []).map((s) => [
+				s.serviceId,
+				{
+					totalLaborRate: s.totalLaborRate as string | number,
+					teamMemberCount: s.teamMemberCount,
+					laborShare: s.laborShare as string | number
+				}
+			])
+		)
+	);
+
+	let projectLaborMap = $derived(
+		new Map(
+			(report.laborBreakdown?.projects ?? []).map((p) => [
+				p.projectId,
+				{
+					totalLaborAmount: p.totalLaborAmount as string | number,
+					teamMemberCount: p.teamMemberCount,
+					laborShare: p.laborShare as string | number
+				}
+			])
+		)
+	);
+
+	// Format date for display (Dec 15, 2024)
+	function formatReportDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		});
+	}
+
+	// Format item date (short)
+	function formatItemDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get service display name: "Date, Account Name"
+	function getServiceDisplayName(service: {
+		date: string;
+		accountAddressId: string | null;
+	}): string {
+		const dateStr = formatItemDate(service.date);
+		const accountInfo = service.accountAddressId
+			? accountLookup.get(service.accountAddressId)
+			: null;
+		const accountName = accountInfo?.accountName ?? 'Unknown Account';
+		return `${dateStr}, ${accountName}`;
+	}
+
+	// Get project display name: "Date, Account/Customer - Project Name"
+	function getProjectDisplayName(project: {
+		date: string;
+		name: string;
+		accountAddressId: string | null;
+		customerId: string | null;
+	}): string {
+		const dateStr = formatItemDate(project.date);
+
+		let entityName = 'Unknown';
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId);
+			if (accountInfo) {
+				entityName = accountInfo.accountName;
+			}
+		} else if (project.customerId) {
+			const customerInfo = customerLookup.get(project.customerId);
+			if (customerInfo) {
+				entityName = customerInfo.customerName;
+			}
+		}
+
+		return `${dateStr}, ${entityName} - ${project.name}`;
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	let reportTitle = $derived(formatReportDate(report.date));
+
+	// Remove a service from the report
+	async function removeService(serviceId: string) {
+		const currentServiceIds = report.services.map((s) => s.id);
+		const newServiceIds = currentServiceIds.filter((id) => id !== serviceId);
+
+		try {
+			await updateStore.mutate({
+				input: {
+					id: report.id,
+					serviceIds: newServiceIds.length > 0 ? newServiceIds : null
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove service:', err);
+		}
+	}
+
+	// Remove a project from the report
+	async function removeProject(projectId: string) {
+		const currentProjectIds = report.projects.map((p) => p.id);
+		const newProjectIds = currentProjectIds.filter((id) => id !== projectId);
+
+		try {
+			await updateStore.mutate({
+				input: {
+					id: report.id,
+					projectIds: newProjectIds.length > 0 ? newProjectIds : null
+				}
+			});
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove project:', err);
+		}
+	}
+
+	async function handleDelete() {
+		isDeleting = true;
+		try {
+			await deleteStore.mutate({ id: report.id });
+			await goto('/admin/reports', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to delete report:', err);
+			alert('Failed to delete report. Please try again.');
+		} finally {
+			isDeleting = false;
+			showDeleteModal = false;
+		}
+	}
+
+	async function handleServicesUpdated() {
+		await invalidateAll();
+	}
+
+	async function handleProjectsUpdated() {
+		await invalidateAll();
+	}
+</script>
+
+<svelte:head>
+	<title>{reportTitle} Report - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={reportTitle}
+			subtitle={teamMemberName()}
+			colorScheme="accent2"
+			backHref="/admin/reports"
+		/>
+
+		<!-- Labor Summary Card -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Labor Summary</h3>
+
+			<div class="space-y-4">
+				<!-- Services Labor -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20">
+							<svg
+								class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Services</p>
+							<p class="text-sm text-theme-muted">
+								{report.services.length} service{report.services.length !== 1 ? 's' : ''}
+							</p>
+						</div>
+					</div>
+					<p class="text-lg font-bold text-secondary-600 dark:text-secondary-400">
+						{formatCurrency(report.servicesLaborTotal)}
+					</p>
+				</div>
+
+				<!-- Projects Labor -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/20">
+							<svg
+								class="h-5 w-5 text-accent-600 dark:text-accent-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Projects</p>
+							<p class="text-sm text-theme-muted">
+								{report.projects.length} project{report.projects.length !== 1 ? 's' : ''}
+							</p>
+						</div>
+					</div>
+					<p class="text-lg font-bold text-accent-600 dark:text-accent-400">
+						{formatCurrency(report.projectsLaborTotal)}
+					</p>
+				</div>
+
+				<!-- Total -->
+				<div class="flex items-center justify-between py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent2-500/20">
+							<svg
+								class="h-5 w-5 text-accent2-600 dark:text-accent2-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Total Labor</p>
+							<p class="text-sm text-theme-muted">Combined earnings for the month</p>
+						</div>
+					</div>
+					<p class="text-xl font-bold text-accent2-600 dark:text-accent2-400">
+						{formatCurrency(report.totalLaborValue)}
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Services Section -->
+		<div class="mb-6 card-padded">
+			<div class="mb-4 flex items-center justify-between">
+				<h3 class="text-sm font-medium text-theme-muted">Services</h3>
+				<button
+					onclick={() => (showAddServicesModal = true)}
+					class="flex items-center gap-1.5 rounded-lg bg-secondary-500/10 px-3 py-1.5 text-sm font-medium text-secondary-600 transition-colors hover:bg-secondary-500/20 dark:text-secondary-400"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					Add Services
+				</button>
+			</div>
+
+			{#if report.services.length === 0}
+				<p class="text-sm text-theme-muted italic">No services added to this report.</p>
+			{:else}
+				<div class="space-y-2">
+					{#each report.services as service (service.id)}
+						{@const labor = serviceLaborMap.get(service.id)}
+						<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+							<div class="flex items-start justify-between gap-2">
+								<div class="min-w-0 flex-1">
+									<p class="text-sm font-medium text-theme">{getServiceDisplayName(service)}</p>
+									{#if labor}
+										<div
+											class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-theme-muted"
+										>
+											<span>Total: {formatCurrency(labor.totalLaborRate)}</span>
+											<span>Team: {labor.teamMemberCount}</span>
+											<span class="font-semibold text-secondary-600 dark:text-secondary-400">
+												Share: {formatCurrency(labor.laborShare)}
+											</span>
+										</div>
+									{/if}
+								</div>
+								<button
+									onclick={() => removeService(service.id)}
+									class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+									title="Remove service"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Projects Section -->
+		<div class="mb-6 card-padded">
+			<div class="mb-4 flex items-center justify-between">
+				<h3 class="text-sm font-medium text-theme-muted">Projects</h3>
+				<button
+					onclick={() => (showAddProjectsModal = true)}
+					class="flex items-center gap-1.5 rounded-lg bg-accent-500/10 px-3 py-1.5 text-sm font-medium text-accent-600 transition-colors hover:bg-accent-500/20 dark:text-accent-400"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					Add Projects
+				</button>
+			</div>
+
+			{#if report.projects.length === 0}
+				<p class="text-sm text-theme-muted italic">No projects added to this report.</p>
+			{:else}
+				<div class="space-y-2">
+					{#each report.projects as project (project.id)}
+						{@const labor = projectLaborMap.get(project.id)}
+						<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+							<div class="flex items-start justify-between gap-2">
+								<div class="min-w-0 flex-1">
+									<p class="text-sm font-medium text-theme">{getProjectDisplayName(project)}</p>
+									{#if labor}
+										<div
+											class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-theme-muted"
+										>
+											<span>Total: {formatCurrency(labor.totalLaborAmount)}</span>
+											<span>Team: {labor.teamMemberCount}</span>
+											<span class="font-semibold text-accent-600 dark:text-accent-400">
+												Share: {formatCurrency(labor.laborShare)}
+											</span>
+										</div>
+									{/if}
+								</div>
+								<button
+									onclick={() => removeProject(project.id)}
+									class="rounded p-1 text-theme-muted transition-colors hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
+									title="Remove project"
+								>
+									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
+									</svg>
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Labor Breakdown Details -->
+		{#if report.laborBreakdown && (report.laborBreakdown.services.length > 0 || report.laborBreakdown.projects.length > 0)}
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Labor Breakdown</h3>
+
+				<!-- Totals Summary -->
+				<div class="rounded-lg bg-accent2-500/10 p-4">
+					<div class="space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="text-theme-secondary">Services Total:</span>
+							<span class="font-semibold text-theme"
+								>{formatCurrency(report.laborBreakdown.servicesTotal)}</span
+							>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="text-theme-secondary">Projects Total:</span>
+							<span class="font-semibold text-theme"
+								>{formatCurrency(report.laborBreakdown.projectsTotal)}</span
+							>
+						</div>
+						<div class="flex items-center justify-between border-t border-accent2-500/20 pt-2">
+							<span class="font-semibold text-accent2-600 dark:text-accent2-400">Grand Total:</span>
+							<span class="text-lg font-bold text-accent2-600 dark:text-accent2-400"
+								>{formatCurrency(report.laborBreakdown.grandTotal)}</span
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Danger Zone -->
+		<div
+			class="rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-900/20"
+		>
+			<h2 class="mb-2 text-lg font-semibold text-red-700 dark:text-red-400">Danger Zone</h2>
+			<p class="mb-4 text-sm text-red-600 dark:text-red-300">
+				Deleting this report will permanently remove it. This action cannot be undone.
+			</p>
+			<button
+				onclick={() => (showDeleteModal = true)}
+				class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
+			>
+				Delete Report
+			</button>
+		</div>
+	</ContentContainer>
+</div>
+
+<DeleteConfirmModal
+	bind:open={showDeleteModal}
+	title="Delete Report"
+	message="Are you sure you want to delete this report? This action cannot be undone."
+	onconfirm={handleDelete}
+	oncancel={() => {}}
+	loading={isDeleting}
+/>
+
+<AddServicesModal
+	bind:open={showAddServicesModal}
+	{report}
+	teamMemberId={report.teamMemberId}
+	{accountLookup}
+	onSuccess={handleServicesUpdated}
+/>
+
+<AddProjectsModal
+	bind:open={showAddProjectsModal}
+	{report}
+	teamMemberId={report.teamMemberId}
+	{accountLookup}
+	{customerLookup}
+	onSuccess={handleProjectsUpdated}
+/>
diff --git a/src/routes/admin/scopes/+page.svelte b/src/routes/admin/scopes/+page.svelte
new file mode 100644
index 0000000..0e69ffc
--- /dev/null
+++ b/src/routes/admin/scopes/+page.svelte
@@ -0,0 +1,1646 @@
+<script lang="ts">
+	import type {PageData} from './$types';
+	import {GetProjectScopeTemplatesStore, GetScopeTemplatesStore} from '$houdini';
+	import {
+		createAreaTemplate,
+		createProjectAreaTemplate,
+		createProjectScopeTemplate,
+		createProjectScopeTemplateFromJson,
+		createProjectTaskTemplate,
+		createScopeTemplate,
+		createScopeTemplateFromJson,
+		createTaskTemplate,
+		deleteAreaTemplate,
+		deleteProjectAreaTemplate,
+		deleteProjectScopeTemplate,
+		deleteProjectTaskTemplate,
+		deleteScopeTemplate,
+		deleteTaskTemplate,
+		updateAreaTemplate,
+		updateProjectAreaTemplate,
+		updateProjectScopeTemplate,
+		updateProjectTaskTemplate,
+		updateScopeTemplate,
+		updateTaskTemplate
+	} from '$lib/utils/scopes';
+	import {slide} from 'svelte/transition';
+	import {SvelteSet} from 'svelte/reactivity';
+	import TemplateList from '$lib/components/admin/scopes/TemplateList.svelte';
+	import TemplateEditor from '$lib/components/admin/scopes/TemplateEditor.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	// Types
+	type TaskTemplate = {
+		id: string;
+		description: string;
+		checklistDescription: string | null;
+		frequency?: string | null;
+		isConditional?: boolean;
+		order: number;
+		estimatedMinutes: number | null;
+	};
+
+	type AreaTemplate = {
+		id: string;
+		name: string;
+		order: number;
+		taskTemplates: TaskTemplate[];
+	};
+
+	type ScopeTemplate = {
+		id: string;
+		name: string;
+		description: string | null;
+		isActive: boolean;
+		areaTemplates: AreaTemplate[];
+	};
+
+	type CategoryTemplate = {
+		id: string;
+		name: string;
+		order: number;
+		taskTemplates: TaskTemplate[];
+	};
+
+	type ProjectScopeTemplate = {
+		id: string;
+		name: string;
+		description: string | null;
+		isActive: boolean;
+		categoryTemplates: CategoryTemplate[];
+	};
+
+	// Tab state
+	type TabType = 'service' | 'project';
+	let activeTab = $state<TabType>('service');
+
+	// Mobile detection - use md breakpoint (768px) for two-pane layout
+	let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 768);
+	let isDesktop = $derived(windowWidth >= 768);
+
+	// Mobile view state
+	type MobileView = 'list' | 'editor';
+	let mobileView = $state<MobileView>('list');
+
+	// Stores for refetching data after mutations
+	let serviceScopeStore = $state(new GetScopeTemplatesStore());
+	let projectScopeStore = $state(new GetProjectScopeTemplatesStore());
+
+	// UI state
+	let isLoading = $state(false);
+	let error = $state('');
+	let selectedServiceTemplateId = $state<string | null>(null);
+	let selectedProjectTemplateId = $state<string | null>(null);
+
+	// Expanded areas/categories
+	let expandedServiceAreas = new SvelteSet<string>();
+	let expandedProjectCategories = new SvelteSet<string>();
+
+	// Edit modes
+	let editingTemplateName = $state<string | null>(null);
+	let editingAreaName = $state<string | null>(null);
+	let editingTaskId = $state<string | null>(null);
+
+	// New item state
+	let newTemplateName = $state('');
+	let newAreaName = $state('');
+	let newTaskDescription = $state('');
+	let showNewTemplateInput = $state(false);
+	let showNewAreaInput = $state<string | null>(null);
+	let showNewTaskInput = $state<string | null>(null);
+
+	// JSON Import modal
+	let showJsonImportModal = $state(false);
+	let jsonImportText = $state('');
+	let jsonImportReplace = $state(false);
+	let jsonImportError = $state('');
+	type JsonImportPayload = {
+		name?: string;
+		areas?: unknown[];
+		categories?: unknown[];
+	};
+	let jsonImportParsed = $state<JsonImportPayload | null>(null);
+
+	// JSON Export modal
+	let showJsonExportModal = $state(false);
+	let jsonExportText = $state('');
+	let jsonExportCopied = $state(false);
+
+	// Window resize handler
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const handleResize = () => {
+				windowWidth = window.innerWidth;
+			};
+			window.addEventListener('resize', handleResize);
+			return () => window.removeEventListener('resize', handleResize);
+		}
+	});
+
+	// Derived data - use store data if available (after mutations refetch), otherwise use server data
+	let serviceTemplates = $derived(
+		(($serviceScopeStore.data?.scopeTemplates ?? data?.serviceScopes) as ScopeTemplate[]) ?? []
+	);
+	let projectTemplates = $derived(
+		(($projectScopeStore.data?.projectScopeTemplates ??
+			data?.projectScopes) as ProjectScopeTemplate[]) ?? []
+	);
+
+	let selectedServiceTemplate = $derived(
+		serviceTemplates.find((t) => t.id === selectedServiceTemplateId) ?? null
+	);
+	let selectedProjectTemplate = $derived(
+		projectTemplates.find((t) => t.id === selectedProjectTemplateId) ?? null
+	);
+
+	// Tab toggle functions (for mobile)
+	function previousTab() {
+		activeTab = activeTab === 'service' ? 'project' : 'service';
+	}
+
+	function nextTab() {
+		activeTab = activeTab === 'service' ? 'project' : 'service';
+	}
+
+	// Template selection (toggle on desktop, always open on mobile)
+	function selectServiceTemplate(id: string) {
+		if (isDesktop && selectedServiceTemplateId === id) {
+			// Toggle off on desktop
+			selectedServiceTemplateId = null;
+		} else {
+			selectedServiceTemplateId = id;
+			expandedServiceAreas.clear();
+			if (!isDesktop) {
+				mobileView = 'editor';
+			}
+		}
+	}
+
+	function selectProjectTemplate(id: string) {
+		if (isDesktop && selectedProjectTemplateId === id) {
+			// Toggle off on desktop
+			selectedProjectTemplateId = null;
+		} else {
+			selectedProjectTemplateId = id;
+			expandedProjectCategories.clear();
+			if (!isDesktop) {
+				mobileView = 'editor';
+			}
+		}
+	}
+
+	// Area/Category expansion
+	function toggleServiceArea(areaId: string) {
+		if (expandedServiceAreas.has(areaId)) {
+			expandedServiceAreas.delete(areaId);
+		} else {
+			expandedServiceAreas.add(areaId);
+		}
+	}
+
+	function toggleProjectCategory(categoryId: string) {
+		if (expandedProjectCategories.has(categoryId)) {
+			expandedProjectCategories.delete(categoryId);
+		} else {
+			expandedProjectCategories.add(categoryId);
+		}
+	}
+
+	// CRUD Operations - Service Scope Templates
+	async function handleCreateServiceTemplate() {
+		if (!newTemplateName.trim()) return;
+		try {
+			const result = await createScopeTemplate({
+				name: newTemplateName.trim(),
+				description: '',
+				isActive: true
+			});
+			await serviceScopeStore.fetch();
+			selectedServiceTemplateId = result.id;
+			newTemplateName = '';
+			showNewTemplateInput = false;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create template';
+		}
+	}
+
+	async function handleUpdateServiceTemplate(id: string, name: string) {
+		try {
+			await updateScopeTemplate({ id, name });
+			await serviceScopeStore.fetch();
+			editingTemplateName = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update template';
+		}
+	}
+
+	async function handleUpdateServiceTemplateDescription(id: string, description: string) {
+		try {
+			await updateScopeTemplate({ id, description });
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update template description';
+		}
+	}
+
+	async function handleDeleteServiceTemplate(id: string) {
+		if (!confirm('Delete this template and all its areas/tasks?')) return;
+		try {
+			await deleteScopeTemplate(id);
+			await serviceScopeStore.fetch();
+			if (selectedServiceTemplateId === id) {
+				selectedServiceTemplateId = null;
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete template';
+		}
+	}
+
+	async function handleCreateServiceArea(templateId: string) {
+		if (!newAreaName.trim()) return;
+		try {
+			await createAreaTemplate({
+				scopeTemplateId: templateId,
+				name: newAreaName.trim(),
+				order: selectedServiceTemplate?.areaTemplates.length ?? 0
+			});
+			await serviceScopeStore.fetch();
+			newAreaName = '';
+			showNewAreaInput = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create area';
+		}
+	}
+
+	async function handleUpdateServiceArea(id: string, name: string) {
+		try {
+			await updateAreaTemplate({ id, name });
+			await serviceScopeStore.fetch();
+			editingAreaName = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update area';
+		}
+	}
+
+	async function handleDeleteServiceArea(id: string) {
+		if (!confirm('Delete this area and all its tasks?')) return;
+		try {
+			await deleteAreaTemplate(id);
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete area';
+		}
+	}
+
+	async function handleCreateServiceTask(areaId: string) {
+		if (!newTaskDescription.trim()) return;
+		try {
+			const area = selectedServiceTemplate?.areaTemplates.find((a) => a.id === areaId);
+			await createTaskTemplate({
+				areaTemplateId: areaId,
+				description: newTaskDescription.trim(),
+				checklistDescription: '',
+				frequency: 'weekly',
+				isConditional: false,
+				order: area?.taskTemplates.length ?? 0,
+				estimatedMinutes: null
+			});
+			await serviceScopeStore.fetch();
+			newTaskDescription = '';
+			showNewTaskInput = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create task';
+		}
+	}
+
+	async function handleDeleteServiceTask(id: string) {
+		if (!confirm('Delete this task?')) return;
+		try {
+			await deleteTaskTemplate(id);
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete task';
+		}
+	}
+
+	async function handleUpdateServiceTask(
+		taskId: string,
+		updates: {
+			description?: string;
+			checklistDescription?: string;
+			frequency?: string;
+			estimatedMinutes?: number | null;
+		}
+	) {
+		try {
+			await updateTaskTemplate({
+				id: taskId,
+				...updates
+			});
+			await serviceScopeStore.fetch();
+			editingTaskId = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update task';
+		}
+	}
+
+	async function handleMoveServiceAreaUp(areaId: string) {
+		if (!selectedServiceTemplate) return;
+		try {
+			const areas = [...selectedServiceTemplate.areaTemplates].sort((a, b) => a.order - b.order);
+			const index = areas.findIndex((a) => a.id === areaId);
+			if (index <= 0) return; // Already at top or not found
+			const currentArea = areas[index];
+			const previousArea = areas[index - 1];
+			const tempOrder = currentArea.order;
+			await updateAreaTemplate({ id: currentArea.id, order: previousArea.order });
+			await updateAreaTemplate({ id: previousArea.id, order: tempOrder });
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder area';
+			await serviceScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveServiceAreaDown(areaId: string) {
+		if (!selectedServiceTemplate) return;
+		try {
+			const areas = [...selectedServiceTemplate.areaTemplates].sort((a, b) => a.order - b.order);
+			const index = areas.findIndex((a) => a.id === areaId);
+			if (index === -1 || index >= areas.length - 1) return; // Already at bottom or not found
+			const currentArea = areas[index];
+			const nextArea = areas[index + 1];
+			const tempOrder = currentArea.order;
+			await updateAreaTemplate({ id: currentArea.id, order: nextArea.order });
+			await updateAreaTemplate({ id: nextArea.id, order: tempOrder });
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder area';
+			await serviceScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveServiceTaskUp(taskId: string, areaId: string) {
+		if (!selectedServiceTemplate) return;
+		try {
+			const area = selectedServiceTemplate.areaTemplates.find((a) => a.id === areaId);
+			if (!area) return;
+			const tasks = [...area.taskTemplates].sort((a, b) => a.order - b.order);
+			const index = tasks.findIndex((t) => t.id === taskId);
+			if (index <= 0) return; // Already at top or not found
+			const currentTask = tasks[index];
+			const previousTask = tasks[index - 1];
+			const tempOrder = currentTask.order;
+			await updateTaskTemplate({ id: currentTask.id, order: previousTask.order });
+			await updateTaskTemplate({ id: previousTask.id, order: tempOrder });
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder task';
+			await serviceScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveServiceTaskDown(taskId: string, areaId: string) {
+		if (!selectedServiceTemplate) return;
+		try {
+			const area = selectedServiceTemplate.areaTemplates.find((a) => a.id === areaId);
+			if (!area) return;
+			const tasks = [...area.taskTemplates].sort((a, b) => a.order - b.order);
+			const index = tasks.findIndex((t) => t.id === taskId);
+			if (index === -1 || index >= tasks.length - 1) return; // Already at bottom or not found
+			const currentTask = tasks[index];
+			const nextTask = tasks[index + 1];
+			const tempOrder = currentTask.order;
+			await updateTaskTemplate({ id: currentTask.id, order: nextTask.order });
+			await updateTaskTemplate({ id: nextTask.id, order: tempOrder });
+			await serviceScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder task';
+			await serviceScopeStore.fetch();
+		}
+	}
+
+	// CRUD Operations - Project Scope Templates
+	async function handleCreateProjectTemplate() {
+		if (!newTemplateName.trim()) return;
+		try {
+			const result = await createProjectScopeTemplate({
+				name: newTemplateName.trim(),
+				description: '',
+				isActive: true
+			});
+			await projectScopeStore.fetch();
+			selectedProjectTemplateId = result.id;
+			newTemplateName = '';
+			showNewTemplateInput = false;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create template';
+		}
+	}
+
+	async function handleUpdateProjectTemplate(id: string, name: string) {
+		try {
+			await updateProjectScopeTemplate({ id, name });
+			await projectScopeStore.fetch();
+			editingTemplateName = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update template';
+		}
+	}
+
+	async function handleUpdateProjectTemplateDescription(id: string, description: string) {
+		try {
+			await updateProjectScopeTemplate({ id, description });
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update template description';
+		}
+	}
+
+	async function handleDeleteProjectTemplate(id: string) {
+		if (!confirm('Delete this template and all its categories/tasks?')) return;
+		try {
+			await deleteProjectScopeTemplate(id);
+			await projectScopeStore.fetch();
+			if (selectedProjectTemplateId === id) {
+				selectedProjectTemplateId = null;
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete template';
+		}
+	}
+
+	async function handleCreateProjectCategory(templateId: string) {
+		if (!newAreaName.trim()) return;
+		try {
+			await createProjectAreaTemplate({
+				scopeTemplateId: templateId,
+				name: newAreaName.trim(),
+				order: selectedProjectTemplate?.categoryTemplates.length ?? 0
+			});
+			await projectScopeStore.fetch();
+			newAreaName = '';
+			showNewAreaInput = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create category';
+		}
+	}
+
+	async function handleUpdateProjectCategory(id: string, name: string) {
+		try {
+			await updateProjectAreaTemplate({ id, name });
+			await projectScopeStore.fetch();
+			editingAreaName = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update category';
+		}
+	}
+
+	async function handleDeleteProjectCategory(id: string) {
+		if (!confirm('Delete this category and all its tasks?')) return;
+		try {
+			await deleteProjectAreaTemplate(id);
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete category';
+		}
+	}
+
+	async function handleCreateProjectTask(categoryId: string) {
+		if (!newTaskDescription.trim()) return;
+		try {
+			const category = selectedProjectTemplate?.categoryTemplates.find((c) => c.id === categoryId);
+			await createProjectTaskTemplate({
+				areaTemplateId: categoryId,
+				description: newTaskDescription.trim(),
+				checklistDescription: '',
+				order: category?.taskTemplates.length ?? 0,
+				estimatedMinutes: null
+			});
+			await projectScopeStore.fetch();
+			newTaskDescription = '';
+			showNewTaskInput = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create task';
+		}
+	}
+
+	async function handleDeleteProjectTask(id: string) {
+		if (!confirm('Delete this task?')) return;
+		try {
+			await deleteProjectTaskTemplate(id);
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete task';
+		}
+	}
+
+	async function handleUpdateProjectTask(
+		taskId: string,
+		updates: {
+			description?: string;
+			checklistDescription?: string;
+			estimatedMinutes?: number | null;
+		}
+	) {
+		try {
+			await updateProjectTaskTemplate({
+				id: taskId,
+				...updates
+			});
+			await projectScopeStore.fetch();
+			editingTaskId = null;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update task';
+		}
+	}
+
+	async function handleMoveProjectCategoryUp(categoryId: string) {
+		if (!selectedProjectTemplate) return;
+		try {
+			const categories = [...selectedProjectTemplate.categoryTemplates].sort(
+				(a, b) => a.order - b.order
+			);
+			const index = categories.findIndex((c) => c.id === categoryId);
+			if (index <= 0) return; // Already at top or not found
+			const currentCategory = categories[index];
+			const previousCategory = categories[index - 1];
+			const tempOrder = currentCategory.order;
+			await updateProjectAreaTemplate({ id: currentCategory.id, order: previousCategory.order });
+			await updateProjectAreaTemplate({ id: previousCategory.id, order: tempOrder });
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder category';
+			await projectScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveProjectCategoryDown(categoryId: string) {
+		if (!selectedProjectTemplate) return;
+		try {
+			const categories = [...selectedProjectTemplate.categoryTemplates].sort(
+				(a, b) => a.order - b.order
+			);
+			const index = categories.findIndex((c) => c.id === categoryId);
+			if (index === -1 || index >= categories.length - 1) return; // Already at bottom or not found
+			const currentCategory = categories[index];
+			const nextCategory = categories[index + 1];
+			const tempOrder = currentCategory.order;
+			await updateProjectAreaTemplate({ id: currentCategory.id, order: nextCategory.order });
+			await updateProjectAreaTemplate({ id: nextCategory.id, order: tempOrder });
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder category';
+			await projectScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveProjectTaskUp(taskId: string, categoryId: string) {
+		if (!selectedProjectTemplate) return;
+		try {
+			const category = selectedProjectTemplate.categoryTemplates.find((c) => c.id === categoryId);
+			if (!category) return;
+			const tasks = [...category.taskTemplates].sort((a, b) => a.order - b.order);
+			const index = tasks.findIndex((t) => t.id === taskId);
+			if (index <= 0) return; // Already at top or not found
+			const currentTask = tasks[index];
+			const previousTask = tasks[index - 1];
+			const tempOrder = currentTask.order;
+			await updateProjectTaskTemplate({ id: currentTask.id, order: previousTask.order });
+			await updateProjectTaskTemplate({ id: previousTask.id, order: tempOrder });
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder task';
+			await projectScopeStore.fetch();
+		}
+	}
+
+	async function handleMoveProjectTaskDown(taskId: string, categoryId: string) {
+		if (!selectedProjectTemplate) return;
+		try {
+			const category = selectedProjectTemplate.categoryTemplates.find((c) => c.id === categoryId);
+			if (!category) return;
+			const tasks = [...category.taskTemplates].sort((a, b) => a.order - b.order);
+			const index = tasks.findIndex((t) => t.id === taskId);
+			if (index === -1 || index >= tasks.length - 1) return; // Already at bottom or not found
+			const currentTask = tasks[index];
+			const nextTask = tasks[index + 1];
+			const tempOrder = currentTask.order;
+			await updateProjectTaskTemplate({ id: currentTask.id, order: nextTask.order });
+			await updateProjectTaskTemplate({ id: nextTask.id, order: tempOrder });
+			await projectScopeStore.fetch();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder task';
+			await projectScopeStore.fetch();
+		}
+	}
+
+	// JSON Import
+	function openJsonImport() {
+		showJsonImportModal = true;
+		jsonImportText = '';
+		jsonImportReplace = false;
+		jsonImportError = '';
+		jsonImportParsed = null;
+	}
+
+	function parseJsonImport() {
+		try {
+			jsonImportParsed = JSON.parse(jsonImportText);
+			jsonImportError = '';
+		} catch {
+			jsonImportError = 'Invalid JSON format';
+			jsonImportParsed = null;
+		}
+	}
+
+	function handleJsonFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		if (!file.name.endsWith('.json')) {
+			jsonImportError = 'Please select a JSON file';
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			jsonImportText = e.target?.result as string;
+			parseJsonImport();
+		};
+		reader.onerror = () => {
+			jsonImportError = 'Failed to read file';
+		};
+		reader.readAsText(file);
+
+		// Reset input so the same file can be selected again
+		input.value = '';
+	}
+
+	async function submitJsonImport() {
+		if (!jsonImportParsed) return;
+		try {
+			if (activeTab === 'service') {
+				await createScopeTemplateFromJson(jsonImportParsed, jsonImportReplace);
+				await serviceScopeStore.fetch();
+			} else {
+				await createProjectScopeTemplateFromJson(jsonImportParsed, jsonImportReplace);
+				await projectScopeStore.fetch();
+			}
+			showJsonImportModal = false;
+		} catch (e) {
+			jsonImportError = e instanceof Error ? e.message : 'Failed to import template';
+		}
+	}
+
+	// JSON Export
+	function openJsonExport() {
+		const template =
+			activeTab === 'service' ? selectedServiceTemplate : selectedProjectTemplate;
+		if (!template) return;
+
+		jsonExportCopied = false;
+
+		if (activeTab === 'service' && selectedServiceTemplate) {
+			// Export service scope template
+			const exportData = {
+				name: selectedServiceTemplate.name,
+				description: selectedServiceTemplate.description || '',
+				is_active: selectedServiceTemplate.isActive,
+				areas: selectedServiceTemplate.areaTemplates.map((area) => ({
+					name: area.name,
+					order: area.order,
+					tasks: area.taskTemplates.map((task) => ({
+						description: task.description,
+						checklist_description: task.checklistDescription || '',
+						frequency: (task.frequency || 'weekly').toUpperCase(),
+						is_conditional: false, // Always false as it's deprecated
+						order: task.order,
+						estimated_minutes: task.estimatedMinutes
+					}))
+				}))
+			};
+			jsonExportText = JSON.stringify(exportData, null, 2);
+		} else if (activeTab === 'project' && selectedProjectTemplate) {
+			// Export project scope template
+			const exportData = {
+				name: selectedProjectTemplate.name,
+				description: selectedProjectTemplate.description || '',
+				is_active: selectedProjectTemplate.isActive,
+				categories: selectedProjectTemplate.categoryTemplates.map((category) => ({
+					name: category.name,
+					order: category.order,
+					tasks: category.taskTemplates.map((task) => ({
+						description: task.description,
+						checklist_description: task.checklistDescription || '',
+						order: task.order,
+						estimated_minutes: task.estimatedMinutes
+					}))
+				}))
+			};
+			jsonExportText = JSON.stringify(exportData, null, 2);
+		}
+
+		showJsonExportModal = true;
+	}
+
+	async function copyJsonExport() {
+		try {
+			await navigator.clipboard.writeText(jsonExportText);
+			jsonExportCopied = true;
+			setTimeout(() => (jsonExportCopied = false), 2000);
+		} catch {
+			// Fallback for older browsers
+			const textarea = document.createElement('textarea');
+			textarea.value = jsonExportText;
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand('copy');
+			document.body.removeChild(textarea);
+			jsonExportCopied = true;
+			setTimeout(() => (jsonExportCopied = false), 2000);
+		}
+	}
+
+	function downloadJsonExport() {
+		const template =
+			activeTab === 'service' ? selectedServiceTemplate : selectedProjectTemplate;
+		if (!template) return;
+
+		const blob = new Blob([jsonExportText], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `${template.name.toLowerCase().replace(/\s+/g, '-')}-scope-template.json`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+<svelte:head>
+	<title>Scope Templates - Admin - Nexus</title>
+</svelte:head>
+
+<div class="flex h-[calc(100vh-7.5rem)] flex-col overflow-hidden bg-theme">
+	<!-- Header -->
+	<div class="border-b border-theme bg-theme-card px-4 py-4 shadow-sm md:px-6">
+		<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+			<div class="flex items-center gap-4">
+				<a
+					href="/admin"
+					class="rounded-lg p-1 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+					aria-label="Go back"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				</a>
+				<div>
+					<h1 class="text-xl font-bold text-accent3-600 dark:text-accent3-400">Scope Templates</h1>
+					<p class="text-sm text-theme-secondary">Manage service and project scope templates</p>
+				</div>
+			</div>
+
+			<!-- Desktop Tab Toggle -->
+			<div class="hidden items-center gap-4 md:flex">
+				<div class="flex items-center rounded-lg border border-theme bg-theme p-1">
+					<button
+						onclick={() => (activeTab = 'service')}
+						class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+						'service'
+							? 'bg-secondary-500/10 text-secondary-600 shadow-sm dark:text-secondary-400'
+							: 'text-theme-muted hover:text-theme'}"
+					>
+						<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+							/>
+						</svg>
+						Service Scopes
+					</button>
+					<button
+						onclick={() => (activeTab = 'project')}
+						class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors {activeTab ===
+						'project'
+							? 'bg-accent-500/10 text-accent-600 shadow-sm dark:text-accent-400'
+							: 'text-theme-muted hover:text-theme'}"
+					>
+						<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+							/>
+						</svg>
+						Project Scopes
+					</button>
+				</div>
+
+				<button
+					onclick={openJsonImport}
+					class="flex items-center gap-2 rounded-lg border border-theme interactive bg-theme px-3 py-2 text-sm font-medium text-theme"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+						/>
+					</svg>
+					Import JSON
+				</button>
+				<button
+					onclick={openJsonExport}
+					disabled={activeTab === 'service' ? !selectedServiceTemplateId : !selectedProjectTemplateId}
+					class="flex items-center gap-2 rounded-lg border border-theme interactive bg-theme px-3 py-2 text-sm font-medium text-theme disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+						/>
+					</svg>
+					Export JSON
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Error Alert -->
+	{#if error}
+		<div class="mx-4 mt-4 alert-error">
+			{error}
+			<button onclick={() => (error = '')} class="ml-2 font-medium underline">Dismiss</button>
+		</div>
+	{/if}
+
+	<!-- Mobile Tab Toggle -->
+	<div class="flex items-center justify-center gap-3 border-b border-theme py-3 md:hidden">
+		<button
+			onclick={previousTab}
+			aria-label="Previous tab"
+			class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+		>
+			<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+		<div class="flex items-center gap-2">
+			<span
+				class="h-3 w-3 rounded-full {activeTab === 'service'
+					? 'bg-secondary-500'
+					: 'bg-accent-500'}"
+			></span>
+			<span
+				class="text-lg font-semibold {activeTab === 'service'
+					? 'text-secondary-600 dark:text-secondary-400'
+					: 'text-accent-600 dark:text-accent-400'}"
+			>
+				{activeTab === 'service' ? 'Service Scopes' : 'Project Scopes'}
+			</span>
+			<span
+				class="rounded-full px-2 py-0.5 text-xs font-semibold {activeTab === 'service'
+					? 'bg-secondary-500 text-white'
+					: 'bg-accent-500 text-white'}"
+			>
+				{activeTab === 'service' ? serviceTemplates.length : projectTemplates.length}
+			</span>
+		</div>
+		<button
+			onclick={nextTab}
+			aria-label="Next tab"
+			class="rounded-lg p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+		>
+			<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Mobile Actions -->
+	<div class="flex items-center justify-between border-b border-theme px-4 py-2 md:hidden">
+		{#if mobileView === 'editor' && (selectedServiceTemplateId || selectedProjectTemplateId)}
+			<button
+				onclick={() => (mobileView = 'list')}
+				class="flex items-center gap-1 text-sm font-medium text-secondary-600 dark:text-secondary-400"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+				Templates
+			</button>
+		{:else}
+			<span class="text-sm text-theme-muted">Select a template</span>
+		{/if}
+		<div class="flex items-center gap-2">
+			<button
+				onclick={openJsonImport}
+				class="flex items-center gap-1 rounded-lg border border-theme px-2 py-1 text-xs font-medium text-theme"
+			>
+				<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+					/>
+				</svg>
+				Import
+			</button>
+			<button
+				onclick={openJsonExport}
+				disabled={activeTab === 'service' ? !selectedServiceTemplateId : !selectedProjectTemplateId}
+				class="flex items-center gap-1 rounded-lg border border-theme px-2 py-1 text-xs font-medium text-theme disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+					/>
+				</svg>
+				Export
+			</button>
+		</div>
+	</div>
+
+	<!-- Main Content -->
+	{#if isLoading}
+		<div class="flex flex-1 items-center justify-center">
+			<div class="flex flex-col items-center gap-4">
+				<svg
+					class="h-12 w-12 animate-spin text-secondary-500"
+					style="fill: none"
+					viewBox="0 0 24 24"
+				>
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+				<span class="text-theme-secondary">Loading templates...</span>
+			</div>
+		</div>
+	{:else}
+		<!-- Desktop: Two-pane layout -->
+		<div class="hidden flex-1 overflow-hidden md:flex">
+			<!-- Template List (Left Pane) -->
+			<div class="flex w-56 shrink-0 flex-col border-r border-theme bg-theme-card lg:w-72">
+				<div class="flex items-center justify-between border-b border-theme px-4 py-3">
+					<h2 class="font-semibold text-theme">
+						{activeTab === 'service' ? 'Service Templates' : 'Project Templates'}
+					</h2>
+					<button
+						onclick={() => (showNewTemplateInput = true)}
+						class="rounded-lg bg-secondary-500 p-1.5 text-white transition-colors hover:bg-secondary-600"
+						aria-label="Add template"
+					>
+						<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<TemplateList
+					templates={activeTab === 'service' ? serviceTemplates : projectTemplates}
+					selectedId={activeTab === 'service'
+						? selectedServiceTemplateId
+						: selectedProjectTemplateId}
+					variant={activeTab}
+					showNewInput={showNewTemplateInput}
+					newName={newTemplateName}
+					onSelect={(id) =>
+						activeTab === 'service' ? selectServiceTemplate(id) : selectProjectTemplate(id)}
+					onCreate={() =>
+						activeTab === 'service' ? handleCreateServiceTemplate() : handleCreateProjectTemplate()}
+					onShowNewInput={(show) => (showNewTemplateInput = show)}
+					onNewNameChange={(name) => (newTemplateName = name)}
+				/>
+			</div>
+
+			<!-- Template Editor (Right Pane) -->
+			<div class="flex flex-1 flex-col overflow-hidden bg-theme">
+				{#if activeTab === 'service' && selectedServiceTemplate}
+					<TemplateEditor
+						template={selectedServiceTemplate}
+						variant="service"
+						expandedAreas={expandedServiceAreas}
+						{editingTemplateName}
+						{editingAreaName}
+						{editingTaskId}
+						{showNewAreaInput}
+						{showNewTaskInput}
+						{newAreaName}
+						{newTaskDescription}
+						onToggleArea={toggleServiceArea}
+						onStartEditTemplateName={() => (editingTemplateName = selectedServiceTemplate.id)}
+						onCancelEditTemplateName={() => (editingTemplateName = null)}
+						onUpdateTemplateName={(name) =>
+							handleUpdateServiceTemplate(selectedServiceTemplate.id, name)}
+						onUpdateTemplateDescription={(description) =>
+							handleUpdateServiceTemplateDescription(selectedServiceTemplate.id, description)}
+						onDeleteTemplate={() => handleDeleteServiceTemplate(selectedServiceTemplate.id)}
+						onStartEditAreaName={(areaId) => (editingAreaName = areaId)}
+						onCancelEditAreaName={() => (editingAreaName = null)}
+						onUpdateAreaName={(areaId, name) => handleUpdateServiceArea(areaId, name)}
+						onDeleteArea={handleDeleteServiceArea}
+						onShowNewArea={() => (showNewAreaInput = selectedServiceTemplate.id)}
+						onHideNewArea={() => (showNewAreaInput = null)}
+						onNewAreaNameChange={(name) => (newAreaName = name)}
+						onCreateArea={() => handleCreateServiceArea(selectedServiceTemplate.id)}
+						onShowNewTask={(areaId) => (showNewTaskInput = areaId)}
+						onHideNewTask={() => (showNewTaskInput = null)}
+						onNewTaskDescriptionChange={(desc) => (newTaskDescription = desc)}
+						onCreateTask={handleCreateServiceTask}
+						onStartEditTask={(taskId) => (editingTaskId = taskId)}
+						onCancelEditTask={() => (editingTaskId = null)}
+						onUpdateTask={handleUpdateServiceTask}
+						onDeleteTask={handleDeleteServiceTask}
+						onMoveAreaUp={handleMoveServiceAreaUp}
+						onMoveAreaDown={handleMoveServiceAreaDown}
+						onMoveTaskUp={handleMoveServiceTaskUp}
+						onMoveTaskDown={handleMoveServiceTaskDown}
+					/>
+				{:else if activeTab === 'project' && selectedProjectTemplate}
+					<TemplateEditor
+						template={selectedProjectTemplate}
+						variant="project"
+						expandedAreas={expandedProjectCategories}
+						{editingTemplateName}
+						{editingAreaName}
+						{editingTaskId}
+						{showNewAreaInput}
+						{showNewTaskInput}
+						{newAreaName}
+						{newTaskDescription}
+						onToggleArea={toggleProjectCategory}
+						onStartEditTemplateName={() => (editingTemplateName = selectedProjectTemplate.id)}
+						onCancelEditTemplateName={() => (editingTemplateName = null)}
+						onUpdateTemplateName={(name) =>
+							handleUpdateProjectTemplate(selectedProjectTemplate.id, name)}
+						onUpdateTemplateDescription={(description) =>
+							handleUpdateProjectTemplateDescription(selectedProjectTemplate.id, description)}
+						onDeleteTemplate={() => handleDeleteProjectTemplate(selectedProjectTemplate.id)}
+						onStartEditAreaName={(areaId) => (editingAreaName = areaId)}
+						onCancelEditAreaName={() => (editingAreaName = null)}
+						onUpdateAreaName={(areaId, name) => handleUpdateProjectCategory(areaId, name)}
+						onDeleteArea={handleDeleteProjectCategory}
+						onShowNewArea={() => (showNewAreaInput = selectedProjectTemplate.id)}
+						onHideNewArea={() => (showNewAreaInput = null)}
+						onNewAreaNameChange={(name) => (newAreaName = name)}
+						onCreateArea={() => handleCreateProjectCategory(selectedProjectTemplate.id)}
+						onShowNewTask={(areaId) => (showNewTaskInput = areaId)}
+						onHideNewTask={() => (showNewTaskInput = null)}
+						onNewTaskDescriptionChange={(desc) => (newTaskDescription = desc)}
+						onCreateTask={handleCreateProjectTask}
+						onStartEditTask={(taskId) => (editingTaskId = taskId)}
+						onCancelEditTask={() => (editingTaskId = null)}
+						onUpdateTask={handleUpdateProjectTask}
+						onDeleteTask={handleDeleteProjectTask}
+						onMoveAreaUp={handleMoveProjectCategoryUp}
+						onMoveAreaDown={handleMoveProjectCategoryDown}
+						onMoveTaskUp={handleMoveProjectTaskUp}
+						onMoveTaskDown={handleMoveProjectTaskDown}
+					/>
+				{:else}
+					<!-- No template selected -->
+					<div class="flex flex-1 items-center justify-center">
+						<div class="text-center text-theme-muted">
+							<svg
+								class="mx-auto mb-4 h-16 w-16"
+								style="fill: none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="1.5"
+									d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+								/>
+							</svg>
+							<p class="text-lg font-medium">Select a template</p>
+							<p class="mt-1 text-sm">
+								Choose a template from the list, or click + to create a new one
+							</p>
+						</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Mobile: Single view switching -->
+		<div class="flex flex-1 flex-col overflow-hidden md:hidden">
+			{#if mobileView === 'list'}
+				<!-- Mobile Template List -->
+				<div class="flex-1 overflow-y-auto p-4">
+					<!-- New Template Input (Mobile) -->
+					{#if showNewTemplateInput}
+						<div
+							class="mb-4 rounded-lg border border-theme bg-theme-card p-3"
+							transition:slide={{ duration: 150 }}
+						>
+							<input
+								type="text"
+								bind:value={newTemplateName}
+								placeholder="Template name..."
+								class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme px-3 py-2 text-sm text-theme focus:border-secondary-500 focus:outline-none"
+							/>
+							<div class="mt-2 flex justify-end gap-2">
+								<button
+									onclick={() => {
+										showNewTemplateInput = false;
+										newTemplateName = '';
+									}}
+									class="rounded px-3 py-1 text-sm text-theme-muted hover:text-theme"
+								>
+									Cancel
+								</button>
+								<button
+									onclick={() =>
+										activeTab === 'service'
+											? handleCreateServiceTemplate()
+											: handleCreateProjectTemplate()}
+									class="rounded bg-secondary-500 px-3 py-1 text-sm text-white hover:bg-secondary-600"
+								>
+									Create
+								</button>
+							</div>
+						</div>
+					{:else}
+						<button
+							onclick={() => (showNewTemplateInput = true)}
+							class="mb-4 flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-theme bg-theme-card p-3 text-sm text-theme-muted"
+						>
+							<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+								/>
+							</svg>
+							New Template
+						</button>
+					{/if}
+
+					{#if activeTab === 'service'}
+						{#each serviceTemplates as template (template.id)}
+							<button
+								onclick={() => selectServiceTemplate(template.id)}
+								class="mb-2 w-full rounded-lg border border-l-4 border-theme border-l-secondary-500/50 bg-theme-card p-4 text-left transition-colors hover:border-secondary-500"
+							>
+								<span class="flex items-center justify-between">
+									<span class="font-medium text-theme">{template.name}</span>
+									<svg
+										class="h-4 w-4 text-secondary-500"
+										style="fill: none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								</span>
+								<span class="mt-1 block text-xs text-theme-muted">
+									{template.areaTemplates.length} areas,
+									{template.areaTemplates.reduce((sum, a) => sum + a.taskTemplates.length, 0)} tasks
+								</span>
+							</button>
+						{/each}
+						{#if serviceTemplates.length === 0 && !showNewTemplateInput}
+							<div class="py-8 text-center text-theme-muted">
+								<p>No service templates yet</p>
+							</div>
+						{/if}
+					{:else}
+						{#each projectTemplates as template (template.id)}
+							<button
+								onclick={() => selectProjectTemplate(template.id)}
+								class="mb-2 w-full rounded-lg border border-l-4 border-theme border-l-accent-500/50 bg-theme-card p-4 text-left transition-colors hover:border-accent-500"
+							>
+								<span class="flex items-center justify-between">
+									<span class="font-medium text-theme">{template.name}</span>
+									<svg
+										class="h-4 w-4 text-accent-500"
+										style="fill: none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								</span>
+								<span class="mt-1 block text-xs text-theme-muted">
+									{template.categoryTemplates.length} categories,
+									{template.categoryTemplates.reduce((sum, c) => sum + c.taskTemplates.length, 0)} tasks
+								</span>
+							</button>
+						{/each}
+						{#if projectTemplates.length === 0 && !showNewTemplateInput}
+							<div class="py-8 text-center text-theme-muted">
+								<p>No project templates yet</p>
+							</div>
+						{/if}
+					{/if}
+				</div>
+			{:else}
+				<!-- Mobile Template Editor -->
+				<div class="flex-1 overflow-y-auto p-4">
+					{#if activeTab === 'service' && selectedServiceTemplate}
+						<TemplateEditor
+							template={selectedServiceTemplate}
+							variant="service"
+							expandedAreas={expandedServiceAreas}
+							{editingTemplateName}
+							{editingAreaName}
+							{editingTaskId}
+							{showNewAreaInput}
+							{showNewTaskInput}
+							{newAreaName}
+							{newTaskDescription}
+							onToggleArea={toggleServiceArea}
+							onStartEditTemplateName={() => (editingTemplateName = selectedServiceTemplate.id)}
+							onCancelEditTemplateName={() => (editingTemplateName = null)}
+							onUpdateTemplateName={(name) =>
+								handleUpdateServiceTemplate(selectedServiceTemplate.id, name)}
+							onUpdateTemplateDescription={(description) =>
+								handleUpdateServiceTemplateDescription(selectedServiceTemplate.id, description)}
+							onDeleteTemplate={() => handleDeleteServiceTemplate(selectedServiceTemplate.id)}
+							onStartEditAreaName={(areaId) => (editingAreaName = areaId)}
+							onCancelEditAreaName={() => (editingAreaName = null)}
+							onUpdateAreaName={(areaId, name) => handleUpdateServiceArea(areaId, name)}
+							onDeleteArea={handleDeleteServiceArea}
+							onShowNewArea={() => (showNewAreaInput = selectedServiceTemplate.id)}
+							onHideNewArea={() => (showNewAreaInput = null)}
+							onNewAreaNameChange={(name) => (newAreaName = name)}
+							onCreateArea={() => handleCreateServiceArea(selectedServiceTemplate.id)}
+							onShowNewTask={(areaId) => (showNewTaskInput = areaId)}
+							onHideNewTask={() => (showNewTaskInput = null)}
+							onNewTaskDescriptionChange={(desc) => (newTaskDescription = desc)}
+							onCreateTask={handleCreateServiceTask}
+							onStartEditTask={(taskId) => (editingTaskId = taskId)}
+							onCancelEditTask={() => (editingTaskId = null)}
+							onUpdateTask={handleUpdateServiceTask}
+							onDeleteTask={handleDeleteServiceTask}
+							onMoveAreaUp={handleMoveServiceAreaUp}
+							onMoveAreaDown={handleMoveServiceAreaDown}
+							onMoveTaskUp={handleMoveServiceTaskUp}
+							onMoveTaskDown={handleMoveServiceTaskDown}
+						/>
+					{:else if activeTab === 'project' && selectedProjectTemplate}
+						<TemplateEditor
+							template={selectedProjectTemplate}
+							variant="project"
+							expandedAreas={expandedProjectCategories}
+							{editingTemplateName}
+							{editingAreaName}
+							{editingTaskId}
+							{showNewAreaInput}
+							{showNewTaskInput}
+							{newAreaName}
+							{newTaskDescription}
+							onToggleArea={toggleProjectCategory}
+							onStartEditTemplateName={() => (editingTemplateName = selectedProjectTemplate.id)}
+							onCancelEditTemplateName={() => (editingTemplateName = null)}
+							onUpdateTemplateName={(name) =>
+								handleUpdateProjectTemplate(selectedProjectTemplate.id, name)}
+							onUpdateTemplateDescription={(description) =>
+								handleUpdateProjectTemplateDescription(selectedProjectTemplate.id, description)}
+							onDeleteTemplate={() => handleDeleteProjectTemplate(selectedProjectTemplate.id)}
+							onStartEditAreaName={(areaId) => (editingAreaName = areaId)}
+							onCancelEditAreaName={() => (editingAreaName = null)}
+							onUpdateAreaName={(areaId, name) => handleUpdateProjectCategory(areaId, name)}
+							onDeleteArea={handleDeleteProjectCategory}
+							onShowNewArea={() => (showNewAreaInput = selectedProjectTemplate.id)}
+							onHideNewArea={() => (showNewAreaInput = null)}
+							onNewAreaNameChange={(name) => (newAreaName = name)}
+							onCreateArea={() => handleCreateProjectCategory(selectedProjectTemplate.id)}
+							onShowNewTask={(areaId) => (showNewTaskInput = areaId)}
+							onHideNewTask={() => (showNewTaskInput = null)}
+							onNewTaskDescriptionChange={(desc) => (newTaskDescription = desc)}
+							onCreateTask={handleCreateProjectTask}
+							onStartEditTask={(taskId) => (editingTaskId = taskId)}
+							onCancelEditTask={() => (editingTaskId = null)}
+							onUpdateTask={handleUpdateProjectTask}
+							onDeleteTask={handleDeleteProjectTask}
+							onMoveAreaUp={handleMoveProjectCategoryUp}
+							onMoveAreaDown={handleMoveProjectCategoryDown}
+							onMoveTaskUp={handleMoveProjectTaskUp}
+							onMoveTaskDown={handleMoveProjectTaskDown}
+						/>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- JSON Import Modal --><!-- JSON Import Modal -->
+{#if showJsonImportModal}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="json-import-title"
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		onclick={() => (showJsonImportModal = false)}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') showJsonImportModal = false;
+		}}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			role="document"
+			class="w-full max-w-2xl rounded-xl bg-theme-card shadow-xl"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<div class="flex items-center justify-between border-b border-theme px-6 py-4">
+				<h3 id="json-import-title" class="text-lg font-semibold text-theme">
+					Import {activeTab === 'service' ? 'Service' : 'Project'} Scope Template
+				</h3>
+				<button
+					onclick={() => (showJsonImportModal = false)}
+					class="rounded p-1 text-theme-muted hover:text-theme"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="p-6">
+				<!-- File Upload -->
+				<div class="mb-4">
+					<label
+						class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme bg-theme px-4 py-6 transition-colors hover:border-secondary-500 hover:bg-black/5 dark:hover:bg-white/5"
+					>
+						<svg class="mb-2 h-8 w-8 text-theme-muted" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+							/>
+						</svg>
+						<span class="text-sm font-medium text-theme">Upload JSON file</span>
+						<span class="mt-1 text-xs text-theme-muted">or paste JSON below</span>
+						<input
+							type="file"
+							accept=".json,application/json"
+							onchange={handleJsonFileUpload}
+							class="hidden"
+						/>
+					</label>
+				</div>
+
+				<textarea
+					bind:value={jsonImportText}
+					oninput={parseJsonImport}
+					placeholder="Paste JSON here..."
+					class="placeholder-theme-muted h-48 w-full rounded-lg border border-theme bg-theme p-3 font-mono text-sm text-theme focus:border-secondary-500 focus:outline-none"
+				></textarea>
+
+				{#if jsonImportError}
+					<div class="mt-2 text-sm text-danger">{jsonImportError}</div>
+				{/if}
+
+				{#if jsonImportParsed}
+					<div class="mt-4 success-box">
+						<div class="success-box-title">
+							<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Valid JSON
+						</div>
+						<div class="success-box-text">
+							Template: {jsonImportParsed.name ?? 'Unnamed'}
+							{#if activeTab === 'service' && jsonImportParsed.areas}
+								• {jsonImportParsed.areas.length} areas
+							{:else if activeTab === 'project' && jsonImportParsed.categories}
+								• {jsonImportParsed.categories.length} categories
+							{/if}
+						</div>
+					</div>
+				{/if}
+
+				<div class="mt-4">
+					<label class="flex items-center gap-2 text-sm text-theme">
+						<input type="checkbox" bind:checked={jsonImportReplace} class="rounded border-theme" />
+						Replace existing template with same name
+					</label>
+				</div>
+			</div>
+
+			<div class="flex justify-end gap-3 border-t border-theme px-6 py-4">
+				<button
+					onclick={() => (showJsonImportModal = false)}
+					class="rounded-lg border border-theme interactive px-4 py-2 text-sm font-medium text-theme"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={submitJsonImport}
+					disabled={!jsonImportParsed}
+					class="rounded-lg bg-secondary-500 px-4 py-2 text-sm font-medium text-white hover:bg-secondary-600 disabled:opacity-50"
+				>
+					Import
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- JSON Export Modal -->
+{#if showJsonExportModal}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="json-export-title"
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+		onclick={() => (showJsonExportModal = false)}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') showJsonExportModal = false;
+		}}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			role="document"
+			class="flex max-h-[90vh] w-full max-w-3xl flex-col rounded-xl bg-theme-card shadow-xl"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<div class="flex items-center justify-between border-b border-theme px-6 py-4">
+				<h3 id="json-export-title" class="text-lg font-semibold text-theme">
+					Export {activeTab === 'service' ? 'Service' : 'Project'} Scope Template
+				</h3>
+				<button
+					onclick={() => (showJsonExportModal = false)}
+					class="rounded p-1 text-theme-muted hover:text-theme"
+					aria-label="Close"
+				>
+					<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="flex-1 overflow-y-auto p-6">
+				<div class="relative">
+					<pre
+						class="max-h-64 overflow-auto rounded-lg border border-theme bg-theme p-3 font-mono text-sm text-theme">{jsonExportText}</pre>
+					<button
+						onclick={copyJsonExport}
+						class="absolute right-2 top-2 rounded-lg border border-theme bg-theme-card px-2 py-1 text-xs font-medium text-theme hover:bg-black/5 dark:hover:bg-white/10"
+					>
+						{jsonExportCopied ? 'Copied!' : 'Copy'}
+					</button>
+				</div>
+
+				<!-- JSON Format Documentation -->
+				<details class="mt-4">
+					<summary class="cursor-pointer text-sm font-medium text-theme hover:text-secondary-600 dark:hover:text-secondary-400">
+						JSON Format Reference
+					</summary>
+					<div class="mt-3 rounded-lg border border-theme bg-theme p-4 text-sm text-theme-secondary">
+						{#if activeTab === 'service'}
+							<p class="mb-3 font-medium text-theme">Service Scope Template Format:</p>
+							<pre class="overflow-x-auto rounded bg-black/5 p-3 text-xs dark:bg-white/5">{`{
+  "name": "Template Name",
+  "description": "Optional description",
+  "is_active": true,
+  "areas": [
+    {
+      "name": "Area Name",
+      "order": 1,
+      "tasks": [
+        {
+          "description": "Task description (detailed)",
+          "checklist_description": "Short checklist text",
+          "frequency": "DAILY|WEEKLY|MONTHLY|QUARTERLY|TRIANNUAL|ANNUAL|AS_NEEDED",
+          "is_conditional": false,
+          "order": 1,
+          "estimated_minutes": null
+        }
+      ]
+    }
+  ]
+}`}</pre>
+							<div class="mt-3 space-y-1 text-xs">
+								<p><strong>Note:</strong> <code>is_conditional</code> is deprecated and should always be <code>false</code>.</p>
+								<p><strong>Frequency values:</strong> DAILY, WEEKLY, MONTHLY, QUARTERLY, TRIANNUAL, ANNUAL, AS_NEEDED</p>
+							</div>
+						{:else}
+							<p class="mb-3 font-medium text-theme">Project Scope Template Format:</p>
+							<pre class="overflow-x-auto rounded bg-black/5 p-3 text-xs dark:bg-white/5">{`{
+  "name": "Template Name",
+  "description": "Optional description",
+  "is_active": true,
+  "categories": [
+    {
+      "name": "Category Name",
+      "order": 10,
+      "tasks": [
+        {
+          "description": "Task description (detailed)",
+          "checklist_description": "Short checklist text",
+          "order": 10,
+          "estimated_minutes": null
+        }
+      ]
+    }
+  ]
+}`}</pre>
+							<div class="mt-3 space-y-1 text-xs">
+								<p><strong>Note:</strong> Project scopes use <code>categories</code> instead of <code>areas</code>, and tasks do not have <code>frequency</code> or <code>is_conditional</code> fields.</p>
+							</div>
+						{/if}
+					</div>
+				</details>
+			</div>
+
+			<div class="flex justify-end gap-3 border-t border-theme px-6 py-4">
+				<button
+					onclick={() => (showJsonExportModal = false)}
+					class="rounded-lg border border-theme interactive px-4 py-2 text-sm font-medium text-theme"
+				>
+					Close
+				</button>
+				<button
+					onclick={downloadJsonExport}
+					class="flex items-center gap-2 rounded-lg bg-secondary-500 px-4 py-2 text-sm font-medium text-white hover:bg-secondary-600"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+						/>
+					</svg>
+					Download
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/admin/services/+page.svelte b/src/routes/admin/services/+page.svelte
new file mode 100644
index 0000000..bb29489
--- /dev/null
+++ b/src/routes/admin/services/+page.svelte
@@ -0,0 +1,329 @@
+<script lang="ts">
+	import AdminListLayout from '$lib/components/admin/AdminListLayout.svelte';
+	import ServiceForm from '$lib/components/admin/services/ServiceForm.svelte';
+	import GenerateServicesModal from '$lib/components/admin/services/GenerateServicesModal.svelte';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { goto } from '$app/navigation';
+	import { invalidateDashboard } from '$lib/utils/invalidate';
+	import { page } from '$app/state';
+	import type { PageData } from './$types';
+	import type { AdminServices$result } from '$houdini';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { fromGlobalId } from '$lib/utils/relay';
+
+	type Service = AdminServices$result['services'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	// Auto-open create form if action=create is in URL
+	$effect(() => {
+		if (page.url.searchParams.get('action') === 'create') {
+			showCreateForm();
+			// Remove the action param from URL without navigation
+			const newUrl = new URL(page.url);
+			newUrl.searchParams.delete('action');
+			goto(newUrl.pathname + newUrl.search, { replaceState: true, noScroll: true });
+		}
+	});
+
+	// Use pre-built lookups from root layout
+	let accountLookup = $derived(data.accountLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+
+	// Get current status from URL, default to 'scheduled'
+	let currentStatus = $derived(page.url.searchParams.get('status') || 'scheduled');
+
+	// Extract data from each status and sort appropriately
+	// Scheduled/In Progress: ascending by date (earliest first)
+	// Completed: descending by date (most recent first)
+	let scheduled = $derived(
+		[...(data.services.scheduled ?? [])].sort((a, b) => a.date.localeCompare(b.date))
+	);
+	let inProgress = $derived(
+		[...(data.services.inProgress ?? [])].sort((a, b) => a.date.localeCompare(b.date))
+	);
+	let completed = $derived(
+		[...(data.services.completed ?? [])].sort((a, b) => b.date.localeCompare(a.date))
+	);
+
+	// Calculate counts for tabs
+	let counts = $derived({
+		scheduled: scheduled.length,
+		inProgress: inProgress.length,
+		completed: completed.length
+	});
+
+	// Select current data based on status
+	let currentData = $derived(
+		currentStatus === 'scheduled'
+			? scheduled
+			: currentStatus === 'in_progress'
+				? inProgress
+				: completed
+	);
+
+	// Search
+	let searchQuery = $state('');
+
+	// Generate modal state
+	let showGenerateModal = $state(false);
+	let filteredServices = $derived(() => {
+		if (!searchQuery.trim()) return currentData;
+		const query = searchQuery.toLowerCase();
+		return currentData.filter((service) => {
+			// Search account name
+			if (service.accountAddressId) {
+				const accountInfo = accountLookup.get(service.accountAddressId);
+				if (accountInfo?.accountName.toLowerCase().includes(query)) return true;
+				if (accountInfo?.addressName?.toLowerCase().includes(query)) return true;
+			}
+			return false;
+		});
+	});
+
+	// Count non-admin team members
+	function countNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): number {
+		if (!teamMembers) return 0;
+		return teamMembers.filter((m) => nonAdminTeamIds.has(m.pk)).length;
+	}
+
+	// Get admin profile UUID for dispatched check
+	let adminProfileUuid = $derived(() => {
+		const adminProfile = teamProfiles.find((p) => p.role === 'ADMIN');
+		return adminProfile ? fromGlobalId(adminProfile.id) : null;
+	});
+
+	// Check if service is dispatched (admin is in team members)
+	function isDispatched(teamMembers: { pk: string }[] | null | undefined): boolean {
+		const adminUuid = adminProfileUuid();
+		if (!adminUuid || !teamMembers) return false;
+		return teamMembers.some((m) => m.pk === adminUuid);
+	}
+
+	// Check if service has non-admin team members assigned
+	function hasNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): boolean {
+		return countNonAdminTeamMembers(teamMembers) > 0;
+	}
+
+	// Format date for display
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get status badge class
+	function getStatusClass(status: string): string {
+		switch (status) {
+			case 'SCHEDULED':
+				return 'badge-primary';
+			case 'IN_PROGRESS':
+				return 'badge-accent';
+			case 'COMPLETED':
+				return 'badge-secondary';
+			default:
+				return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+	}
+
+	// Get service display info
+	function getServiceDisplayInfo(service: Service): {
+		accountName: string | null;
+		addressName: string | null;
+		address: string | null;
+	} {
+		if (service.accountAddressId) {
+			const accountInfo = accountLookup.get(service.accountAddressId);
+			return {
+				accountName: accountInfo?.accountName ?? null,
+				addressName: accountInfo?.addressName ?? null,
+				address: accountInfo ? formatAddress(accountInfo) : null
+			};
+		}
+
+		return {
+			accountName: null,
+			addressName: null,
+			address: null
+		};
+	}
+
+	function showCreateForm() {
+		offCanvas.showRight({
+			title: 'Create Service',
+			content: createFormContent
+		});
+	}
+
+	async function handleSuccess() {
+		await invalidateDashboard();
+	}
+
+	// Determine empty text based on search
+	let emptyText = $derived(
+		searchQuery
+			? `No services match "${searchQuery}". Try a different search term.`
+			: 'No services found for this month and status.'
+	);
+</script>
+
+{#snippet createFormContent()}
+	<ServiceForm {customers} {accounts} {teamProfiles} onSuccess={handleSuccess} />
+{/snippet}
+
+{#snippet headerActions()}
+	<button
+		onclick={() => (showGenerateModal = true)}
+		class="inline-flex shrink-0 items-center gap-2 rounded-lg border border-theme interactive bg-theme px-4 py-2 whitespace-nowrap text-theme"
+	>
+		<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+			/>
+		</svg>
+		<span>Generate</span>
+	</button>
+	<a
+		href="/admin/services/assign"
+		class="inline-flex shrink-0 items-center gap-2 rounded-lg border border-theme interactive bg-theme px-4 py-2 whitespace-nowrap text-theme"
+	>
+		<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+			/>
+		</svg>
+		<span>Bulk Assign</span>
+	</a>
+{/snippet}
+
+{#snippet emptyIcon()}
+	<svg
+		class="empty-state-icon text-secondary-400"
+		style="fill: none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+		/>
+	</svg>
+{/snippet}
+
+{#snippet serviceItem(service: Service)}
+	{@const displayInfo = getServiceDisplayInfo(service)}
+	{@const teamCount = countNonAdminTeamMembers(service.teamMembers)}
+	<a href="/admin/services/{service.id}" class="block">
+		<div class="card-service">
+			<div class="flex items-start justify-between gap-4">
+				<div class="min-w-0 flex-1 space-y-1">
+					<!-- Row 1: Date + Status badges -->
+					<div class="flex flex-wrap items-center gap-2">
+						<span
+							class="rounded-full border border-theme bg-theme-secondary px-3 py-1 text-xs font-medium text-theme"
+						>
+							{formatDate(service.date)}
+						</span>
+						<span
+							class="rounded-full px-3 py-1 text-xs font-medium {getStatusClass(service.status)}"
+						>
+							{service.status.replace('_', ' ')}
+						</span>
+						{#if isDispatched(service.teamMembers)}
+							<span
+								class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+							>
+								Dispatched
+							</span>
+						{/if}
+						{#if hasNonAdminTeamMembers(service.teamMembers)}
+							<span
+								class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+							>
+								Assigned
+							</span>
+						{/if}
+					</div>
+					<!-- Row 2: Account Name -->
+					{#if displayInfo.accountName}
+						<p class="text-base font-semibold text-primary-500">
+							{displayInfo.accountName}
+						</p>
+					{:else}
+						<p class="text-base font-semibold text-theme-muted italic">No account linked</p>
+					{/if}
+					<!-- Row 3: Address Name (location name) -->
+					{#if displayInfo.addressName}
+						<p class="text-sm text-theme-secondary">{displayInfo.addressName}</p>
+					{/if}
+					<!-- Row 4: Address -->
+					{#if displayInfo.address}
+						<p class="text-sm text-theme-muted">{displayInfo.address}</p>
+					{/if}
+					<!-- Row 5: Team count -->
+					<div class="flex flex-wrap items-center gap-4 text-sm text-theme-muted">
+						<span>{teamCount} team member{teamCount !== 1 ? 's' : ''}</span>
+					</div>
+					<!-- Row 6: Notes -->
+					{#if service.notes}
+						<p class="line-clamp-2 text-sm text-theme-muted italic">{service.notes}</p>
+					{/if}
+				</div>
+				<svg
+					class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+					style="fill: none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+				</svg>
+			</div>
+		</div>
+	</a>
+{/snippet}
+
+<AdminListLayout
+	title="Services"
+	subtitle="Manage recurring service appointments. View scheduled services, track progress, and review completed work."
+	items={filteredServices()}
+	{currentStatus}
+	currentMonth={data.currentMonth}
+	{counts}
+	emptyTitle="No Services"
+	{emptyText}
+	colorScheme="secondary"
+	{searchQuery}
+	onSearchChange={(q) => (searchQuery = q)}
+	searchPlaceholder="Search services..."
+	createButtonText="New Service"
+	onCreateClick={showCreateForm}
+	{emptyIcon}
+	item={serviceItem}
+	{headerActions}
+/>
+
+<GenerateServicesModal
+	bind:open={showGenerateModal}
+	{accounts}
+	initialMonth={parseInt(data.currentMonth.split('-')[1])}
+	initialYear={parseInt(data.currentMonth.split('-')[0])}
+	onClose={() => (showGenerateModal = false)}
+	onSuccess={async () => {
+		await invalidateDashboard();
+	}}
+/>
diff --git a/src/routes/admin/services/[service]/+page.server.ts b/src/routes/admin/services/[service]/+page.server.ts
new file mode 100644
index 0000000..db19c22
--- /dev/null
+++ b/src/routes/admin/services/[service]/+page.server.ts
@@ -0,0 +1,89 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import {
+	GetServiceStore,
+	ServiceSessionByServiceStore,
+	ScopeByAddressStore,
+	ServiceSessionPhotosStore,
+	ServiceSessionVideosStore
+} from '$houdini';
+import type { ServiceSessionPhotos$result, ServiceSessionVideos$result } from '$houdini';
+import { fromGlobalId } from '$lib/utils/relay';
+
+type SessionPhoto = ServiceSessionPhotos$result['serviceSessionImages'][number];
+type SessionVideo = ServiceSessionVideos$result['serviceSessionVideos'][number];
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals } = event;
+	const serviceId = params.service;
+	const serviceUuid = fromGlobalId(serviceId);
+
+	// Fetch params for Houdini stores
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Fetch the service first (needed to check status and get accountAddressId)
+	const serviceData = await new GetServiceStore().fetch({
+		...fetchParams,
+		variables: { id: serviceId }
+	});
+
+	const service = serviceData.data?.service;
+	if (!service) {
+		throw error(404, 'Service not found');
+	}
+
+	// Build parallel fetch promises based on service state
+	const needsSession = service.status === 'IN_PROGRESS' || service.status === 'COMPLETED';
+
+	// Fetch session and scope in parallel
+	const [sessionResult, scopeResult] = await Promise.all([
+		// Session fetch (only if needed)
+		needsSession
+			? new ServiceSessionByServiceStore()
+					.fetch({ ...fetchParams, variables: { serviceId: serviceUuid } })
+					.catch(() => ({ data: { serviceSessions: [] } }))
+			: Promise.resolve(null),
+		// Scope fetch (only if has address)
+		service.accountAddressId
+			? new ScopeByAddressStore()
+					.fetch({ ...fetchParams, variables: { accountAddressId: service.accountAddressId } })
+					.catch(() => ({ data: { scopes: [] } }))
+			: Promise.resolve(null)
+	]);
+
+	const baseSession = sessionResult?.data?.serviceSessions?.[0] ?? null;
+	let photos: SessionPhoto[] = [];
+	let videos: SessionVideo[] = [];
+
+	// If we have a session, fetch photos and videos in parallel
+	if (baseSession) {
+		const sessionUuid = fromGlobalId(baseSession.id);
+		const [photosResult, videosResult] = await Promise.all([
+			new ServiceSessionPhotosStore()
+				.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+				.catch((err) => {
+					console.error('Failed to fetch session photos:', err);
+					return { data: { serviceSessionImages: [] as SessionPhoto[] } };
+				}),
+			new ServiceSessionVideosStore()
+				.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+				.catch((err) => {
+					console.error('Failed to fetch session videos:', err);
+					return { data: { serviceSessionVideos: [] as SessionVideo[] } };
+				})
+		]);
+
+		photos = photosResult?.data?.serviceSessionImages ?? [];
+		videos = videosResult?.data?.serviceSessionVideos ?? [];
+	}
+
+	// Combine session with photos/videos
+	const session = baseSession ? { ...baseSession, photos, videos } : null;
+
+	return {
+		service,
+		serviceUuid,
+		session,
+		scope: scopeResult?.data?.scopes?.[0] ?? null
+	};
+};
diff --git a/src/routes/admin/services/[service]/+page.svelte b/src/routes/admin/services/[service]/+page.svelte
new file mode 100644
index 0000000..d44397b
--- /dev/null
+++ b/src/routes/admin/services/[service]/+page.svelte
@@ -0,0 +1,751 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import AdminPageHeader from '$lib/components/admin/AdminPageHeader.svelte';
+	import {
+		SessionSectionHeader,
+		SessionContent,
+		StartSessionButton,
+		type ExtendedServiceTask,
+		type ServiceAreaWithCompletions,
+		type ServiceAreaWithTasks
+	} from '$lib/components/session';
+	import ServiceForm from '$lib/components/admin/services/ServiceForm.svelte';
+	import EventForm from '$lib/components/admin/calendar/EventForm.svelte';
+	import { UpdateServiceStore } from '$houdini';
+	import {
+		openServiceSession,
+		closeServiceSession,
+		revertServiceSession,
+		addServiceTask,
+		removeServiceTask,
+		createServiceNote,
+		updateServiceNote,
+		removeServiceNote,
+		uploadServicePhoto,
+		updateServicePhoto,
+		removeServicePhoto,
+		uploadServiceVideo,
+		updateServiceVideo,
+		removeServiceVideo
+	} from '$lib/utils/session';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import type { PageData } from './$types';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { formatDate } from '$lib/utils/date';
+	import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	let { data }: { data: PageData } = $props();
+
+	// Core data
+	let service = $derived(data.service);
+	let session = $derived(data.session);
+	let scope = $derived(data.scope);
+	let serviceUuid = $derived(data.serviceUuid);
+	let accountLookup = $derived(data.accountLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+	let teamMemberLookup = $derived(data.teamMemberLookup);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let customers = $derived(data.customers?.data?.customers ?? []);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+
+	// Current user for note authorship
+	let currentUserProfileId = $derived(data.user?.data?.me?.id ?? null);
+
+	// Admin always has permission to revert
+	let canRevertSession = true;
+
+	// Account info
+	let accountInfo = $derived(
+		service.accountAddressId ? (accountLookup.get(service.accountAddressId) ?? null) : null
+	);
+
+	// Display name
+	let displayName = $derived(accountInfo?.accountName ?? 'Service Details');
+
+	// Address
+	let address = $derived(accountInfo ? formatAddress(accountInfo) : null);
+
+	// Account Global ID for linking to account page (derived from address lookup)
+	let accountGlobalId = $derived(
+		accountInfo?.accountId ? toGlobalId('AccountType', accountInfo.accountId) : null
+	);
+
+	// Team members (non-admin only)
+	let teamMembers = $derived(() => {
+		if (!service.teamMembers) return [];
+		return service.teamMembers
+			.filter((m) => nonAdminTeamIds.has(m.pk))
+			.map((m) => teamMemberLookup.get(m.pk))
+			.filter((m): m is NonNullable<typeof m> => m !== undefined);
+	});
+
+	// Check if admin is dispatched (admin profile is in teamMembers)
+	let adminProfile = $derived(teamProfiles.find((p) => p.role === 'ADMIN'));
+	let adminProfileUuid = $derived(adminProfile ? fromGlobalId(adminProfile.id) : null);
+	let isDispatched = $derived(
+		adminProfileUuid
+			? (service.teamMembers?.some((m) => m.pk === adminProfileUuid) ?? false)
+			: false
+	);
+
+	// Non-admin team members for messaging (exclude ADMIN role)
+	let messagableMembers = $derived(teamMembers().filter((m) => m.role !== 'ADMIN'));
+
+	// Build the subject line for messages
+	let messageSubject = $derived(() => {
+		const formattedDate = formatDate(service.date) || 'Unknown Date';
+		const accountName = accountInfo?.accountName || 'Unknown';
+		return `${formattedDate} - Service: ${accountName}`;
+	});
+
+	// Navigate to new message page with pre-filled params
+	function messageTeamMember(memberId: string) {
+		const params = new URLSearchParams({
+			entityType: 'Service',
+			entityId: service.id,
+			participantIds: memberId,
+			conversationType: 'DIRECT',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	// Navigate to new message page with all team members
+	function messageAllTeamMembers() {
+		const memberIds = messagableMembers.map((m) => m.id).join(',');
+		const params = new URLSearchParams({
+			entityType: 'Service',
+			entityId: service.id,
+			participantIds: memberIds,
+			conversationType: 'GROUP',
+			subject: messageSubject()
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+
+	// Loading states
+	let isStartingSession = $state(false);
+	let isSubmitting = $state(false);
+	let isReverting = $state(false);
+	let submittingTaskId = $state<string | null>(null);
+	let removingTaskId = $state<string | null>(null);
+
+	// Build extended tasks from scope
+	let tasks = $derived<ExtendedServiceTask[]>(
+		scope?.areas?.flatMap(
+			(area) =>
+				area.tasks?.map((task) => ({
+					...task,
+					uuid: fromGlobalId(task.id),
+					areaId: area.id,
+					areaName: area.name
+				})) || []
+		) || []
+	);
+
+	// Task tracking
+	let completedTaskIds = $derived(
+		new SvelteSet(session?.completedTasks?.map((ct) => ct.taskId) || [])
+	);
+	let selectedTaskIds = new SvelteSet<string>();
+	let availableTasksCount = $derived(
+		tasks.filter((t) => !completedTaskIds.has(t.uuid) && !selectedTaskIds.has(t.uuid)).length
+	);
+
+	// Group completed tasks by area
+	let completedTasksByArea = $derived.by((): ServiceAreaWithCompletions[] => {
+		if (!session?.completedTasks || !scope?.areas) return [];
+		const areaMap = new SvelteMap<string, ServiceAreaWithCompletions>();
+		scope.areas.forEach((area) => {
+			const areaTasks = session.completedTasks.filter((completion) => {
+				const task = tasks.find((t) => t.uuid === completion.taskId);
+				return task && task.areaId === area.id;
+			});
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, completions: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Group ready to submit tasks by area
+	let readyToSubmitByArea = $derived.by((): ServiceAreaWithTasks[] => {
+		if (!scope?.areas) return [];
+		const areaMap = new SvelteMap<string, ServiceAreaWithTasks>();
+		scope.areas.forEach((area) => {
+			const areaTasks = tasks.filter((t) => t.areaId === area.id && selectedTaskIds.has(t.uuid));
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, tasks: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Helper function to get team member name by ID
+	function getTeamMemberName(completedById: string | null | undefined): string {
+		if (!completedById) return 'Unknown';
+		const member = teamMemberLookup.get(completedById);
+		return member?.fullName || 'Unknown';
+	}
+
+	// Edit service
+	function showEditForm() {
+		offCanvas.showRight({
+			title: 'Edit Service',
+			content: editFormContent
+		});
+	}
+
+	async function handleEditSuccess() {
+		await invalidateAll();
+	}
+
+	// Schedule calendar event
+	const updateServiceStore = new UpdateServiceStore();
+
+	function showScheduleEventForm() {
+		offCanvas.showRight({
+			title: 'Schedule Calendar Event',
+			content: scheduleEventContent
+		});
+	}
+
+	async function handleEventSuccess(eventId: string) {
+		// Save the calendar event ID to the service
+		await updateServiceStore.mutate({
+			input: {
+				id: service.id,
+				calendarEventId: eventId
+			}
+		});
+		await invalidateAll();
+	}
+
+	// Build initial values for calendar event from service data
+	let eventInitialValues = $derived(() => {
+		const addressName = accountInfo?.addressName || 'Primary Service Address';
+		const titleParts = ['SERVICE:', accountInfo?.accountName, '-', addressName].filter(Boolean);
+		return {
+			summary: titleParts.join(' '),
+			location: address || undefined,
+			date: service.date
+		};
+	});
+
+	// Session handlers
+	async function handleStartSession() {
+		isStartingSession = true;
+		try {
+			await openServiceSession({ serviceId: serviceUuid });
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to start session:', err);
+		} finally {
+			isStartingSession = false;
+		}
+	}
+
+	async function handleCloseSession() {
+		if (!session) return;
+		isSubmitting = true;
+		try {
+			if (selectedTaskIds.size > 0) {
+				const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+					addServiceTask(serviceUuid, taskUuid)
+				);
+				await Promise.all(promises);
+				selectedTaskIds.clear();
+			}
+			await closeServiceSession({ serviceId: serviceUuid, taskIds: [] });
+			await goto('/admin/services', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to close session:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	async function handleRevertSession() {
+		if (
+			!confirm(
+				'Are you sure you want to cancel this session? All completed tasks, photos, videos, and notes will be deleted.'
+			)
+		) {
+			return;
+		}
+		isReverting = true;
+		try {
+			await revertServiceSession(serviceUuid);
+			await goto('/admin/services', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to revert session:', err);
+		} finally {
+			isReverting = false;
+		}
+	}
+
+	// Task handlers
+	function toggleTask(taskUuid: string) {
+		if (selectedTaskIds.has(taskUuid)) {
+			selectedTaskIds.delete(taskUuid);
+		} else {
+			selectedTaskIds.add(taskUuid);
+		}
+	}
+
+	async function handleSubmitTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			submittingTaskId = taskUuid;
+			await addServiceTask(serviceUuid, taskUuid);
+			selectedTaskIds.delete(taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit task:', err);
+		} finally {
+			submittingTaskId = null;
+		}
+	}
+
+	function handleRemoveTask(taskUuid: string) {
+		selectedTaskIds.delete(taskUuid);
+	}
+
+	async function handleRemoveCompletedTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			removingTaskId = taskUuid;
+			await removeServiceTask(serviceUuid, taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove completed task:', err);
+		} finally {
+			removingTaskId = null;
+		}
+	}
+
+	async function handleSubmitAllTasks() {
+		if (!session || selectedTaskIds.size === 0) return;
+		try {
+			isSubmitting = true;
+			const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+				addServiceTask(serviceUuid, taskUuid)
+			);
+			await Promise.all(promises);
+			selectedTaskIds.clear();
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit all tasks:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	// Note handlers
+	async function handleAddNote(content: string, internal: boolean) {
+		if (!session) return;
+		await createServiceNote({
+			sessionId: session.id,
+			content,
+			internal,
+			authorId: currentUserProfileId
+		});
+		await invalidateAll();
+	}
+
+	async function handleUpdateNote(noteId: string, content: string, internal: boolean) {
+		await updateServiceNote({ id: noteId, content, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeleteNote(noteId: string) {
+		await removeServiceNote(noteId);
+		await invalidateAll();
+	}
+
+	// Media handlers
+	async function handleUploadPhoto(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadServicePhoto(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUploadVideo(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadServiceVideo(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUpdatePhoto(
+		photoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateServicePhoto({ id: photoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleUpdateVideo(
+		videoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateServiceVideo({ id: videoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeletePhoto(photoId: string) {
+		await removeServicePhoto(photoId);
+		await invalidateAll();
+	}
+
+	async function handleDeleteVideo(videoId: string) {
+		await removeServiceVideo(videoId);
+		await invalidateAll();
+	}
+</script>
+
+{#snippet editFormContent()}
+	<ServiceForm {service} {customers} {accounts} {teamProfiles} onSuccess={handleEditSuccess} />
+{/snippet}
+
+{#snippet scheduleEventContent()}
+	<EventForm {teamProfiles} initialValues={eventInitialValues()} onSuccess={handleEventSuccess} />
+{/snippet}
+
+<svelte:head>
+	<title>{displayName} - Services - Admin - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<AdminPageHeader
+			title={displayName}
+			subtitle={accountInfo?.addressName}
+			colorScheme="secondary"
+			backHref="/admin/services"
+			invalidateOnBack
+			onEdit={showEditForm}
+		/>
+
+		<!-- Service Details Card -->
+		<div class="mb-6 rounded-xl border border-theme bg-theme-card p-6">
+			<div class="mb-4 flex items-center justify-between">
+				<h2 class="text-lg font-semibold text-theme">Service Details</h2>
+				{#if service.calendarEventId}
+					<a
+						href="/admin/calendar/{service.calendarEventId}"
+						class="inline-flex items-center gap-2 rounded-lg bg-accent7-500/10 px-3 py-1.5 text-sm font-medium text-accent7-600 transition-colors hover:bg-accent7-500/20 dark:text-accent7-400"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+						View Event
+					</a>
+				{:else}
+					<button
+						type="button"
+						onclick={showScheduleEventForm}
+						class="inline-flex items-center gap-2 rounded-lg bg-accent7-500/10 px-3 py-1.5 text-sm font-medium text-accent7-600 transition-colors hover:bg-accent7-500/20 dark:text-accent7-400"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+						Schedule Event
+					</button>
+				{/if}
+			</div>
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<!-- Status -->
+				<div>
+					<p class="detail-label">Status</p>
+					<div class="flex flex-wrap gap-2">
+						<span
+							class="inline-block rounded-full px-3 py-1 text-xs font-medium
+								{service.status === 'SCHEDULED'
+								? 'badge-primary'
+								: service.status === 'IN_PROGRESS'
+									? 'badge-accent'
+									: 'badge-secondary'}"
+						>
+							{service.status.replace('_', ' ')}
+						</span>
+						{#if isDispatched}
+							<span
+								class="inline-block rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+							>
+								Dispatched
+							</span>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Date -->
+				<div>
+					<p class="detail-label">Date</p>
+					<p class="text-theme">{formatDate(service.date)}</p>
+				</div>
+			</div>
+
+			<!-- Address -->
+			{#if address}
+				<div class="mt-4 border-t border-theme pt-4">
+					<p class="detail-label">Address</p>
+					<p class="text-theme">{address}</p>
+				</div>
+			{/if}
+
+			<!-- Team Members -->
+			{#if teamMembers().length > 0}
+				<div class="mt-4 border-t border-theme pt-4">
+					<div class="mb-2 flex items-center justify-between">
+						<p class="detail-label">Team</p>
+						{#if messagableMembers.length >= 2}
+							<button
+								type="button"
+								onclick={messageAllTeamMembers}
+								class="inline-flex items-center gap-1.5 rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary-700"
+							>
+								<svg
+									class="h-3.5 w-3.5"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+									/>
+								</svg>
+								Message Team
+							</button>
+						{/if}
+					</div>
+					<div class="space-y-2">
+						{#each teamMembers() as member (member.id)}
+							<div class="flex items-center gap-2">
+								<span
+									class="inline-flex h-6 w-6 items-center justify-center rounded text-xs font-bold {member.role ===
+									'TEAM_LEADER'
+										? 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
+										: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'}"
+								>
+									{member.role === 'TEAM_LEADER' ? 'TL' : 'TM'}
+								</span>
+								{#if member.role !== 'ADMIN'}
+									<button
+										type="button"
+										onclick={() => messageTeamMember(member.id)}
+										class="rounded-full p-1 text-theme-muted transition-colors hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
+										aria-label="Message {member.fullName}"
+									>
+										<svg
+											class="h-4 w-4"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+											/>
+										</svg>
+									</button>
+								{:else}
+									<!-- Spacer to maintain alignment for admin members -->
+									<span class="h-6 w-6"></span>
+								{/if}
+								<span class="text-theme">{member.fullName}</span>
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Notes -->
+			{#if service.notes}
+				<div class="mt-4 border-t border-theme pt-4">
+					<p class="detail-label">Notes</p>
+					<p class="whitespace-pre-wrap text-theme-secondary">{service.notes}</p>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Scope Info (read-only display) -->
+		{#if scope}
+			<div class="mb-6 rounded-xl border border-theme bg-theme-card p-6">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="text-lg font-semibold text-theme">Service Scope</h2>
+					<a
+						href="/admin/accounts/{accountGlobalId}#scope"
+						class="text-sm text-primary-500 hover:text-primary-600"
+					>
+						Manage at Account
+					</a>
+				</div>
+				<div class="space-y-2">
+					<div>
+						<span class="font-medium text-theme">{scope.name}</span>
+						{#if scope.isActive}
+							<span
+								class="ml-2 rounded bg-purple-100 px-1.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-400"
+							>
+								Active
+							</span>
+						{/if}
+					</div>
+					{#if scope.description}
+						<p class="text-sm text-theme-muted">{scope.description}</p>
+					{/if}
+					<p class="text-xs text-theme-muted">
+						{scope.areas?.length ?? 0}
+						{(scope.areas?.length ?? 0) === 1 ? 'area' : 'areas'},
+						{scope.areas?.reduce((acc, a) => acc + (a.tasks?.length ?? 0), 0) ?? 0} tasks
+					</p>
+				</div>
+			</div>
+		{:else}
+			<div class="mb-6 warning-box">
+				<div class="flex items-start gap-3">
+					<svg
+						class="warning-box-icon"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+					<div>
+						<h3 class="warning-box-title">No Scope Available</h3>
+						<p class="warning-box-text">
+							This service's address does not have an active scope defined.
+							<a
+								href="/admin/accounts/{accountGlobalId}#scope"
+								class="font-medium underline hover:no-underline"
+							>
+								Configure scope at the account level.
+							</a>
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Session Section -->
+		{#if service.status === 'IN_PROGRESS' && session}
+			<section>
+				<SessionSectionHeader isActive={true} sessionType="service" />
+				<SessionContent
+					sessionType="service"
+					isActive={true}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					scopeDescription={scope?.description}
+					addressInfo={address}
+					teamMembers={teamMembers()}
+					areas={scope?.areas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{isSubmitting}
+					{isReverting}
+					{submittingTaskId}
+					{removingTaskId}
+					{getTeamMemberName}
+					onClose={handleCloseSession}
+					onRevert={canRevertSession ? handleRevertSession : undefined}
+					onToggleTask={toggleTask}
+					onSubmitTask={handleSubmitTask}
+					onRemoveTask={handleRemoveTask}
+					onRemoveCompletedTask={handleRemoveCompletedTask}
+					onSubmitAllTasks={handleSubmitAllTasks}
+					onClearSelection={() => selectedTaskIds.clear()}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdatePhoto={handleUpdatePhoto}
+					onUpdateVideo={handleUpdateVideo}
+					onDeletePhoto={handleDeletePhoto}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if service.status === 'COMPLETED' && session}
+			<section>
+				<SessionSectionHeader isActive={false} sessionType="service" />
+				<SessionContent
+					sessionType="service"
+					isActive={false}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					addressInfo={address}
+					teamMembers={teamMembers()}
+					areas={scope?.areas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{getTeamMemberName}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUpdatePhoto={handleUpdatePhoto}
+					onDeletePhoto={handleDeletePhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdateVideo={handleUpdateVideo}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if service.status === 'SCHEDULED'}
+			{#if scope && (scope.areas?.length ?? 0) > 0}
+				<StartSessionButton
+					isLoading={isStartingSession}
+					backLabel="Back to Services"
+					onStart={handleStartSession}
+					onBack={() => goto('/admin/services', { invalidateAll: true })}
+				/>
+			{:else}
+				<div class="flex items-center gap-3">
+					<a
+						href="/admin/services"
+						class="rounded-lg border border-theme interactive bg-theme px-4 py-2 text-sm font-medium text-theme"
+					>
+						Back to Services
+					</a>
+				</div>
+			{/if}
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/admin/services/assign/+page.server.ts b/src/routes/admin/services/assign/+page.server.ts
new file mode 100644
index 0000000..4761935
--- /dev/null
+++ b/src/routes/admin/services/assign/+page.server.ts
@@ -0,0 +1,6 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ parent }) => {
+	// Inherit data from admin layout (accounts, team, lookups, etc.)
+	return await parent();
+};
diff --git a/src/routes/admin/services/assign/+page.svelte b/src/routes/admin/services/assign/+page.svelte
new file mode 100644
index 0000000..8a2013c
--- /dev/null
+++ b/src/routes/admin/services/assign/+page.svelte
@@ -0,0 +1,718 @@
+<script lang="ts">
+	import {
+		createAssignServicesStore,
+		type EnrichedService,
+		type TabType,
+		type ViewMode
+	} from '$lib/stores/assignServices.svelte';
+	import AssignColumn from '$lib/components/admin/services/assign/AssignColumn.svelte';
+	import AssignServiceGroup from '$lib/components/admin/services/assign/AssignServiceGroup.svelte';
+	import GenerateServicesModal from '$lib/components/admin/services/GenerateServicesModal.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Create store instance
+	const store = createAssignServicesStore();
+
+	// View mode options
+	const viewModes: ViewMode[] = ['date', 'week', 'account'];
+
+	// Layout data from parent
+	let accountLookup = $derived(data.accountLookup);
+	let teamProfiles = $derived(data.team?.data?.teamProfiles ?? []);
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+
+	// Generate modal state
+	let showGenerateModal = $state(false);
+
+	// Initialize store with external data
+	$effect(() => {
+		store.init(accountLookup, teamProfiles);
+	});
+
+	// Fetch services on mount and when month changes
+	$effect(() => {
+		void store.currentMonth;
+		store.fetchServices();
+	});
+
+	// Reset expanded groups when view mode changes
+	$effect(() => {
+		void store.viewMode;
+		store.resetExpandedGroups();
+	});
+
+	// Close dropdowns on window click
+	function handleWindowClick() {
+		store.closeAllDropdowns();
+	}
+
+	// Mobile tab helpers
+	function getTabColor(tab: TabType): { dot: string; text: string; badge: string } {
+		switch (tab) {
+			case 'unassigned':
+				return {
+					dot: 'bg-red-500',
+					text: 'text-red-600 dark:text-red-400',
+					badge: 'bg-red-500 text-white'
+				};
+			case 'readyToAssign':
+				return {
+					dot: 'bg-yellow-500',
+					text: 'text-yellow-600 dark:text-yellow-400',
+					badge: 'bg-yellow-500 text-white'
+				};
+			case 'assigned':
+				return {
+					dot: 'bg-green-500',
+					text: 'text-green-600 dark:text-green-400',
+					badge: 'bg-green-500 text-white'
+				};
+		}
+	}
+
+	let activeTabColor = $derived(getTabColor(store.activeTab));
+
+	function getTabLabel(tab: TabType): string {
+		switch (tab) {
+			case 'unassigned':
+				return 'Unassigned';
+			case 'readyToAssign':
+				return 'Ready';
+			case 'assigned':
+				return 'Assigned';
+		}
+	}
+
+	function getTabCount(tab: TabType): number {
+		switch (tab) {
+			case 'unassigned':
+				return store.categorizedServices.unassigned.length;
+			case 'readyToAssign':
+				return store.categorizedServices.readyToAssign.length;
+			case 'assigned':
+				return store.categorizedServices.assigned.length;
+		}
+	}
+
+	function getMobileGroupedServices(): Map<string, EnrichedService[]> {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return store.groupedUnassigned;
+			case 'readyToAssign':
+				return store.groupedReadyToAssign;
+			case 'assigned':
+				return store.groupedAssigned;
+		}
+	}
+
+	function getMobileExpandedGroups() {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return store.expandedUnassigned;
+			case 'readyToAssign':
+				return store.expandedReadyToAssign;
+			case 'assigned':
+				return store.expandedAssigned;
+		}
+	}
+
+	function getMobileEmptyMessage(): string {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return 'No unassigned services';
+			case 'readyToAssign':
+				return 'No services ready to assign';
+			case 'assigned':
+				return 'No assigned services';
+		}
+	}
+
+	function getMobileEmptyIcon(): string {
+		switch (store.activeTab) {
+			case 'unassigned':
+			case 'assigned':
+				return 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
+			case 'readyToAssign':
+				return 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z';
+		}
+	}
+
+	function getMobileSelectedServices() {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return store.selectedUnassigned;
+			case 'readyToAssign':
+				return store.selectedReadyToAssign;
+			case 'assigned':
+				return store.selectedAssigned;
+		}
+	}
+
+	function getMobileBulkAction(): () => void {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return store.bulkAddDispatch;
+			case 'readyToAssign':
+				return store.bulkAddTeamMember;
+			case 'assigned':
+				return store.bulkRemoveNonDispatch;
+		}
+	}
+
+	function getMobileBulkActionLabel(): string {
+		switch (store.activeTab) {
+			case 'unassigned':
+				return 'Add Dispatch';
+			case 'readyToAssign':
+				return 'Assign';
+			case 'assigned':
+				return 'Remove Team';
+		}
+	}
+
+	function getMobileBulkActionDisabled(): boolean {
+		if (store.isBulkOperating) return true;
+		const selected = getMobileSelectedServices();
+		if (selected.size === 0) return true;
+		return store.activeTab === 'readyToAssign' && !store.bulkSelectedTeamMember;
+	}
+
+	let mobileHasSelection = $derived(getMobileSelectedServices().size > 0);
+	let mobileAllSelected = $derived(
+		getTabCount(store.activeTab) > 0 &&
+			getMobileSelectedServices().size === getTabCount(store.activeTab)
+	);
+
+	function getMobileSelectedTeamMemberName(): string {
+		if (!store.bulkSelectedTeamMember) return 'Select...';
+		const member = store.nonAdminTeamMembers.find((m) => {
+			const parts = atob(m.id).split(':');
+			return parts[1] === store.bulkSelectedTeamMember;
+		});
+		return member?.fullName ?? 'Unknown';
+	}
+</script>
+
+<svelte:window onclick={handleWindowClick} />
+
+<svelte:head>
+	<title>Bulk Assign - Services - Admin - Nexus</title>
+</svelte:head>
+
+<div class="flex h-screen flex-col overflow-hidden bg-theme">
+	<!-- Header -->
+	<div class="border-b border-theme bg-theme-card px-4 py-4 shadow-sm lg:px-6">
+		<!-- Page Title Row -->
+		<div class="flex items-center gap-4">
+			<a
+				href="/admin/services"
+				class="rounded-lg border border-theme interactive bg-theme px-3 py-1.5 text-sm font-medium text-theme"
+			>
+				Back
+			</a>
+			<div class="min-w-0 flex-1">
+				<h1 class="text-xl font-bold text-secondary-600 dark:text-secondary-400">Bulk Assign</h1>
+				<p class="text-sm text-theme-secondary">Assign team members to scheduled services</p>
+			</div>
+			<!-- Desktop: Month Navigation -->
+			<div class="hidden items-center gap-2 lg:flex">
+				<button
+					onclick={store.previousMonth}
+					aria-label="Previous month"
+					class="rounded-lg border border-theme interactive bg-theme p-2 text-theme-muted hover:text-theme"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+				</button>
+				<span class="min-w-[140px] text-center text-lg font-semibold text-theme">
+					{store.monthDisplay}
+				</span>
+				<button
+					onclick={store.nextMonth}
+					aria-label="Next month"
+					class="rounded-lg border border-theme interactive bg-theme p-2 text-theme-muted hover:text-theme"
+				>
+					<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5l7 7-7 7"
+						/>
+					</svg>
+				</button>
+				<button
+					onclick={store.goToCurrentMonth}
+					class="rounded-lg border border-theme interactive bg-theme px-3 py-1.5 text-sm font-medium text-theme"
+				>
+					Now
+				</button>
+			</div>
+		</div>
+
+		<!-- Controls Row (Generate + View Mode) -->
+		<div class="mt-4 flex items-center justify-between gap-3">
+			<button
+				onclick={() => (showGenerateModal = true)}
+				class="flex items-center gap-2 rounded-lg border border-theme interactive bg-theme px-3 py-1.5 text-sm font-medium text-theme"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				<span>Generate</span>
+			</button>
+			<div class="flex items-center rounded-lg border border-theme bg-theme p-1">
+				{#each viewModes as mode (mode)}
+					<button
+						onclick={() => store.setViewMode(mode)}
+						class="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium transition-colors lg:px-3 {store.viewMode ===
+						mode
+							? 'bg-theme-card text-theme shadow-sm'
+							: 'text-theme-muted hover:text-theme'}"
+					>
+						<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+							{#if mode === 'date'}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+								/>
+							{:else if mode === 'week'}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+								/>
+							{:else}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+								/>
+							{/if}
+						</svg>
+						<span class="hidden capitalize sm:inline">{mode}</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Mobile Month Navigation -->
+		<div class="mt-4 flex items-center justify-between lg:hidden">
+			<button
+				onclick={store.previousMonth}
+				aria-label="Previous month"
+				class="rounded-lg border border-theme bg-theme p-2 text-theme-muted"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</button>
+			<div class="flex items-center gap-2">
+				<span class="text-lg font-semibold text-theme">{store.monthDisplay}</span>
+				<button
+					onclick={store.goToCurrentMonth}
+					class="rounded-lg border border-theme interactive bg-theme px-2 py-1 text-xs font-medium text-theme"
+				>
+					Now
+				</button>
+			</div>
+			<button
+				onclick={store.nextMonth}
+				aria-label="Next month"
+				class="rounded-lg border border-theme bg-theme p-2 text-theme-muted"
+			>
+				<svg class="h-4 w-4" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<!-- Error Alert -->
+	{#if store.error}
+		<div class="mx-4 mt-4 alert-error lg:mx-6">
+			{store.error}
+			<button onclick={store.clearError} class="ml-2 font-medium underline">Dismiss</button>
+		</div>
+	{/if}
+
+	<!-- Mobile Tab Toggle -->
+	<div class="flex items-center justify-center gap-3 border-b border-theme py-3 lg:hidden">
+		<button
+			onclick={store.previousTab}
+			aria-label="Previous tab"
+			class="rounded-lg interactive p-1 text-theme-muted hover:text-theme"
+		>
+			<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+		<div class="flex items-center gap-2">
+			<span class="h-3 w-3 rounded-full {activeTabColor.dot}"></span>
+			<span class="text-lg font-semibold {activeTabColor.text}">{getTabLabel(store.activeTab)}</span
+			>
+			<span class="rounded-full px-2 py-0.5 text-xs font-semibold {activeTabColor.badge}">
+				{getTabCount(store.activeTab)}
+			</span>
+		</div>
+		<button
+			onclick={store.nextTab}
+			aria-label="Next tab"
+			class="rounded-lg interactive p-1 text-theme-muted hover:text-theme"
+		>
+			<svg class="h-5 w-5" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Mobile Bulk Action Bar -->
+	{#if getTabCount(store.activeTab) > 0}
+		<div class="border-b border-theme bg-theme-card px-4 py-2 lg:hidden">
+			<div class="flex items-center justify-between gap-2">
+				<!-- Select All / Clear -->
+				<div class="flex items-center gap-2">
+					<button
+						onclick={() =>
+							mobileAllSelected
+								? store.clearColumnSelection(store.activeTab)
+								: store.selectAllInColumn(store.activeTab)}
+						class="flex items-center gap-1.5 rounded interactive px-2 py-1 text-xs font-medium {mobileHasSelection
+							? 'text-primary-600 dark:text-primary-400'
+							: 'text-theme-muted'}"
+					>
+						<svg
+							class="h-4 w-4"
+							style="fill: none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							{#if mobileAllSelected}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							{:else if mobileHasSelection}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							{:else}
+								<circle cx="12" cy="12" r="9" />
+							{/if}
+						</svg>
+						{#if mobileHasSelection}
+							<span>{getMobileSelectedServices().size} selected</span>
+						{:else}
+							<span>Select all</span>
+						{/if}
+					</button>
+					{#if mobileHasSelection}
+						<button
+							onclick={() => store.clearColumnSelection(store.activeTab)}
+							class="text-xs text-theme-muted hover:text-theme"
+						>
+							Clear
+						</button>
+					{/if}
+				</div>
+
+				<!-- Bulk Action -->
+				{#if mobileHasSelection}
+					<div class="flex items-center gap-2">
+						{#if store.activeTab === 'readyToAssign'}
+							<!-- Team member dropdown for bulk assignment -->
+							<div class="relative">
+								<button
+									onclick={(e) => {
+										e.stopPropagation();
+										store.toggleBulkTeamMemberDropdown();
+									}}
+									class="flex items-center gap-1 rounded border border-theme interactive bg-theme px-2 py-1 text-xs font-medium text-theme"
+								>
+									<span class="max-w-[80px] truncate">{getMobileSelectedTeamMemberName()}</span>
+									<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 9l-7 7-7-7"
+										/>
+									</svg>
+								</button>
+								{#if store.showBulkTeamMemberDropdown}
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<div
+										role="menu"
+										tabindex="-1"
+										onclick={(e) => e.stopPropagation()}
+										class="absolute top-full right-0 z-30 mt-1 max-h-48 w-48 overflow-y-auto rounded-lg border border-theme bg-theme-card py-1 shadow-lg"
+									>
+										{#each store.nonAdminTeamMembers as member (member.id)}
+											{@const memberPk = atob(member.id).split(':')[1]}
+											<button
+												onclick={() => {
+													store.setBulkSelectedTeamMember(memberPk);
+													store.toggleBulkTeamMemberDropdown();
+												}}
+												class="block w-full interactive px-3 py-2 text-left text-sm text-theme {store.bulkSelectedTeamMember ===
+												memberPk
+													? 'bg-primary-50 dark:bg-primary-900/20'
+													: ''}"
+											>
+												{member.fullName}
+											</button>
+										{/each}
+									</div>
+								{/if}
+							</div>
+						{/if}
+						<button
+							onclick={getMobileBulkAction()}
+							disabled={getMobileBulkActionDisabled()}
+							class="flex items-center gap-1 rounded bg-primary-600 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							{#if store.isBulkOperating}
+								<IconSpinner class="h-3 w-3" />
+							{:else}
+								<svg class="h-3 w-3" style="fill: none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							{/if}
+							{getMobileBulkActionLabel()}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Main Content -->
+	{#if store.isLoading}
+		<div class="flex flex-1 items-center justify-center">
+			<div class="flex flex-col items-center gap-4">
+				<svg
+					class="h-12 w-12 animate-spin text-secondary-500"
+					style="fill: none"
+					viewBox="0 0 24 24"
+				>
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+				<span class="text-theme-secondary">Loading services...</span>
+			</div>
+		</div>
+	{:else}
+		<!-- Desktop: Three columns -->
+		<div class="hidden flex-1 gap-5 overflow-hidden p-5 lg:flex">
+			<AssignColumn
+				column="unassigned"
+				services={store.categorizedServices.unassigned}
+				groupedServices={store.groupedUnassigned}
+				expandedGroups={store.expandedUnassigned}
+				updatingServices={store.updatingServices}
+				openTeamMemberDropdown={store.openTeamMemberDropdown}
+				editingDateServiceId={store.editingDateServiceId}
+				selectedServices={store.selectedUnassigned}
+				isBulkOperating={store.isBulkOperating}
+				onToggleGroup={(groupKey) => store.toggleGroup('unassigned', groupKey)}
+				getTeamMemberNames={store.getTeamMemberNames}
+				getNonDispatchTeamMemberNames={store.getNonDispatchTeamMemberNames}
+				getAvailableTeamMembers={store.getAvailableTeamMembers}
+				getStagedTeamMemberDetails={store.getStagedTeamMemberDetails}
+				hasStagedMembers={store.hasStagedMembers}
+				onAddDispatch={store.addDispatchToService}
+				onRemoveDispatch={store.removeDispatchFromService}
+				onSubmitStaged={store.submitStagedTeamMembers}
+				onRemoveNonDispatch={store.removeNonDispatchMembers}
+				onStageTeamMember={store.stageTeamMember}
+				onUnstageTeamMember={store.unstageTeamMember}
+				onToggleDropdown={store.setOpenTeamMemberDropdown}
+				onToggleSelection={(id) => store.toggleServiceSelection('unassigned', id)}
+				onSelectAll={() => store.selectAllInColumn('unassigned')}
+				onClearSelection={() => store.clearColumnSelection('unassigned')}
+				onBulkAction={store.bulkAddDispatch}
+				onUpdateDate={store.updateServiceDate}
+				onDeleteService={store.promptDeleteService}
+				onStartEditDate={store.startEditDate}
+				onCancelEditDate={store.cancelEditDate}
+			/>
+			<AssignColumn
+				column="readyToAssign"
+				services={store.categorizedServices.readyToAssign}
+				groupedServices={store.groupedReadyToAssign}
+				expandedGroups={store.expandedReadyToAssign}
+				updatingServices={store.updatingServices}
+				openTeamMemberDropdown={store.openTeamMemberDropdown}
+				selectedServices={store.selectedReadyToAssign}
+				isBulkOperating={store.isBulkOperating}
+				nonAdminTeamMembers={store.nonAdminTeamMembers}
+				bulkSelectedTeamMember={store.bulkSelectedTeamMember}
+				showBulkTeamMemberDropdown={store.showBulkTeamMemberDropdown}
+				onToggleGroup={(groupKey) => store.toggleGroup('readyToAssign', groupKey)}
+				getTeamMemberNames={store.getTeamMemberNames}
+				getNonDispatchTeamMemberNames={store.getNonDispatchTeamMemberNames}
+				getAvailableTeamMembers={store.getAvailableTeamMembers}
+				getStagedTeamMemberDetails={store.getStagedTeamMemberDetails}
+				hasStagedMembers={store.hasStagedMembers}
+				onAddDispatch={store.addDispatchToService}
+				onRemoveDispatch={store.removeDispatchFromService}
+				onSubmitStaged={store.submitStagedTeamMembers}
+				onRemoveNonDispatch={store.removeNonDispatchMembers}
+				onStageTeamMember={store.stageTeamMember}
+				onUnstageTeamMember={store.unstageTeamMember}
+				onToggleDropdown={store.setOpenTeamMemberDropdown}
+				onToggleSelection={(id) => store.toggleServiceSelection('readyToAssign', id)}
+				onSelectAll={() => store.selectAllInColumn('readyToAssign')}
+				onClearSelection={() => store.clearColumnSelection('readyToAssign')}
+				onBulkAction={store.bulkAddTeamMember}
+				onBulkTeamMemberSelect={store.setBulkSelectedTeamMember}
+				onToggleBulkTeamMemberDropdown={store.toggleBulkTeamMemberDropdown}
+			/>
+			<AssignColumn
+				column="assigned"
+				services={store.categorizedServices.assigned}
+				groupedServices={store.groupedAssigned}
+				expandedGroups={store.expandedAssigned}
+				updatingServices={store.updatingServices}
+				openTeamMemberDropdown={store.openTeamMemberDropdown}
+				selectedServices={store.selectedAssigned}
+				isBulkOperating={store.isBulkOperating}
+				onToggleGroup={(groupKey) => store.toggleGroup('assigned', groupKey)}
+				getTeamMemberNames={store.getTeamMemberNames}
+				getNonDispatchTeamMemberNames={store.getNonDispatchTeamMemberNames}
+				getAvailableTeamMembers={store.getAvailableTeamMembers}
+				getStagedTeamMemberDetails={store.getStagedTeamMemberDetails}
+				hasStagedMembers={store.hasStagedMembers}
+				onAddDispatch={store.addDispatchToService}
+				onRemoveDispatch={store.removeDispatchFromService}
+				onSubmitStaged={store.submitStagedTeamMembers}
+				onRemoveNonDispatch={store.removeNonDispatchMembers}
+				onStageTeamMember={store.stageTeamMember}
+				onUnstageTeamMember={store.unstageTeamMember}
+				onToggleDropdown={store.setOpenTeamMemberDropdown}
+				onToggleSelection={(id) => store.toggleServiceSelection('assigned', id)}
+				onSelectAll={() => store.selectAllInColumn('assigned')}
+				onClearSelection={() => store.clearColumnSelection('assigned')}
+				onBulkAction={store.bulkRemoveNonDispatch}
+			/>
+		</div>
+
+		<!-- Mobile: Single column based on active tab -->
+		<div class="flex-1 overflow-y-auto p-4 lg:hidden">
+			{#each [...getMobileGroupedServices().entries()] as [groupKey, groupServices] (groupKey)}
+				<div class="mb-2">
+					<AssignServiceGroup
+						{groupKey}
+						services={groupServices}
+						column={store.activeTab}
+						isExpanded={getMobileExpandedGroups().has(groupKey)}
+						updatingServices={store.updatingServices}
+						openTeamMemberDropdown={store.openTeamMemberDropdown}
+						editingDateServiceId={store.activeTab === 'unassigned'
+							? store.editingDateServiceId
+							: null}
+						selectedServices={getMobileSelectedServices()}
+						onToggle={() => store.toggleGroup(store.activeTab, groupKey)}
+						getTeamMemberNames={store.getTeamMemberNames}
+						getNonDispatchTeamMemberNames={store.getNonDispatchTeamMemberNames}
+						getAvailableTeamMembers={store.getAvailableTeamMembers}
+						getStagedTeamMemberDetails={store.getStagedTeamMemberDetails}
+						hasStagedMembers={store.hasStagedMembers}
+						onAddDispatch={store.addDispatchToService}
+						onRemoveDispatch={store.removeDispatchFromService}
+						onSubmitStaged={store.submitStagedTeamMembers}
+						onRemoveNonDispatch={store.removeNonDispatchMembers}
+						onStageTeamMember={store.stageTeamMember}
+						onUnstageTeamMember={store.unstageTeamMember}
+						onToggleDropdown={store.setOpenTeamMemberDropdown}
+						onToggleSelection={(id) => store.toggleServiceSelection(store.activeTab, id)}
+						onUpdateDate={store.activeTab === 'unassigned' ? store.updateServiceDate : undefined}
+						onDeleteService={store.activeTab === 'unassigned'
+							? store.promptDeleteService
+							: undefined}
+						onStartEditDate={store.activeTab === 'unassigned' ? store.startEditDate : undefined}
+						onCancelEditDate={store.activeTab === 'unassigned' ? store.cancelEditDate : undefined}
+					/>
+				</div>
+			{/each}
+			{#if getTabCount(store.activeTab) === 0}
+				<div class="py-12 text-center text-theme-muted">
+					<svg
+						class="mx-auto mb-3 h-12 w-12"
+						style="fill: none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d={getMobileEmptyIcon()}
+						/>
+					</svg>
+					{getMobileEmptyMessage()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<GenerateServicesModal
+	bind:open={showGenerateModal}
+	{accounts}
+	initialMonth={store.currentMonth.getMonth() + 1}
+	initialYear={store.currentMonth.getFullYear()}
+	onClose={() => (showGenerateModal = false)}
+	onSuccess={async () => {
+		await store.fetchServices();
+	}}
+/>
+
+<DeleteConfirmModal
+	bind:open={store.showDeleteModal}
+	title="Delete Service"
+	message={store.serviceToDelete
+		? `Are you sure you want to delete the service for "${store.serviceToDelete.accountName}" on ${new Date(store.serviceToDelete.date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}? This action cannot be undone.`
+		: 'Are you sure you want to delete this service?'}
+	onconfirm={store.confirmDeleteService}
+	oncancel={store.cancelDeleteService}
+	loading={store.isDeleting}
+/>
diff --git a/src/routes/contact/+page.server.ts b/src/routes/contact/+page.server.ts
new file mode 100644
index 0000000..7015031
--- /dev/null
+++ b/src/routes/contact/+page.server.ts
@@ -0,0 +1,41 @@
+import { fail } from '@sveltejs/kit';
+import { emailService } from '$lib/services/email';
+import type { Actions } from './$types';
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		const name = formData.get('name') as string;
+		const email = formData.get('email') as string;
+		const subject = formData.get('subject') as string;
+		const message = formData.get('message') as string;
+
+		if (!name || !email || !subject || !message) {
+			return fail(400, { error: 'All fields are required' });
+		}
+
+		const htmlBody = `
+			<p><strong>From:</strong> ${name} &lt;${email}&gt;</p>
+			<p><strong>Subject:</strong> ${subject}</p>
+			<hr />
+			<p>${message.replace(/\n/g, '<br />')}</p>
+		`.trim();
+
+		const { error } = await emailService.sendEmail(
+			{
+				to: ['service@nexusclean.net'],
+				subject: `Contact Form: ${subject}`,
+				body: htmlBody,
+				fromName: 'Nexus Dispatch'
+			},
+			'dispatch@nexusclean.net'
+		);
+
+		if (error) {
+			console.error('Email API error:', error);
+			return fail(500, { error: 'Failed to send message. Please try again.' });
+		}
+
+		return { success: true };
+	}
+} satisfies Actions;
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
new file mode 100644
index 0000000..8847c20
--- /dev/null
+++ b/src/routes/contact/+page.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+	import { enhance } from '$app/forms';
+	import type { SubmitFunction } from '@sveltejs/kit';
+
+	let submitting = $state(false);
+	let submitStatus = $state<'idle' | 'success' | 'error'>('idle');
+	let errorMessage = $state('');
+
+	const handleSubmit: SubmitFunction = () => {
+		submitting = true;
+		submitStatus = 'idle';
+		return async ({ result, update }) => {
+			submitting = false;
+			if (result.type === 'success') {
+				submitStatus = 'success';
+				await update({ reset: true });
+			} else if (result.type === 'failure') {
+				submitStatus = 'error';
+				const data = result.data as { error?: string } | undefined;
+				errorMessage = data?.error || 'Failed to send message.';
+			}
+		};
+	};
+</script>
+
+<svelte:head>
+	<title>Contact Us - Nexus</title>
+	<meta
+		name="description"
+		content="Get in touch with Nexus Cleaning Solutions. We'd love to hear from you."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Get in Touch</h1>
+			<p class="mt-6 text-xl text-theme-secondary">
+				Have a question, feedback, or just want to say hello? We'd love to hear from you. Fill out
+				the form below and we'll get back to you as soon as possible.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Contact Form Section -->
+<section class="pb-20">
+	<ContentContainer>
+		<div class="grid gap-12 lg:grid-cols-3">
+			<!-- Contact Info -->
+			<div class="space-y-8 lg:col-span-1">
+				<div>
+					<h3 class="mb-2 text-lg font-semibold text-theme">Phone</h3>
+					<a href="tel:+15864058925" class="text-primary-600 hover:underline dark:text-primary-400">
+						(586) 405-8925
+					</a>
+				</div>
+
+				<div>
+					<h3 class="mb-2 text-lg font-semibold text-theme">Email</h3>
+					<a
+						href="mailto:service@nexusclean.net"
+						class="text-primary-600 hover:underline dark:text-primary-400"
+					>
+						service@nexusclean.net
+					</a>
+				</div>
+
+				<div>
+					<h3 class="mb-2 text-lg font-semibold text-theme">Hours</h3>
+					<div class="space-y-3">
+						<div>
+							<p class="font-medium text-theme">Office Hours</p>
+							<p class="text-sm text-theme-secondary">9:00 AM - 5:00 PM<br />By appointment only</p>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Overnight Dispatch</p>
+							<p class="text-sm text-theme-secondary">
+								6:00 PM - 2:00 AM<br />Emergency service available
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Form -->
+			<div class="lg:col-span-2">
+				<form
+					method="POST"
+					use:enhance={handleSubmit}
+					class="rounded-2xl border border-theme bg-theme-card p-6 md:p-8"
+				>
+					<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+						<div>
+							<label for="name" class="mb-2 block text-sm font-medium text-theme">Name</label>
+							<input
+								type="text"
+								id="name"
+								name="name"
+								required
+								class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
+								placeholder="Your name"
+							/>
+						</div>
+
+						<div>
+							<label for="email" class="mb-2 block text-sm font-medium text-theme">Email</label>
+							<input
+								type="email"
+								id="email"
+								name="email"
+								required
+								class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
+								placeholder="you@example.com"
+							/>
+						</div>
+					</div>
+
+					<div class="mt-6">
+						<label for="subject" class="mb-2 block text-sm font-medium text-theme">Subject</label>
+						<input
+							type="text"
+							id="subject"
+							name="subject"
+							required
+							class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
+							placeholder="How can we help?"
+						/>
+					</div>
+
+					<div class="mt-6">
+						<label for="message" class="mb-2 block text-sm font-medium text-theme">Message</label>
+						<textarea
+							id="message"
+							name="message"
+							required
+							rows="5"
+							class="w-full resize-none rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
+							placeholder="Your message..."
+						></textarea>
+					</div>
+
+					<div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center">
+						<button
+							type="submit"
+							disabled={submitting}
+							class="w-full rounded-lg bg-primary-600 px-8 py-3 font-medium text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+						>
+							{submitting ? 'Sending...' : 'Send Message'}
+						</button>
+
+						{#if submitStatus === 'success'}
+							<p class="text-sm font-medium text-success">Thank you! Your message has been sent.</p>
+						{:else if submitStatus === 'error'}
+							<p class="text-sm font-medium text-danger">
+								{errorMessage}
+							</p>
+						{/if}
+					</div>
+				</form>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/customer/+layout.server.ts b/src/routes/customer/+layout.server.ts
new file mode 100644
index 0000000..5afd64f
--- /dev/null
+++ b/src/routes/customer/+layout.server.ts
@@ -0,0 +1,158 @@
+import type { LayoutServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+import { CustomerAccountsStore, CustomerDashboardStore } from '$houdini';
+import { fromGlobalId } from '$lib/utils/relay';
+import { getCurrentMonth } from '$lib/utils/date';
+
+export interface CustomerAccountInfo {
+	name: string;
+	addressName?: string;
+	streetAddress?: string;
+	city?: string;
+	state?: string;
+}
+
+export const load: LayoutServerLoad = async (event) => {
+	const { url, parent, locals, depends } = event;
+	depends('app:dashboard');
+
+	const parentData = await parent();
+
+	// Get month from URL params or default to current month
+	const currentMonth = url.searchParams.get('month') ?? getCurrentMonth();
+	const me = parentData.user?.data?.me;
+
+	// Not authenticated
+	if (!me) {
+		const returnTo = encodeURIComponent(url.pathname + url.search);
+		throw redirect(307, `/login?return_to=${returnTo}`);
+	}
+
+	// Customer routes require customer profile
+	if (me.__typename !== 'CustomerProfileType') {
+		throw error(403, 'This area is only accessible to customers');
+	}
+
+	// Get customer UUIDs from profile
+	const customerIds = me.customers?.map((c) => fromGlobalId(c.id)) ?? [];
+
+	if (customerIds.length === 0) {
+		// Customer profile has no linked customers - show empty state
+		return {
+			...parentData,
+			currentMonth,
+			customerIds: [],
+			customerNames: {} as Record<string, string>,
+			customerAccountLookup: {} as Record<string, CustomerAccountInfo>,
+			accounts: [],
+			services: {
+				upcoming: [],
+				completed: []
+			},
+			projects: {
+				upcoming: [],
+				completed: []
+			},
+			invoices: []
+		};
+	}
+
+	// Build customer name lookup
+	const customerNames = new Map<string, string>();
+	me.customers?.forEach((c) => {
+		customerNames.set(fromGlobalId(c.id), c.name);
+	});
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Fetch accounts and dashboard data in parallel
+	// Need accounts for display lookup, dashboard for services/projects/invoices
+	const [accountsResults, dashboardResults] = await Promise.all([
+		// Fetch accounts for all linked customers
+		Promise.all(
+			customerIds.map((customerId) =>
+				new CustomerAccountsStore().fetch({
+					...fetchParams,
+					variables: { filters: { customerId } }
+				})
+			)
+		),
+		// Fetch consolidated dashboard data for each customer
+		Promise.all(
+			customerIds.map((customerId) =>
+				new CustomerDashboardStore().fetch({
+					...fetchParams,
+					variables: { customerId }
+				})
+			)
+		)
+	]);
+
+	// Combine all accounts from all customers
+	const allAccounts = accountsResults.flatMap((result) => result.data?.accounts ?? []);
+
+	// Combine dashboard data from all customers
+	const allServices = dashboardResults.flatMap(
+		(result) => result.data?.customerDashboard?.services ?? []
+	);
+	const allProjects = dashboardResults.flatMap(
+		(result) => result.data?.customerDashboard?.projects ?? []
+	);
+	const allInvoices = dashboardResults.flatMap(
+		(result) => result.data?.customerDashboard?.invoices ?? []
+	);
+
+	// Build account lookup for display
+	const customerAccountLookup = new Map<string, CustomerAccountInfo>();
+
+	allAccounts.forEach((account) => {
+		const accountUuid = fromGlobalId(account.id);
+		customerAccountLookup.set(accountUuid, {
+			name: account.name,
+			streetAddress: account.primaryAddress?.streetAddress,
+			city: account.primaryAddress?.city,
+			state: account.primaryAddress?.state
+		});
+		// Also map addresses
+		account.addresses?.forEach((addr) => {
+			const addrUuid = fromGlobalId(addr.id);
+			customerAccountLookup.set(addrUuid, {
+				name: account.name,
+				addressName: addr.name,
+				streetAddress: addr.streetAddress,
+				city: addr.city,
+				state: addr.state
+			});
+		});
+	});
+
+	// Filter services by status
+	const upcomingServices = allServices.filter(
+		(s) => s.status === 'SCHEDULED' || s.status === 'IN_PROGRESS'
+	);
+	const completedServices = allServices.filter((s) => s.status === 'COMPLETED');
+
+	// Filter projects by status
+	const upcomingProjects = allProjects.filter(
+		(p) => p.status === 'SCHEDULED' || p.status === 'IN_PROGRESS'
+	);
+	const completedProjects = allProjects.filter((p) => p.status === 'COMPLETED');
+
+	return {
+		...parentData,
+		currentMonth,
+		customerIds,
+		customerNames: Object.fromEntries(customerNames),
+		customerAccountLookup: Object.fromEntries(customerAccountLookup),
+		accounts: allAccounts,
+		services: {
+			upcoming: upcomingServices,
+			completed: completedServices
+		},
+		projects: {
+			upcoming: upcomingProjects,
+			completed: completedProjects
+		},
+		invoices: allInvoices
+	};
+};
diff --git a/src/routes/customer/+layout.svelte b/src/routes/customer/+layout.svelte
new file mode 100644
index 0000000..ae9c9d0
--- /dev/null
+++ b/src/routes/customer/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+{@render children()}
diff --git a/src/routes/customer/+page.svelte b/src/routes/customer/+page.svelte
new file mode 100644
index 0000000..e3b491e
--- /dev/null
+++ b/src/routes/customer/+page.svelte
@@ -0,0 +1,400 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import { formatDate, getCurrentMonth } from '$lib/utils/date';
+	import type { PageData } from './$types';
+	import type { CustomerAccountInfo } from './+layout.server';
+	import type {
+		CustomerAccounts$result,
+		CustomerServices$result,
+		CustomerProjects$result,
+		CustomerInvoices$result
+	} from '$houdini';
+
+	type Account = CustomerAccounts$result['accounts'][number];
+	type Service = CustomerServices$result['services'][number];
+	type Project = CustomerProjects$result['projects'][number];
+	type Invoice = CustomerInvoices$result['invoices'][number];
+
+	type LayoutData = PageData & {
+		currentMonth?: string;
+		accounts?: Account[];
+		services?: {
+			upcoming?: Service[];
+			completed?: Service[];
+		};
+		projects?: {
+			upcoming?: Project[];
+			completed?: Project[];
+		};
+		invoices?: Invoice[];
+		customerAccountLookup?: Record<string, CustomerAccountInfo>;
+	};
+
+	let { data }: { data: LayoutData } = $props();
+
+	let user = $derived(data.user?.data?.me);
+	let firstName = $derived(user?.fullName?.split(' ')[0] ?? 'there');
+	let currentMonth = $derived(data.currentMonth ?? getCurrentMonth());
+
+	// Get data from layout - now flat arrays
+	let accounts = $derived(data.accounts ?? []);
+	let upcomingServices = $derived(data.services?.upcoming ?? []);
+	let upcomingProjects = $derived(data.projects?.upcoming ?? []);
+	let completedServices = $derived(data.services?.completed ?? []);
+	let completedProjects = $derived(data.projects?.completed ?? []);
+	let invoices = $derived(data.invoices ?? []);
+	let customerAccountLookup = $derived(
+		data.customerAccountLookup ?? ({} as Record<string, CustomerAccountInfo>)
+	);
+
+	// Filter by current month
+	let monthFilteredUpcomingServices = $derived(
+		upcomingServices.filter((s) => s.date.startsWith(currentMonth))
+	);
+	let monthFilteredUpcomingProjects = $derived(
+		upcomingProjects.filter((p) => p.date.startsWith(currentMonth))
+	);
+	let monthFilteredCompletedServices = $derived(
+		completedServices.filter((s) => s.date.startsWith(currentMonth))
+	);
+	let monthFilteredCompletedProjects = $derived(
+		completedProjects.filter((p) => p.date.startsWith(currentMonth))
+	);
+	let monthFilteredInvoices = $derived(invoices.filter((inv) => inv.date.startsWith(currentMonth)));
+
+	// Compute stats (month-filtered)
+	let accountCount = $derived(accounts.length);
+	let upcomingCount = $derived(
+		monthFilteredUpcomingServices.length + monthFilteredUpcomingProjects.length
+	);
+	let completedCount = $derived(
+		monthFilteredCompletedServices.length + monthFilteredCompletedProjects.length
+	);
+	let pendingInvoices = $derived(
+		monthFilteredInvoices.filter((inv) => inv.status !== 'PAID' && inv.status !== 'CANCELLED')
+	);
+	let pendingInvoiceCount = $derived(pendingInvoices.length);
+
+	// Build stats array
+	let stats = $derived([
+		{
+			label: 'Active Accounts',
+			value: accountCount.toString(),
+			colorClass: 'text-primary-600 dark:text-primary-400'
+		},
+		{
+			label: 'Upcoming',
+			value: upcomingCount.toString(),
+			colorClass: 'text-secondary-600 dark:text-secondary-400'
+		},
+		{
+			label: 'Completed',
+			value: completedCount.toString(),
+			colorClass: 'text-accent-600 dark:text-accent-400'
+		},
+		{
+			label: 'Pending Invoices',
+			value: pendingInvoiceCount.toString(),
+			colorClass: 'text-accent6-600 dark:text-accent6-400'
+		}
+	]);
+
+	// Combine upcoming services and projects, sorted by date
+	type UpcomingItem =
+		| { type: 'service'; date: string; id: string; accountId: string; accountAddressId: string }
+		| {
+				type: 'project';
+				date: string;
+				id: string;
+				name: string;
+				accountAddressId?: string;
+				streetAddress?: string;
+				city?: string;
+				state?: string;
+		  };
+
+	let upcomingItems = $derived.by(() => {
+		const items: UpcomingItem[] = [];
+
+		monthFilteredUpcomingServices.forEach((s) => {
+			items.push({
+				type: 'service',
+				date: s.date,
+				id: s.id,
+				accountId: s.accountId ?? '',
+				accountAddressId: s.accountAddressId ?? ''
+			});
+		});
+
+		monthFilteredUpcomingProjects.forEach((p) => {
+			items.push({
+				type: 'project',
+				date: p.date,
+				id: p.id,
+				name: p.name,
+				accountAddressId: p.accountAddressId ?? undefined,
+				streetAddress: p.streetAddress ?? undefined,
+				city: p.city ?? undefined,
+				state: p.state ?? undefined
+			});
+		});
+
+		// Sort by date ascending
+		items.sort((a, b) => a.date.localeCompare(b.date));
+
+		// Take first 3
+		return items.slice(0, 3);
+	});
+
+	function getAccountName(accountId: string, addressId: string): string {
+		// accountId and addressId from services are already UUIDs, not Relay IDs
+		const addrInfo = customerAccountLookup[addressId];
+		if (addrInfo) {
+			return addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name;
+		}
+		const acctInfo = customerAccountLookup[accountId];
+		return acctInfo?.name ?? 'Unknown Account';
+	}
+
+	function getProjectLocation(item: Extract<UpcomingItem, { type: 'project' }>): string {
+		// If project has accountAddressId, get address from lookup
+		if (item.accountAddressId) {
+			const addrInfo = customerAccountLookup[item.accountAddressId];
+			if (addrInfo) {
+				return `${addrInfo.streetAddress}, ${addrInfo.city}`;
+			}
+		}
+		// Otherwise use project's own address fields
+		return `${item.streetAddress ?? ''}, ${item.city ?? ''}`;
+	}
+
+	function getItemHref(item: UpcomingItem): string {
+		if (item.type === 'service') {
+			return `/customer/schedule/service/${item.id}`;
+		}
+		return `/customer/schedule/project/${item.id}`;
+	}
+</script>
+
+<svelte:head>
+	<title>Dashboard - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Welcome Header with Nav Menu -->
+		<CustomerPageHeader
+			title="Welcome back, {firstName}!"
+			subtitle="Here's what's happening with your accounts."
+			colorScheme="primary"
+			showBackButton={false}
+			showNavMenu={true}
+		/>
+
+		<!-- Month Selector -->
+		<div class="mb-6">
+			<MonthSelector value={currentMonth} />
+		</div>
+
+		<!-- Stats Overview -->
+		<div class="mb-8 grid grid-cols-2 gap-4 lg:grid-cols-4">
+			{#each stats as stat (stat.label)}
+				<div class="rounded-xl border border-theme bg-theme-card p-4">
+					<div class="text-2xl font-bold {stat.colorClass}">
+						{stat.value}
+					</div>
+					<div class="text-sm text-theme-muted">{stat.label}</div>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Content Grid -->
+		<div class="mb-8 grid gap-6 md:grid-cols-2">
+			<!-- Upcoming Schedule -->
+			<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+				<div class="flex items-center justify-between section-header-secondary px-4 py-3">
+					<h2 class="font-semibold text-secondary-700 dark:text-secondary-400">
+						Upcoming Schedule
+					</h2>
+					<a
+						href="/customer/schedule"
+						class="text-sm text-secondary-600 hover:underline dark:text-secondary-400">View all</a
+					>
+				</div>
+				<div class="divide-theme divide-y">
+					{#each upcomingItems as item (item.id)}
+						<a
+							href={getItemHref(item)}
+							class="block px-4 py-3 hover:bg-black/5 dark:hover:bg-white/5"
+						>
+							<div class="flex items-center justify-between">
+								<div class="min-w-0 flex-1">
+									{#if item.type === 'service'}
+										<p class="text-sm font-medium text-theme">Service</p>
+										<p class="truncate text-xs text-theme-muted">
+											{getAccountName(item.accountId, item.accountAddressId)}
+										</p>
+									{:else}
+										<p class="text-sm font-medium text-theme">{item.name}</p>
+										<p class="truncate text-xs text-theme-muted">
+											{getProjectLocation(item)}
+										</p>
+									{/if}
+								</div>
+								<span
+									class="ml-2 shrink-0 rounded px-2 py-1 text-xs {item.type === 'service'
+										? 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'
+										: 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400'}"
+								>
+									{formatDate(item.date)}
+								</span>
+							</div>
+						</a>
+					{/each}
+					{#if upcomingItems.length === 0}
+						<div class="px-4 py-8 text-center text-sm text-theme-muted">
+							No upcoming services or projects scheduled
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Pending Invoices -->
+			<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+				<div class="flex items-center justify-between section-header-accent6 px-4 py-3">
+					<h2 class="font-semibold text-accent6-700 dark:text-accent6-400">Pending Invoices</h2>
+					<a
+						href="/customer/invoices"
+						class="text-sm text-accent6-600 hover:underline dark:text-accent6-400">View all</a
+					>
+				</div>
+				<div class="divide-theme divide-y">
+					{#each pendingInvoices.slice(0, 3) as invoice (invoice.id)}
+						<a
+							href="/customer/invoices/{invoice.id}"
+							class="block px-4 py-3 hover:bg-black/5 dark:hover:bg-white/5"
+						>
+							<div class="flex items-center justify-between">
+								<div class="min-w-0 flex-1">
+									<p class="text-sm font-medium text-theme">Invoice - {formatDate(invoice.date)}</p>
+									<p class="truncate text-xs text-theme-muted">
+										{invoice.status === 'OVERDUE' ? 'Payment overdue' : 'Payment pending'}
+									</p>
+								</div>
+								<span
+									class="ml-2 shrink-0 rounded px-2 py-1 text-xs {invoice.status === 'OVERDUE'
+										? 'bg-error-100 text-error-700 dark:bg-error-900/30 dark:text-error-400'
+										: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'}"
+								>
+									{invoice.status === 'OVERDUE' ? 'Overdue' : 'Pending'}
+								</span>
+							</div>
+						</a>
+					{/each}
+					{#if pendingInvoices.length === 0}
+						<div class="px-4 py-8 text-center text-sm text-theme-muted">No pending invoices</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<!-- Quick Links -->
+		<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+			<div class="section-header-primary px-4 py-3">
+				<h2 class="font-semibold text-primary-700 dark:text-primary-400">Quick Links</h2>
+			</div>
+			<div class="grid grid-cols-2 gap-2 p-4 md:grid-cols-4">
+				<a
+					href="/customer/accounts"
+					class="flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<svg
+						class="h-5 w-5 text-primary-500"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+						/>
+					</svg>
+					<div>
+						<p class="text-sm font-medium text-theme">Accounts</p>
+						<p class="hidden text-xs text-theme-muted sm:block">Service locations</p>
+					</div>
+				</a>
+				<a
+					href="/customer/schedule"
+					class="flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<svg
+						class="h-5 w-5 text-secondary-500"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+					<div>
+						<p class="text-sm font-medium text-theme">Schedule</p>
+						<p class="hidden text-xs text-theme-muted sm:block">Upcoming work</p>
+					</div>
+				</a>
+				<a
+					href="/customer/history"
+					class="flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<svg
+						class="h-5 w-5 text-accent-500"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<div>
+						<p class="text-sm font-medium text-theme">History</p>
+						<p class="hidden text-xs text-theme-muted sm:block">Completed work</p>
+					</div>
+				</a>
+				<a
+					href="/customer/invoices"
+					class="flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+				>
+					<svg
+						class="h-5 w-5 text-accent6-500"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+					<div>
+						<p class="text-sm font-medium text-theme">Invoices</p>
+						<p class="hidden text-xs text-theme-muted sm:block">Billing history</p>
+					</div>
+				</a>
+			</div>
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/accounts/+page.svelte b/src/routes/customer/accounts/+page.svelte
new file mode 100644
index 0000000..d81f5ac
--- /dev/null
+++ b/src/routes/customer/accounts/+page.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import type { PageData } from './$types';
+	import type { CustomerAccounts$result } from '$houdini';
+
+	type Account = CustomerAccounts$result['accounts'][number];
+
+	type LayoutData = PageData & {
+		accounts?: Account[];
+		customerNames?: Record<string, string>;
+		customerIds?: string[];
+	};
+
+	let { data }: { data: LayoutData } = $props();
+
+	let accounts = $derived(data.accounts ?? []);
+	let customerNames = $derived(data.customerNames ?? ({} as Record<string, string>));
+	let hasMultipleCustomers = $derived((data.customerIds?.length ?? 0) > 1);
+
+	let searchQuery = $state('');
+
+	let filteredAccounts = $derived(
+		accounts.filter((account) => {
+			if (!searchQuery) return true;
+			const query = searchQuery.toLowerCase();
+			return (
+				account.name.toLowerCase().includes(query) ||
+				account.primaryAddress?.streetAddress?.toLowerCase().includes(query) ||
+				account.primaryAddress?.city?.toLowerCase().includes(query)
+			);
+		})
+	);
+
+	function getCustomerName(customerId: string): string {
+		// customerId from account is already a UUID, not a Relay ID
+		return customerNames[customerId] ?? 'Unknown';
+	}
+</script>
+
+<svelte:head>
+	<title>Accounts - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="My Accounts"
+			subtitle="View your service locations and account details."
+			colorScheme="primary"
+		/>
+
+		<!-- Search -->
+		<div class="mb-6">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search accounts..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2.5 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
+				/>
+			</div>
+		</div>
+
+		<!-- Accounts List -->
+		{#if filteredAccounts.length > 0}
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				{#each filteredAccounts as account (account.id)}
+					<a
+						href="/customer/accounts/{account.id}"
+						class="flex min-w-0 flex-col gap-2 card-account"
+					>
+						<div class="flex min-w-0 items-start justify-between gap-2">
+							<div class="min-w-0 flex-1">
+								<h3 class="truncate text-lg font-semibold text-theme">{account.name}</h3>
+								{#if account.primaryAddress}
+									<p class="truncate text-sm text-theme-secondary">
+										{account.primaryAddress.streetAddress}
+									</p>
+									<p class="text-sm text-theme-muted">
+										{account.primaryAddress.city}, {account.primaryAddress.state}
+										{account.primaryAddress.zipCode}
+									</p>
+								{/if}
+							</div>
+							<svg
+								class="h-5 w-5 shrink-0 text-theme-muted"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 5l7 7-7 7"
+								/>
+							</svg>
+						</div>
+
+						{#if hasMultipleCustomers && account.customerId}
+							<div class="mt-1">
+								<span
+									class="inline-flex items-center rounded-full bg-accent3-100 px-2 py-0.5 text-xs font-medium text-accent3-700 dark:bg-accent3-900/30 dark:text-accent3-400"
+								>
+									{getCustomerName(account.customerId)}
+								</span>
+							</div>
+						{/if}
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-12 w-12 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h3 class="mb-2 text-lg font-semibold text-theme">No Results</h3>
+				<p class="text-theme-muted">No accounts match your search.</p>
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-16 w-16 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+					/>
+				</svg>
+				<h2 class="mb-2 text-lg font-semibold text-theme">No Accounts</h2>
+				<p class="mx-auto max-w-md text-theme-muted">You don't have any service accounts yet.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/accounts/[account]/+page.server.ts b/src/routes/customer/accounts/[account]/+page.server.ts
new file mode 100644
index 0000000..0779c79
--- /dev/null
+++ b/src/routes/customer/accounts/[account]/+page.server.ts
@@ -0,0 +1,23 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { GetAccountStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+
+	const accountResult = await new GetAccountStore().fetch({
+		event,
+		metadata: { cookie: locals.cookie },
+		variables: { id: params.account }
+	});
+
+	if (!accountResult.data?.account) {
+		throw error(404, 'Account not found');
+	}
+
+	return {
+		...parentData,
+		account: accountResult
+	};
+};
diff --git a/src/routes/customer/accounts/[account]/+page.svelte b/src/routes/customer/accounts/[account]/+page.svelte
new file mode 100644
index 0000000..5285a2a
--- /dev/null
+++ b/src/routes/customer/accounts/[account]/+page.svelte
@@ -0,0 +1,378 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import ContactForm from '$lib/components/shared/ContactForm.svelte';
+	import DeleteConfirmModal from '$lib/components/admin/DeleteConfirmModal.svelte';
+	import { formatDate } from '$lib/utils/date';
+	import { offCanvas } from '$lib/stores/offCanvas.svelte';
+	import { invalidateAll } from '$app/navigation';
+	import { DeleteAccountContactStore } from '$houdini';
+	import { getFrequencyLabel } from '$lib/stores/scopeEditor.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let account = $derived(data.account?.data?.account);
+	let addresses = $derived(account?.addresses ?? []);
+	let contacts = $derived(account?.contacts?.filter((c) => c.isActive) ?? []);
+
+	// Contact editing state
+	let editingContact = $state<(typeof contacts)[number] | null>(null);
+	let deleteContactId = $state<string | null>(null);
+
+	const deleteContactStore = new DeleteAccountContactStore();
+
+	// Track which scope areas are expanded
+	let expandedAreas = new SvelteSet<string>();
+
+	function toggleArea(areaId: string) {
+		if (expandedAreas.has(areaId)) {
+			expandedAreas.delete(areaId);
+		} else {
+			expandedAreas.add(areaId);
+		}
+	}
+
+	// Get active scope for an address
+	function getActiveScope(address: (typeof addresses)[number]) {
+		return address.scopes?.find((s) => s.isActive);
+	}
+
+	async function handleRefresh() {
+		await invalidateAll();
+	}
+
+	function showAddContactForm() {
+		if (!account) return;
+		editingContact = null;
+		offCanvas.showRight({
+			title: 'Add Contact',
+			content: contactFormContent
+		});
+	}
+
+	function showEditContactForm(contact: (typeof contacts)[number]) {
+		if (!account) return;
+		editingContact = contact;
+		offCanvas.showRight({
+			title: 'Edit Contact',
+			content: contactFormContent
+		});
+	}
+
+	async function handleDeleteContact() {
+		if (!deleteContactId) return;
+		const res = await deleteContactStore.mutate({ id: deleteContactId });
+		if (res.errors?.length) {
+			throw new Error(res.errors.map((e) => e.message).join(', '));
+		}
+		deleteContactId = null;
+		await invalidateAll();
+	}
+
+	// Get upcoming services for this account
+	let upcomingServices = $derived(
+		addresses
+			.flatMap((addr) => addr.services ?? [])
+			.filter((s) => s.status === 'SCHEDULED' || s.status === 'IN_PROGRESS')
+			.sort((a, b) => a.date.localeCompare(b.date))
+			.slice(0, 5)
+	);
+
+	function getScheduleDays(schedule: {
+		mondayService: boolean;
+		tuesdayService: boolean;
+		wednesdayService: boolean;
+		thursdayService: boolean;
+		fridayService: boolean;
+		saturdayService: boolean;
+		sundayService: boolean;
+		weekendService: boolean;
+	}): string {
+		const days: string[] = [];
+		if (schedule.mondayService) days.push('Mon');
+		if (schedule.tuesdayService) days.push('Tue');
+		if (schedule.wednesdayService) days.push('Wed');
+		if (schedule.thursdayService) days.push('Thu');
+		if (schedule.fridayService) days.push('Fri');
+		if (schedule.saturdayService) days.push('Sat');
+		if (schedule.sundayService) days.push('Sun');
+		if (schedule.weekendService && !schedule.saturdayService && !schedule.sundayService) {
+			days.push('Weekends');
+		}
+		return days.length > 0 ? days.join(', ') : 'No scheduled days';
+	}
+</script>
+
+{#snippet contactFormContent()}
+	{#if account}
+		<ContactForm
+			entityType="account"
+			entityId={account.id}
+			contact={editingContact ?? undefined}
+			showActiveToggle={false}
+			onSuccess={handleRefresh}
+		/>
+	{/if}
+{/snippet}
+
+<svelte:head>
+	<title>{account?.name ?? 'Account'} - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title={account?.name ?? 'Account'}
+			subtitle={account?.primaryAddress
+				? `${account.primaryAddress.streetAddress}, ${account.primaryAddress.city}`
+				: undefined}
+			colorScheme="primary"
+			backHref="/customer/accounts"
+		/>
+
+		{#if account}
+			<div class="space-y-6">
+				<!-- Addresses Section -->
+				<div class="rounded-xl border border-theme bg-theme-card">
+					<div class="border-b border-theme px-4 py-3">
+						<h2 class="font-semibold text-theme">Service Locations</h2>
+					</div>
+					<div class="divide-theme divide-y">
+						{#each addresses as address (address.id)}
+							<div class="p-4">
+								<div class="mb-2 flex items-start justify-between">
+									<div>
+										<h3 class="font-medium text-theme">
+											{address.name || address.streetAddress}
+											{#if address.isPrimary}
+												<span
+													class="ml-2 inline-flex items-center rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
+													>Primary</span
+												>
+											{/if}
+										</h3>
+										<p class="text-sm text-theme-secondary">
+											{address.streetAddress}
+										</p>
+										<p class="text-sm text-theme-muted">
+											{address.city}, {address.state}
+											{address.zipCode}
+										</p>
+									</div>
+								</div>
+
+								<!-- Schedules for this address -->
+								{#if address.schedules && address.schedules.length > 0}
+									<div class="mt-3">
+										<p class="mb-1 text-xs font-medium text-theme-muted uppercase">
+											Service Schedule
+										</p>
+										{#each address.schedules as schedule (schedule.id)}
+											<div
+												class="mt-1 rounded-lg bg-black/5 p-2 text-sm text-theme-secondary dark:bg-white/5"
+											>
+												<span class="font-medium">{schedule.name || 'Regular Schedule'}:</span>
+												{getScheduleDays(schedule)}
+											</div>
+										{/each}
+									</div>
+								{/if}
+
+								<!-- Active Scope for this address -->
+								{#if getActiveScope(address)}
+									{@const activeScope = getActiveScope(address)}
+									<div class="mt-4 border-t border-theme pt-4">
+										<p class="mb-2 text-xs font-medium text-theme-muted uppercase">Service Scope</p>
+										{#if activeScope?.description}
+											<p class="mb-3 text-sm text-theme-secondary">{activeScope.description}</p>
+										{/if}
+
+										{#if activeScope?.areas && activeScope.areas.length > 0}
+											<div class="space-y-2">
+												{#each [...activeScope.areas].sort((a, b) => a.order - b.order) as area (area.id)}
+													<div
+														class="rounded-lg border border-theme bg-black/[0.02] dark:bg-white/[0.02]"
+													>
+														<button
+															type="button"
+															onclick={() => toggleArea(area.id)}
+															class="flex w-full items-center justify-between px-3 py-2 text-left"
+														>
+															<span class="text-sm font-medium text-theme">{area.name}</span>
+															<svg
+																class="h-4 w-4 text-theme-muted transition-transform {expandedAreas.has(
+																	area.id
+																)
+																	? 'rotate-180'
+																	: ''}"
+																style="fill: none"
+																stroke="currentColor"
+																viewBox="0 0 24 24"
+															>
+																<path
+																	stroke-linecap="round"
+																	stroke-linejoin="round"
+																	stroke-width="2"
+																	d="M19 9l-7 7-7-7"
+																/>
+															</svg>
+														</button>
+
+														{#if expandedAreas.has(area.id)}
+															<div class="border-t border-theme px-3 py-2">
+																{#if area.tasks && area.tasks.length > 0}
+																	<ul class="space-y-1.5">
+																		{#each [...area.tasks].sort((a, b) => a.order - b.order) as task (task.id)}
+																			<li class="flex items-start justify-between gap-2 text-sm">
+																				<span class="text-theme-secondary">{task.description}</span>
+																				<span
+																					class="shrink-0 rounded bg-black/5 px-1.5 py-0.5 text-xs text-theme-muted dark:bg-white/10"
+																				>
+																					{getFrequencyLabel(task.frequency)}
+																				</span>
+																			</li>
+																		{/each}
+																	</ul>
+																{:else}
+																	<p class="text-sm text-theme-muted">No tasks in this area.</p>
+																{/if}
+															</div>
+														{/if}
+													</div>
+												{/each}
+											</div>
+										{:else}
+											<p class="text-sm text-theme-muted">No areas defined in this scope.</p>
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/each}
+						{#if addresses.length === 0}
+							<div class="px-4 py-8 text-center text-sm text-theme-muted">
+								No addresses on file.
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Contacts Section -->
+				<div class="rounded-xl border border-theme bg-theme-card">
+					<div class="flex items-center justify-between border-b border-theme px-4 py-3">
+						<h2 class="font-semibold text-theme">Contacts</h2>
+						<button
+							type="button"
+							onclick={showAddContactForm}
+							class="rounded-lg bg-primary-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-600"
+						>
+							Add Contact
+						</button>
+					</div>
+					{#if contacts.length > 0}
+						<div class="divide-theme divide-y">
+							{#each contacts as contact (contact.id)}
+								<div class="p-4">
+									<div class="flex items-start justify-between gap-2">
+										<div class="min-w-0 flex-1">
+											<div class="flex flex-wrap items-center gap-2">
+												<span class="font-medium text-theme">{contact.fullName}</span>
+												{#if contact.isPrimary}
+													<span
+														class="inline-flex items-center rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
+														>Primary</span
+													>
+												{/if}
+											</div>
+											{#if contact.email || contact.phone}
+												<div class="mt-1 flex flex-col gap-0.5 sm:flex-row sm:flex-wrap sm:gap-x-4">
+													{#if contact.email}
+														<p class="text-sm text-theme-secondary">{contact.email}</p>
+													{/if}
+													{#if contact.phone}
+														<p class="text-sm text-theme-muted">{contact.phone}</p>
+													{/if}
+												</div>
+											{/if}
+										</div>
+										<div class="flex shrink-0 items-center gap-3">
+											<button
+												type="button"
+												onclick={() => showEditContactForm(contact)}
+												class="text-sm text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300"
+											>
+												Edit
+											</button>
+											<button
+												type="button"
+												onclick={() => (deleteContactId = contact.id)}
+												class="text-sm text-error-600 hover:text-error-700 hover:underline dark:text-error-400 dark:hover:text-error-300"
+											>
+												Delete
+											</button>
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="px-4 py-8 text-center text-sm text-theme-muted">
+							No contacts on file. Add a contact to get started.
+						</div>
+					{/if}
+				</div>
+
+				<!-- Upcoming Services Section -->
+				{#if upcomingServices.length > 0}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="flex items-center justify-between border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Upcoming Services</h2>
+							<a
+								href="/customer/schedule"
+								class="text-sm text-accent-600 hover:underline dark:text-accent-400"
+							>
+								View all
+							</a>
+						</div>
+						<div class="divide-theme divide-y">
+							{#each upcomingServices as service (service.id)}
+								<a
+									href="/customer/schedule/service/{service.id}"
+									class="flex items-center justify-between p-4 hover:bg-black/5 dark:hover:bg-white/5"
+								>
+									<div>
+										<p class="text-sm font-medium text-theme">{formatDate(service.date)}</p>
+										<p class="text-xs text-theme-muted">
+											{service.status === 'SCHEDULED' ? 'Scheduled' : 'In Progress'}
+										</p>
+									</div>
+									<span
+										class="rounded px-2 py-1 text-xs {service.status === 'SCHEDULED'
+											? 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'
+											: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'}"
+									>
+										{service.status === 'SCHEDULED' ? 'Scheduled' : 'In Progress'}
+									</span>
+								</a>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Account not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Delete Contact Modal -->
+<DeleteConfirmModal
+	open={!!deleteContactId}
+	title="Delete Contact"
+	message="Are you sure you want to delete this contact?"
+	onconfirm={handleDeleteContact}
+	oncancel={() => (deleteContactId = null)}
+/>
diff --git a/src/routes/customer/history/+page.svelte b/src/routes/customer/history/+page.svelte
new file mode 100644
index 0000000..f994bd9
--- /dev/null
+++ b/src/routes/customer/history/+page.svelte
@@ -0,0 +1,363 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import { formatDate, getCurrentMonth } from '$lib/utils/date';
+	import { navigating } from '$app/state';
+	import type { PageData } from './$types';
+	import type { CustomerAccountInfo } from '../+layout.server';
+	import type { CustomerServices$result, CustomerProjects$result } from '$houdini';
+
+	type Service = CustomerServices$result['services'][number];
+	type Project = CustomerProjects$result['projects'][number];
+
+	type LayoutData = PageData & {
+		currentMonth?: string;
+		services?: {
+			completed?: Service[];
+		};
+		projects?: {
+			completed?: Project[];
+		};
+		customerAccountLookup?: Record<string, CustomerAccountInfo>;
+	};
+
+	let { data }: { data: LayoutData } = $props();
+
+	let currentMonth = $derived(data.currentMonth ?? getCurrentMonth());
+	let completedServices = $derived(data.services?.completed ?? []);
+	let completedProjects = $derived(data.projects?.completed ?? []);
+	let customerAccountLookup = $derived(
+		data.customerAccountLookup ?? ({} as Record<string, CustomerAccountInfo>)
+	);
+
+	type FilterType = 'all' | 'services' | 'projects';
+	let activeFilter = $state<FilterType>('all');
+	let searchQuery = $state('');
+
+	// Combine and sort items
+	type HistoryItem =
+		| {
+				type: 'service';
+				id: string;
+				date: string;
+				status: string;
+				accountId: string;
+				accountAddressId: string;
+		  }
+		| {
+				type: 'project';
+				id: string;
+				date: string;
+				status: string;
+				name: string;
+				accountAddressId?: string;
+				streetAddress?: string;
+				city?: string;
+				state?: string;
+		  };
+
+	let allItems = $derived.by(() => {
+		const items: HistoryItem[] = [];
+
+		completedServices.forEach((s) => {
+			items.push({
+				type: 'service',
+				id: s.id,
+				date: s.date,
+				status: s.status,
+				accountId: s.accountId ?? '',
+				accountAddressId: s.accountAddressId ?? ''
+			});
+		});
+
+		completedProjects.forEach((p) => {
+			items.push({
+				type: 'project',
+				id: p.id,
+				date: p.date,
+				status: p.status,
+				name: p.name,
+				accountAddressId: p.accountAddressId ?? undefined,
+				streetAddress: p.streetAddress ?? undefined,
+				city: p.city ?? undefined,
+				state: p.state ?? undefined
+			});
+		});
+
+		return items;
+	});
+
+	function getAccountName(accountId: string, addressId: string): string {
+		// accountId and addressId from services are already UUIDs, not Relay IDs
+		const addrInfo = customerAccountLookup[addressId];
+		if (addrInfo) {
+			return addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name;
+		}
+		const acctInfo = customerAccountLookup[accountId];
+		return acctInfo?.name ?? 'Unknown Account';
+	}
+
+	function getProjectLocation(item: Extract<HistoryItem, { type: 'project' }>): string {
+		// If project has accountAddressId, get address from lookup
+		if (item.accountAddressId) {
+			const addrInfo = customerAccountLookup[item.accountAddressId];
+			if (addrInfo) {
+				return `${addrInfo.streetAddress}, ${addrInfo.city}`;
+			}
+		}
+		// Otherwise use project's own address fields
+		return `${item.streetAddress ?? ''}, ${item.city ?? ''}`;
+	}
+
+	// Helper to get sortable name for an item
+	function getSortName(item: HistoryItem): string {
+		if (item.type === 'service') {
+			return getAccountName(item.accountId, item.accountAddressId);
+		}
+		return item.name;
+	}
+
+	// Sort by date descending, then alphabetically by name
+	let sortedItems = $derived(
+		[...allItems].sort((a, b) => {
+			const dateCompare = b.date.localeCompare(a.date); // descending
+			if (dateCompare !== 0) return dateCompare;
+			return getSortName(a).localeCompare(getSortName(b));
+		})
+	);
+
+	// Filter by selected month (client-side)
+	let monthFilteredItems = $derived(
+		sortedItems.filter((item) => item.date.startsWith(currentMonth))
+	);
+
+	let filteredItems = $derived(
+		monthFilteredItems.filter((item) => {
+			// Filter by type
+			if (activeFilter === 'services' && item.type !== 'service') return false;
+			if (activeFilter === 'projects' && item.type !== 'project') return false;
+
+			// Filter by search
+			if (searchQuery) {
+				const query = searchQuery.toLowerCase();
+				if (item.type === 'service') {
+					const accountName = getAccountName(item.accountId, item.accountAddressId).toLowerCase();
+					return accountName.includes(query);
+				} else {
+					return (
+						item.name.toLowerCase().includes(query) ||
+						item.streetAddress?.toLowerCase().includes(query) ||
+						item.city?.toLowerCase().includes(query)
+					);
+				}
+			}
+
+			return true;
+		})
+	);
+
+	function getItemHref(item: HistoryItem): string {
+		if (item.type === 'service') {
+			return `/customer/history/service/${item.id}`;
+		}
+		return `/customer/history/project/${item.id}`;
+	}
+
+	const filterTabs: { key: FilterType; label: string }[] = [
+		{ key: 'all', label: 'All' },
+		{ key: 'services', label: 'Services' },
+		{ key: 'projects', label: 'Projects' }
+	];
+
+	// Check if navigating to a specific item
+	function isNavigatingTo(item: HistoryItem): boolean {
+		if (!navigating.to) return false;
+		const href = getItemHref(item);
+		return navigating.to.url.pathname === href;
+	}
+</script>
+
+<svelte:head>
+	<title>History - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="History"
+			subtitle="View completed services and projects."
+			colorScheme="accent"
+		/>
+
+		<!-- Search -->
+		<div class="mb-4">
+			<div class="relative">
+				<svg
+					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search history..."
+					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2.5 pr-4 pl-10 text-theme focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none"
+				/>
+			</div>
+		</div>
+
+		<!-- Month Selector and Filter Tabs -->
+		<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
+			<MonthSelector value={currentMonth} />
+			<div class="flex gap-2">
+				{#each filterTabs as tab (tab.key)}
+					<button
+						type="button"
+						onclick={() => (activeFilter = tab.key)}
+						class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
+						tab.key
+							? 'bg-accent-500 text-white'
+							: 'bg-black/5 text-theme-secondary hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/15'}"
+					>
+						{tab.label}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- History List -->
+		{#if filteredItems.length > 0}
+			<div class="space-y-3">
+				{#each filteredItems as item (item.id)}
+					<a
+						href={getItemHref(item)}
+						class="block {item.type === 'service' ? 'card-service' : 'card-project'}"
+					>
+						<div class="flex items-center justify-between gap-4">
+							<div class="min-w-0 flex-1">
+								<div class="mb-1 flex items-center gap-2">
+									<span
+										class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium {item.type ===
+										'service'
+											? 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'
+											: 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400'}"
+									>
+										{item.type === 'service' ? 'Service' : 'Project'}
+									</span>
+									<span class="text-sm font-medium text-theme">
+										{formatDate(item.date)}
+									</span>
+								</div>
+								{#if item.type === 'service'}
+									<p class="truncate text-sm text-theme-secondary">
+										{getAccountName(item.accountId, item.accountAddressId)}
+									</p>
+								{:else}
+									<p class="truncate font-medium text-theme">{item.name}</p>
+									<p class="truncate text-sm text-theme-muted">
+										{getProjectLocation(item)}
+									</p>
+								{/if}
+							</div>
+							<div class="flex shrink-0 items-center gap-2">
+								<span
+									class="rounded bg-success-100 px-2 py-1 text-xs text-success-700 dark:bg-success-900/30 dark:text-success-400"
+								>
+									Completed
+								</span>
+								{#if isNavigatingTo(item)}
+									<svg
+										class="h-5 w-5 animate-spin text-theme-muted"
+										viewBox="0 0 24 24"
+										style="fill: none"
+									>
+										<circle
+											class="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											stroke-width="4"
+										></circle>
+										<path
+											class="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
+									</svg>
+								{:else}
+									<svg
+										class="h-5 w-5 text-theme-muted"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								{/if}
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{:else if searchQuery}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-12 w-12 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+				<h3 class="mb-2 text-lg font-semibold text-theme">No Results</h3>
+				<p class="text-theme-muted">No items match your search.</p>
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-16 w-16 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="mb-2 text-lg font-semibold text-theme">No History</h2>
+				<p class="mx-auto max-w-md text-theme-muted">
+					{#if activeFilter === 'services'}
+						No completed services yet.
+					{:else if activeFilter === 'projects'}
+						No completed projects yet.
+					{:else}
+						No completed services or projects yet.
+					{/if}
+				</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/history/project/[project]/+page.server.ts b/src/routes/customer/history/project/[project]/+page.server.ts
new file mode 100644
index 0000000..801106b
--- /dev/null
+++ b/src/routes/customer/history/project/[project]/+page.server.ts
@@ -0,0 +1,87 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import {
+	GetProjectStore,
+	ProjectSessionByProjectStore,
+	ProjectScopeStore,
+	TeamProfilesStore,
+	ProjectSessionPhotosStore,
+	ProjectSessionVideosStore
+} from '$houdini';
+import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const projectResult = await new GetProjectStore().fetch({
+		...fetchParams,
+		variables: { id: params.project }
+	});
+
+	if (!projectResult.data?.project) {
+		throw error(404, 'Project not found');
+	}
+
+	const project = projectResult.data.project;
+	const projectUuid = fromGlobalId(params.project);
+
+	// Fetch session data for completed projects
+	let sessionResult = null;
+	let sessionPhotos: Awaited<ReturnType<ProjectSessionPhotosStore['fetch']>>['data'] | null = null;
+	let sessionVideos: Awaited<ReturnType<ProjectSessionVideosStore['fetch']>>['data'] | null = null;
+
+	if (project.status === 'COMPLETED') {
+		sessionResult = await new ProjectSessionByProjectStore().fetch({
+			...fetchParams,
+			variables: { projectId: projectUuid }
+		});
+
+		// Fetch photos and videos separately to handle missing file errors gracefully
+		const session = sessionResult?.data?.projectSessions?.[0];
+		if (session) {
+			const sessionUuid = fromGlobalId(session.id);
+			const [photosResult, videosResult] = await Promise.all([
+				new ProjectSessionPhotosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session photos:', err);
+						return null;
+					}),
+				new ProjectSessionVideosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session videos:', err);
+						return null;
+					})
+			]);
+
+			sessionPhotos = photosResult?.data ?? null;
+			sessionVideos = videosResult?.data ?? null;
+		}
+	}
+
+	// Fetch the project scope for task name lookups
+	let scopeResult = null;
+	if (project.scopeId) {
+		const scopeGlobalId = toGlobalId('ProjectScopeType', project.scopeId);
+		scopeResult = await new ProjectScopeStore().fetch({
+			...fetchParams,
+			variables: { id: scopeGlobalId }
+		});
+	}
+
+	// Fetch team profiles for attribution
+	const teamProfilesResult = await new TeamProfilesStore().fetch(fetchParams);
+
+	return {
+		...parentData,
+		project: projectResult,
+		session: sessionResult,
+		sessionPhotos,
+		sessionVideos,
+		scope: scopeResult,
+		teamProfiles: teamProfilesResult
+	};
+};
diff --git a/src/routes/customer/history/project/[project]/+page.svelte b/src/routes/customer/history/project/[project]/+page.svelte
new file mode 100644
index 0000000..aadaa46
--- /dev/null
+++ b/src/routes/customer/history/project/[project]/+page.svelte
@@ -0,0 +1,526 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import { formatDate, formatDateTime } from '$lib/utils/date';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { goto } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type {
+		ProjectSessionByProject$result,
+		ProjectScope$result,
+		TeamProfiles$result
+	} from '$houdini';
+	import type { CustomerAccountInfo } from '../../../+layout.server';
+
+	let { data }: { data: PageData } = $props();
+
+	let project = $derived(data.project?.data?.project);
+
+	// Customer account lookup for account-affiliated projects (plain object from server)
+	let customerAccountLookup = $derived(
+		(data as { customerAccountLookup?: Record<string, CustomerAccountInfo> })
+			.customerAccountLookup ?? {}
+	);
+
+	// Get account info if project is affiliated with an account address
+	let accountInfo = $derived.by(() => {
+		if (!project?.accountAddressId) return null;
+		const addrInfo = customerAccountLookup[project.accountAddressId];
+		if (addrInfo) {
+			return {
+				name: addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name,
+				streetAddress: addrInfo.streetAddress,
+				city: addrInfo.city,
+				state: addrInfo.state
+			};
+		}
+		return null;
+	});
+
+	// Session data
+	type SessionData = ProjectSessionByProject$result['projectSessions'][number];
+	let session = $derived(
+		(data as { session?: { data?: ProjectSessionByProject$result } }).session?.data
+			?.projectSessions?.[0] ?? null
+	);
+
+	// Scope data for task lookups
+	let scope = $derived(
+		(data as { scope?: { data?: ProjectScope$result } }).scope?.data?.projectScope ?? null
+	);
+
+	// Team profiles for attribution
+	let teamProfiles = $derived(
+		(data as { teamProfiles?: { data?: TeamProfiles$result } }).teamProfiles?.data?.teamProfiles ??
+			[]
+	);
+
+	// Build task lookup map from project scope (key by both global ID and UUID)
+	let taskLookup = $derived.by(() => {
+		const map = new SvelteMap<string, { description: string; categoryName: string }>();
+		if (scope?.projectAreas) {
+			for (const area of scope.projectAreas) {
+				for (const task of area.projectTasks ?? []) {
+					const taskInfo = {
+						description: task.checklistDescription || task.description,
+						categoryName: area.name
+					};
+					// Store by global ID
+					map.set(task.id, taskInfo);
+					// Also extract and store by UUID for matching with completedTask.taskId
+					try {
+						const decoded = atob(task.id);
+						const sep = decoded.indexOf(':');
+						if (sep > 0) {
+							const uuid = decoded.slice(sep + 1);
+							map.set(uuid, taskInfo);
+						}
+					} catch {
+						/* ignore decode errors */
+					}
+				}
+			}
+		}
+		return map;
+	});
+
+	// Build team profile lookup map
+	let teamProfileLookup = $derived.by(() => {
+		const map = new SvelteMap<string, string>();
+		for (const profile of teamProfiles) {
+			map.set(profile.id, profile.fullName);
+			try {
+				const decoded = atob(profile.id);
+				const sep = decoded.indexOf(':');
+				if (sep > 0) {
+					const uuid = decoded.slice(sep + 1);
+					map.set(uuid, profile.fullName);
+				}
+			} catch {
+				/* ignore decode errors */
+			}
+		}
+		return map;
+	});
+
+	// Session media (separate from session for proper typing)
+	let sessionPhotos = $derived(data.sessionPhotos?.projectSessionImages ?? []);
+	let sessionVideos = $derived(data.sessionVideos?.projectSessionVideos ?? []);
+
+	// Filter to only public items (internal: false)
+	let publicPhotos = $derived(sessionPhotos.filter((p) => !p.internal));
+	let publicNotes = $derived(session?.notes?.filter((n) => !n.internal) ?? []);
+	let publicVideos = $derived(sessionVideos.filter((v) => !v.internal));
+
+	// Group completed tasks by category
+	let tasksByCategory = $derived.by(() => {
+		const grouped = new SvelteMap<
+			string,
+			Array<{
+				task: NonNullable<SessionData['completedTasks']>[number];
+				taskInfo: { description: string; categoryName: string } | undefined;
+			}>
+		>();
+
+		for (const completedTask of session?.completedTasks ?? []) {
+			const taskInfo = taskLookup.get(completedTask.taskId);
+			const categoryName = taskInfo?.categoryName ?? 'Other';
+
+			if (!grouped.has(categoryName)) {
+				grouped.set(categoryName, []);
+			}
+			grouped.get(categoryName)!.push({ task: completedTask, taskInfo });
+		}
+
+		return grouped;
+	});
+
+	// Track expanded categories
+	let expandedCategories = new SvelteSet<string>();
+	// Expand all by default
+	$effect(() => {
+		for (const categoryName of tasksByCategory.keys()) {
+			expandedCategories.add(categoryName);
+		}
+	});
+
+	function toggleCategory(categoryName: string) {
+		if (expandedCategories.has(categoryName)) {
+			expandedCategories.delete(categoryName);
+		} else {
+			expandedCategories.add(categoryName);
+		}
+	}
+
+	function getTeamMemberName(profileId: string): string {
+		return teamProfileLookup.get(profileId) ?? 'Team Member';
+	}
+
+	function formatDuration(seconds: number): string {
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		if (hours > 0) {
+			return `${hours}h ${minutes}m`;
+		}
+		return `${minutes}m`;
+	}
+
+	// Photo lightbox state
+	let selectedPhoto = $state<(typeof sessionPhotos)[number] | null>(null);
+
+	// Navigate to new message page with project entity pre-filled
+	function messageAboutProject() {
+		if (!project) return;
+		const dateStr = formatDate(project.date) || '';
+		const projectName = project.name || 'Project';
+		const ownerName = accountInfo?.name ?? '';
+		const parts = [dateStr, `Project: ${projectName}`, ownerName].filter(Boolean);
+		const subject = parts.join(' - ');
+
+		const params = new URLSearchParams({
+			entityType: 'Project',
+			entityId: project.id,
+			subject
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+</script>
+
+<svelte:head>
+	<title>{project?.name ?? 'Completed Project'} - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title={project?.name ?? 'Completed Project'}
+			subtitle={project ? formatDate(project.date) : undefined}
+			colorScheme="accent"
+			backHref="/customer/history"
+		/>
+
+		{#if project}
+			<div class="space-y-6">
+				<!-- Status & Date Card -->
+				<div class="rounded-xl border border-theme bg-theme-card p-4">
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="text-sm text-theme-muted">Project Date</p>
+							<p class="text-xl font-semibold text-theme">{formatDate(project.date)}</p>
+						</div>
+						<span
+							class="rounded-lg bg-success-100 px-3 py-1.5 text-sm font-medium text-success-700 dark:bg-success-900/30 dark:text-success-400"
+						>
+							Completed
+						</span>
+					</div>
+				</div>
+
+				<!-- Message Support Button -->
+				<button
+					type="button"
+					onclick={messageAboutProject}
+					class="flex w-full items-center justify-center gap-2 rounded-xl border border-theme bg-theme-card px-4 py-3 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-900/20"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+					Message Support About This Project
+				</button>
+
+				<!-- Location Card -->
+				<div class="rounded-xl border border-theme bg-theme-card">
+					<div class="border-b border-theme px-4 py-3">
+						<h2 class="font-semibold text-theme">Location</h2>
+					</div>
+					<div class="p-4">
+						{#if accountInfo}
+							<p class="mb-1 text-xs font-medium text-theme-muted uppercase">Account</p>
+							<p class="font-medium text-theme">{accountInfo.name}</p>
+							<p class="mt-2 font-medium text-theme">{accountInfo.streetAddress}</p>
+							<p class="text-sm text-theme-secondary">
+								{accountInfo.city}, {accountInfo.state}
+							</p>
+						{:else}
+							<p class="font-medium text-theme">{project.streetAddress}</p>
+							<p class="text-sm text-theme-secondary">
+								{project.city}, {project.state}
+								{project.zipCode}
+							</p>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Notes Card (if any) -->
+				{#if project.notes}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Notes</h2>
+						</div>
+						<div class="p-4">
+							<p class="text-sm whitespace-pre-wrap text-theme-secondary">{project.notes}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Session Information -->
+				{#if session}
+					<!-- Session Summary -->
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Project Summary</h2>
+						</div>
+						<div class="p-4">
+							<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+								{#if session.durationSeconds}
+									<div>
+										<p class="text-xs text-theme-muted uppercase">Duration</p>
+										<p class="text-lg font-semibold text-theme">
+											{formatDuration(session.durationSeconds)}
+										</p>
+									</div>
+								{/if}
+								<div>
+									<p class="text-xs text-theme-muted uppercase">Tasks Completed</p>
+									<p class="text-lg font-semibold text-theme">
+										{session.completedTasks?.length ?? 0}
+									</p>
+								</div>
+								{#if publicPhotos.length > 0}
+									<div>
+										<p class="text-xs text-theme-muted uppercase">Photos</p>
+										<p class="text-lg font-semibold text-theme">{publicPhotos.length}</p>
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+
+					<!-- Completed Tasks -->
+					{#if session.completedTasks && session.completedTasks.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Completed Tasks</h2>
+							</div>
+							<div class="p-4">
+								<div class="space-y-2">
+									{#each [...tasksByCategory.entries()] as [categoryName, tasks] (categoryName)}
+										<div
+											class="rounded-lg border border-theme bg-black/[0.02] dark:bg-white/[0.02]"
+										>
+											<button
+												type="button"
+												onclick={() => toggleCategory(categoryName)}
+												class="flex w-full items-center justify-between px-3 py-2 text-left"
+											>
+												<span class="text-sm font-medium text-theme">{categoryName}</span>
+												<span class="flex items-center gap-2">
+													<span
+														class="rounded bg-success-100 px-1.5 py-0.5 text-xs text-success-700 dark:bg-success-900/30 dark:text-success-400"
+													>
+														{tasks.length} completed
+													</span>
+													<svg
+														class="h-4 w-4 text-theme-muted transition-transform {expandedCategories.has(
+															categoryName
+														)
+															? 'rotate-180'
+															: ''}"
+														style="fill: none"
+														stroke="currentColor"
+														viewBox="0 0 24 24"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M19 9l-7 7-7-7"
+														/>
+													</svg>
+												</span>
+											</button>
+
+											{#if expandedCategories.has(categoryName)}
+												<div class="border-t border-theme px-3 py-2">
+													<ul class="space-y-2">
+														{#each tasks as { task, taskInfo } (task.id)}
+															<li class="flex items-start gap-2 text-sm">
+																<svg
+																	class="mt-0.5 h-4 w-4 shrink-0 text-success-500"
+																	style="fill: none"
+																	stroke="currentColor"
+																	viewBox="0 0 24 24"
+																>
+																	<path
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		stroke-width="2"
+																		d="M5 13l4 4L19 7"
+																	/>
+																</svg>
+																<div class="min-w-0 flex-1">
+																	<span class="text-theme-secondary"
+																		>{taskInfo?.description ?? 'Task'}</span
+																	>
+																	<p class="text-xs text-theme-muted">
+																		{getTeamMemberName(task.completedById)} &middot; {formatDateTime(
+																			task.completedAt
+																		)}
+																	</p>
+																	{#if task.notes}
+																		<p class="mt-1 text-xs text-theme-muted italic">
+																			"{task.notes}"
+																		</p>
+																	{/if}
+																</div>
+															</li>
+														{/each}
+													</ul>
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Photos -->
+					{#if publicPhotos.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Photos</h2>
+							</div>
+							<div class="p-4">
+								<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+									{#each publicPhotos as photo (photo.id)}
+										<button
+											type="button"
+											onclick={() => (selectedPhoto = photo)}
+											class="group relative aspect-square overflow-hidden rounded-lg border border-theme bg-black/5 dark:bg-white/5"
+										>
+											{#if photo.thumbnail?.url}
+												<img
+													src={photo.thumbnail.url}
+													alt={photo.title || 'Project photo'}
+													class="h-full w-full object-cover transition-transform group-hover:scale-105"
+												/>
+											{:else if photo.image?.url}
+												<img
+													src={photo.image.url}
+													alt={photo.title || 'Project photo'}
+													class="h-full w-full object-cover transition-transform group-hover:scale-105"
+												/>
+											{/if}
+											<span
+												class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"
+											></span>
+										</button>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Project Notes from Session -->
+					{#if publicNotes.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Project Notes</h2>
+							</div>
+							<div class="divide-theme divide-y">
+								{#each publicNotes as note (note.id)}
+									<div class="p-4">
+										<p class="text-sm whitespace-pre-wrap text-theme-secondary">{note.content}</p>
+										<p class="mt-2 text-xs text-theme-muted">
+											{getTeamMemberName(note.authorId)} &middot; {formatDateTime(note.createdAt)}
+										</p>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Videos -->
+					{#if publicVideos.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Videos</h2>
+							</div>
+							<div class="p-4">
+								<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+									{#each publicVideos as video (video.id)}
+										<div class="overflow-hidden rounded-lg border border-theme">
+											{#if video.video?.url}
+												<video controls class="w-full" poster={video.thumbnail?.url}>
+													<source src={video.video.url} type={video.contentType || 'video/mp4'} />
+													<track kind="captions" src="" default />
+													Your browser does not support the video tag.
+												</video>
+											{/if}
+											{#if video.title || video.notes}
+												<div class="border-t border-theme bg-black/[0.02] p-3 dark:bg-white/[0.02]">
+													{#if video.title}
+														<p class="text-sm font-medium text-theme">{video.title}</p>
+													{/if}
+													{#if video.notes}
+														<p class="text-xs text-theme-muted">{video.notes}</p>
+													{/if}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Project not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Photo Lightbox -->
+{#if selectedPhoto}
+	<button
+		type="button"
+		onclick={() => (selectedPhoto = null)}
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+	>
+		<span class="sr-only">Close photo</span>
+		<img
+			src={selectedPhoto.image?.url ?? selectedPhoto.thumbnail?.url}
+			alt={selectedPhoto.title || 'Project photo'}
+			class="max-h-full max-w-full object-contain"
+		/>
+		{#if selectedPhoto.title || selectedPhoto.notes}
+			<span class="absolute right-4 bottom-4 left-4 rounded-lg bg-black/60 p-3 text-white">
+				{#if selectedPhoto.title}
+					<span class="block font-medium">{selectedPhoto.title}</span>
+				{/if}
+				{#if selectedPhoto.notes}
+					<span class="block text-sm opacity-80">{selectedPhoto.notes}</span>
+				{/if}
+			</span>
+		{/if}
+		<span class="absolute top-4 right-4 rounded-full bg-white/20 p-2 text-white hover:bg-white/30">
+			<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</span>
+	</button>
+{/if}
diff --git a/src/routes/customer/history/service/[service]/+page.server.ts b/src/routes/customer/history/service/[service]/+page.server.ts
new file mode 100644
index 0000000..ee50c65
--- /dev/null
+++ b/src/routes/customer/history/service/[service]/+page.server.ts
@@ -0,0 +1,86 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import {
+	GetServiceStore,
+	ServiceSessionByServiceStore,
+	ScopeByAddressStore,
+	TeamProfilesStore,
+	ServiceSessionPhotosStore,
+	ServiceSessionVideosStore
+} from '$houdini';
+import { fromGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const serviceResult = await new GetServiceStore().fetch({
+		...fetchParams,
+		variables: { id: params.service }
+	});
+
+	if (!serviceResult.data?.service) {
+		throw error(404, 'Service not found');
+	}
+
+	const service = serviceResult.data.service;
+	const serviceUuid = fromGlobalId(params.service);
+
+	// Fetch session data for completed services
+	let sessionResult = null;
+	let sessionPhotos: Awaited<ReturnType<ServiceSessionPhotosStore['fetch']>>['data'] | null = null;
+	let sessionVideos: Awaited<ReturnType<ServiceSessionVideosStore['fetch']>>['data'] | null = null;
+
+	if (service.status === 'COMPLETED') {
+		sessionResult = await new ServiceSessionByServiceStore().fetch({
+			...fetchParams,
+			variables: { serviceId: serviceUuid }
+		});
+
+		// Fetch photos and videos separately to handle missing file errors gracefully
+		const session = sessionResult?.data?.serviceSessions?.[0];
+		if (session) {
+			const sessionUuid = fromGlobalId(session.id);
+			const [photosResult, videosResult] = await Promise.all([
+				new ServiceSessionPhotosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session photos:', err);
+						return null;
+					}),
+				new ServiceSessionVideosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session videos:', err);
+						return null;
+					})
+			]);
+
+			sessionPhotos = photosResult?.data ?? null;
+			sessionVideos = videosResult?.data ?? null;
+		}
+	}
+
+	// Fetch the active scope for task name lookups
+	let scopeResult = null;
+	if (service.accountAddressId) {
+		scopeResult = await new ScopeByAddressStore().fetch({
+			...fetchParams,
+			variables: { accountAddressId: service.accountAddressId }
+		});
+	}
+
+	// Fetch team profiles for attribution
+	const teamProfilesResult = await new TeamProfilesStore().fetch(fetchParams);
+
+	return {
+		...parentData,
+		service: serviceResult,
+		session: sessionResult,
+		sessionPhotos,
+		sessionVideos,
+		scope: scopeResult,
+		teamProfiles: teamProfilesResult
+	};
+};
diff --git a/src/routes/customer/history/service/[service]/+page.svelte b/src/routes/customer/history/service/[service]/+page.svelte
new file mode 100644
index 0000000..02d34d5
--- /dev/null
+++ b/src/routes/customer/history/service/[service]/+page.svelte
@@ -0,0 +1,532 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import { formatDate, formatDateTime } from '$lib/utils/date';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { goto } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type {
+		ServiceSessionByService$result,
+		ScopeByAddress$result,
+		TeamProfiles$result
+	} from '$houdini';
+
+	let { data }: { data: PageData } = $props();
+
+	let service = $derived(data.service?.data?.service);
+	let customerAccountLookup = $derived(
+		(
+			data as {
+				customerAccountLookup?: Record<
+					string,
+					{
+						name: string;
+						addressName?: string;
+						streetAddress?: string;
+						city?: string;
+						state?: string;
+					}
+				>;
+			}
+		).customerAccountLookup ?? {}
+	);
+
+	// Session data
+	type SessionData = ServiceSessionByService$result['serviceSessions'][number];
+	let session = $derived(
+		(data as { session?: { data?: ServiceSessionByService$result } }).session?.data
+			?.serviceSessions?.[0] ?? null
+	);
+
+	// Scope data for task lookups
+	let scope = $derived(
+		(data as { scope?: { data?: ScopeByAddress$result } }).scope?.data?.scopes?.[0] ?? null
+	);
+
+	// Team profiles for attribution
+	let teamProfiles = $derived(
+		(data as { teamProfiles?: { data?: TeamProfiles$result } }).teamProfiles?.data?.teamProfiles ??
+			[]
+	);
+
+	// Build task lookup map from scope (key by both global ID and UUID)
+	let taskLookup = $derived.by(() => {
+		const map = new SvelteMap<string, { description: string; areaName: string }>();
+		if (scope?.areas) {
+			for (const area of scope.areas) {
+				for (const task of area.tasks ?? []) {
+					const taskInfo = {
+						description: task.checklistDescription || task.description,
+						areaName: area.name
+					};
+					// Store by global ID
+					map.set(task.id, taskInfo);
+					// Also extract and store by UUID for matching with completedTask.taskId
+					try {
+						const decoded = atob(task.id);
+						const sep = decoded.indexOf(':');
+						if (sep > 0) {
+							const uuid = decoded.slice(sep + 1);
+							map.set(uuid, taskInfo);
+						}
+					} catch {
+						/* ignore decode errors */
+					}
+				}
+			}
+		}
+		return map;
+	});
+
+	// Build team profile lookup map
+	let teamProfileLookup = $derived.by(() => {
+		const map = new SvelteMap<string, string>();
+		for (const profile of teamProfiles) {
+			// Store by both global ID and UUID for flexible lookup
+			map.set(profile.id, profile.fullName);
+			// Also extract UUID from global ID if present
+			try {
+				const decoded = atob(profile.id);
+				const sep = decoded.indexOf(':');
+				if (sep > 0) {
+					const uuid = decoded.slice(sep + 1);
+					map.set(uuid, profile.fullName);
+				}
+			} catch {
+				/* ignore decode errors */
+			}
+		}
+		return map;
+	});
+
+	// Session media (separate from session for proper typing)
+	let sessionPhotos = $derived(data.sessionPhotos?.serviceSessionImages ?? []);
+	let sessionVideos = $derived(data.sessionVideos?.serviceSessionVideos ?? []);
+
+	// Filter to only public items (internal: false)
+	let publicPhotos = $derived(sessionPhotos.filter((p) => !p.internal));
+	let publicNotes = $derived(session?.notes?.filter((n) => !n.internal) ?? []);
+	let publicVideos = $derived(sessionVideos.filter((v) => !v.internal));
+
+	// Group completed tasks by area
+	let tasksByArea = $derived.by(() => {
+		const grouped = new SvelteMap<
+			string,
+			Array<{
+				task: NonNullable<SessionData['completedTasks']>[number];
+				taskInfo: { description: string; areaName: string } | undefined;
+			}>
+		>();
+
+		for (const completedTask of session?.completedTasks ?? []) {
+			const taskInfo = taskLookup.get(completedTask.taskId);
+			const areaName = taskInfo?.areaName ?? 'Other';
+
+			if (!grouped.has(areaName)) {
+				grouped.set(areaName, []);
+			}
+			grouped.get(areaName)!.push({ task: completedTask, taskInfo });
+		}
+
+		return grouped;
+	});
+
+	// Track expanded areas
+	let expandedAreas = new SvelteSet<string>();
+	// Expand all by default
+	$effect(() => {
+		for (const areaName of tasksByArea.keys()) {
+			expandedAreas.add(areaName);
+		}
+	});
+
+	function toggleArea(areaName: string) {
+		if (expandedAreas.has(areaName)) {
+			expandedAreas.delete(areaName);
+		} else {
+			expandedAreas.add(areaName);
+		}
+	}
+
+	function getTeamMemberName(profileId: string): string {
+		return teamProfileLookup.get(profileId) ?? 'Team Member';
+	}
+
+	function formatDuration(seconds: number): string {
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		if (hours > 0) {
+			return `${hours}h ${minutes}m`;
+		}
+		return `${minutes}m`;
+	}
+
+	function getAccountInfo(accountId: string, addressId: string): { name: string; address: string } {
+		const addrInfo = customerAccountLookup[addressId];
+		if (addrInfo) {
+			return {
+				name: addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name,
+				address: `${addrInfo.streetAddress || ''}, ${addrInfo.city || ''}, ${addrInfo.state || ''}`
+			};
+		}
+		const acctInfo = customerAccountLookup[accountId];
+		if (acctInfo) {
+			return {
+				name: acctInfo.name,
+				address: `${acctInfo.streetAddress || ''}, ${acctInfo.city || ''}, ${acctInfo.state || ''}`
+			};
+		}
+		return { name: 'Unknown Account', address: '' };
+	}
+
+	let accountInfo = $derived(
+		service ? getAccountInfo(service.accountId, service.accountAddressId) : null
+	);
+
+	// Photo lightbox state
+	let selectedPhoto = $state<(typeof sessionPhotos)[number] | null>(null);
+
+	// Navigate to new message page with service entity pre-filled
+	function messageAboutService() {
+		if (!service) return;
+		const dateStr = formatDate(service.date) || 'Service';
+		const accountName = accountInfo?.name ?? 'Unknown';
+		const subject = `${dateStr} - Service: ${accountName}`;
+
+		const params = new URLSearchParams({
+			entityType: 'Service',
+			entityId: service.id,
+			subject
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+</script>
+
+<svelte:head>
+	<title>Completed Service - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="Completed Service"
+			subtitle={service ? formatDate(service.date) : undefined}
+			colorScheme="secondary"
+			backHref="/customer/history"
+		/>
+
+		{#if service}
+			<div class="space-y-6">
+				<!-- Status & Date Card -->
+				<div class="rounded-xl border border-theme bg-theme-card p-4">
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="text-sm text-theme-muted">Service Date</p>
+							<p class="text-xl font-semibold text-theme">{formatDate(service.date)}</p>
+						</div>
+						<span
+							class="rounded-lg bg-success-100 px-3 py-1.5 text-sm font-medium text-success-700 dark:bg-success-900/30 dark:text-success-400"
+						>
+							Completed
+						</span>
+					</div>
+				</div>
+
+				<!-- Message Support Button -->
+				<button
+					type="button"
+					onclick={messageAboutService}
+					class="flex w-full items-center justify-center gap-2 rounded-xl border border-theme bg-theme-card px-4 py-3 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-900/20"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+					Message Support About This Service
+				</button>
+
+				<!-- Location Card -->
+				{#if accountInfo}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Location</h2>
+						</div>
+						<div class="p-4">
+							<p class="font-medium text-theme">{accountInfo.name}</p>
+							<p class="text-sm text-theme-secondary">{accountInfo.address}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Notes Card (if any) -->
+				{#if service.notes}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Notes</h2>
+						</div>
+						<div class="p-4">
+							<p class="text-sm whitespace-pre-wrap text-theme-secondary">{service.notes}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Session Information -->
+				{#if session}
+					<!-- Session Summary -->
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Service Summary</h2>
+						</div>
+						<div class="p-4">
+							<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+								{#if session.durationSeconds}
+									<div>
+										<p class="text-xs text-theme-muted uppercase">Duration</p>
+										<p class="text-lg font-semibold text-theme">
+											{formatDuration(session.durationSeconds)}
+										</p>
+									</div>
+								{/if}
+								<div>
+									<p class="text-xs text-theme-muted uppercase">Tasks Completed</p>
+									<p class="text-lg font-semibold text-theme">
+										{session.completedTasks?.length ?? 0}
+									</p>
+								</div>
+								{#if publicPhotos.length > 0}
+									<div>
+										<p class="text-xs text-theme-muted uppercase">Photos</p>
+										<p class="text-lg font-semibold text-theme">{publicPhotos.length}</p>
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+
+					<!-- Completed Tasks -->
+					{#if session.completedTasks && session.completedTasks.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Completed Tasks</h2>
+							</div>
+							<div class="p-4">
+								<div class="space-y-2">
+									{#each [...tasksByArea.entries()] as [areaName, tasks] (areaName)}
+										<div
+											class="rounded-lg border border-theme bg-black/[0.02] dark:bg-white/[0.02]"
+										>
+											<button
+												type="button"
+												onclick={() => toggleArea(areaName)}
+												class="flex w-full items-center justify-between px-3 py-2 text-left"
+											>
+												<span class="text-sm font-medium text-theme">{areaName}</span>
+												<span class="flex items-center gap-2">
+													<span
+														class="rounded bg-success-100 px-1.5 py-0.5 text-xs text-success-700 dark:bg-success-900/30 dark:text-success-400"
+													>
+														{tasks.length} completed
+													</span>
+													<svg
+														class="h-4 w-4 text-theme-muted transition-transform {expandedAreas.has(
+															areaName
+														)
+															? 'rotate-180'
+															: ''}"
+														style="fill: none"
+														stroke="currentColor"
+														viewBox="0 0 24 24"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M19 9l-7 7-7-7"
+														/>
+													</svg>
+												</span>
+											</button>
+
+											{#if expandedAreas.has(areaName)}
+												<div class="border-t border-theme px-3 py-2">
+													<ul class="space-y-2">
+														{#each tasks as { task, taskInfo } (task.id)}
+															<li class="flex items-start gap-2 text-sm">
+																<svg
+																	class="mt-0.5 h-4 w-4 shrink-0 text-success-500"
+																	style="fill: none"
+																	stroke="currentColor"
+																	viewBox="0 0 24 24"
+																>
+																	<path
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		stroke-width="2"
+																		d="M5 13l4 4L19 7"
+																	/>
+																</svg>
+																<div class="min-w-0 flex-1">
+																	<span class="text-theme-secondary"
+																		>{taskInfo?.description ?? 'Task'}</span
+																	>
+																	<p class="text-xs text-theme-muted">
+																		{getTeamMemberName(task.completedById)} &middot; {formatDateTime(
+																			task.completedAt
+																		)}
+																	</p>
+																	{#if task.notes}
+																		<p class="mt-1 text-xs text-theme-muted italic">
+																			"{task.notes}"
+																		</p>
+																	{/if}
+																</div>
+															</li>
+														{/each}
+													</ul>
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Photos -->
+					{#if publicPhotos.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Photos</h2>
+							</div>
+							<div class="p-4">
+								<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+									{#each publicPhotos as photo (photo.id)}
+										<button
+											type="button"
+											onclick={() => (selectedPhoto = photo)}
+											class="group relative aspect-square overflow-hidden rounded-lg border border-theme bg-black/5 dark:bg-white/5"
+										>
+											{#if photo.thumbnail?.url}
+												<img
+													src={photo.thumbnail.url}
+													alt={photo.title || 'Service photo'}
+													class="h-full w-full object-cover transition-transform group-hover:scale-105"
+												/>
+											{:else if photo.image?.url}
+												<img
+													src={photo.image.url}
+													alt={photo.title || 'Service photo'}
+													class="h-full w-full object-cover transition-transform group-hover:scale-105"
+												/>
+											{/if}
+											<span
+												class="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10"
+											></span>
+										</button>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Service Notes from Session -->
+					{#if publicNotes.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Service Notes</h2>
+							</div>
+							<div class="divide-theme divide-y">
+								{#each publicNotes as note (note.id)}
+									<div class="p-4">
+										<p class="text-sm whitespace-pre-wrap text-theme-secondary">{note.content}</p>
+										<p class="mt-2 text-xs text-theme-muted">
+											{getTeamMemberName(note.authorId)} &middot; {formatDateTime(note.createdAt)}
+										</p>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Videos -->
+					{#if publicVideos.length > 0}
+						<div class="rounded-xl border border-theme bg-theme-card">
+							<div class="border-b border-theme px-4 py-3">
+								<h2 class="font-semibold text-theme">Videos</h2>
+							</div>
+							<div class="p-4">
+								<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+									{#each publicVideos as video (video.id)}
+										<div class="overflow-hidden rounded-lg border border-theme">
+											{#if video.video?.url}
+												<video controls class="w-full" poster={video.thumbnail?.url}>
+													<source src={video.video.url} type={video.contentType || 'video/mp4'} />
+													<track kind="captions" src="" default />
+													Your browser does not support the video tag.
+												</video>
+											{/if}
+											{#if video.title || video.notes}
+												<div class="border-t border-theme bg-black/[0.02] p-3 dark:bg-white/[0.02]">
+													{#if video.title}
+														<p class="text-sm font-medium text-theme">{video.title}</p>
+													{/if}
+													{#if video.notes}
+														<p class="text-xs text-theme-muted">{video.notes}</p>
+													{/if}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</div>
+						</div>
+					{/if}
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Service not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
+
+<!-- Photo Lightbox -->
+{#if selectedPhoto}
+	<button
+		type="button"
+		onclick={() => (selectedPhoto = null)}
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+	>
+		<span class="sr-only">Close photo</span>
+		<img
+			src={selectedPhoto.image?.url ?? selectedPhoto.thumbnail?.url}
+			alt={selectedPhoto.title || 'Service photo'}
+			class="max-h-full max-w-full object-contain"
+		/>
+		{#if selectedPhoto.title || selectedPhoto.notes}
+			<span class="absolute right-4 bottom-4 left-4 rounded-lg bg-black/60 p-3 text-white">
+				{#if selectedPhoto.title}
+					<span class="block font-medium">{selectedPhoto.title}</span>
+				{/if}
+				{#if selectedPhoto.notes}
+					<span class="block text-sm opacity-80">{selectedPhoto.notes}</span>
+				{/if}
+			</span>
+		{/if}
+		<span class="absolute top-4 right-4 rounded-full bg-white/20 p-2 text-white hover:bg-white/30">
+			<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</span>
+	</button>
+{/if}
diff --git a/src/routes/customer/invoices/+page.svelte b/src/routes/customer/invoices/+page.svelte
new file mode 100644
index 0000000..c5d7903
--- /dev/null
+++ b/src/routes/customer/invoices/+page.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import { formatDate, getCurrentMonth } from '$lib/utils/date';
+	import type { PageData } from './$types';
+	import type { CustomerInvoices$result } from '$houdini';
+
+	type Invoice = CustomerInvoices$result['invoices'][number];
+
+	type LayoutData = PageData & {
+		currentMonth?: string;
+		invoices?: Invoice[];
+		customerNames?: Record<string, string>;
+		customerIds?: string[];
+	};
+
+	let { data }: { data: LayoutData } = $props();
+
+	let currentMonth = $derived(data.currentMonth ?? getCurrentMonth());
+	let invoices = $derived(data.invoices ?? []);
+	let customerNames = $derived(data.customerNames ?? ({} as Record<string, string>));
+	let hasMultipleCustomers = $derived((data.customerIds?.length ?? 0) > 1);
+
+	type FilterType = 'all' | 'sent' | 'paid';
+	let activeFilter = $state<FilterType>('all');
+
+	// Filter by month (client-side since API doesn't support date filter)
+	let monthFilteredInvoices = $derived(
+		invoices.filter((invoice) => {
+			// invoice.date is YYYY-MM-DD, currentMonth is YYYY-MM
+			return invoice.date.startsWith(currentMonth);
+		})
+	);
+
+	let filteredInvoices = $derived(
+		monthFilteredInvoices.filter((invoice) => {
+			if (activeFilter === 'all') return true;
+			// 'sent' tab shows invoices that are not yet paid or cancelled (i.e., pending)
+			if (activeFilter === 'sent')
+				return invoice.status !== 'PAID' && invoice.status !== 'CANCELLED';
+			if (activeFilter === 'paid') return invoice.status === 'PAID';
+			return true;
+		})
+	);
+
+	// Sort by date descending
+	let sortedInvoices = $derived([...filteredInvoices].sort((a, b) => b.date.localeCompare(a.date)));
+
+	function getCustomerName(customerId: string): string {
+		// customerId from invoice is already a UUID, not a Relay ID
+		return customerNames[customerId] ?? 'Unknown';
+	}
+
+	function getStatusBadge(status: string): { text: string; classes: string } {
+		switch (status) {
+			case 'PAID':
+				return {
+					text: 'Paid',
+					classes: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400'
+				};
+			case 'CANCELLED':
+				return {
+					text: 'Cancelled',
+					classes: 'bg-black/10 text-theme-secondary dark:bg-white/10'
+				};
+			case 'OVERDUE':
+				return {
+					text: 'Overdue',
+					classes: 'bg-error-100 text-error-700 dark:bg-error-900/30 dark:text-error-400'
+				};
+			case 'DRAFT':
+			default:
+				// Draft and other statuses show as pending
+				return {
+					text: 'Pending',
+					classes: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+				};
+		}
+	}
+
+	const filterTabs: { key: FilterType; label: string }[] = [
+		{ key: 'all', label: 'All' },
+		{ key: 'sent', label: 'Pending' },
+		{ key: 'paid', label: 'Paid' }
+	];
+</script>
+
+<svelte:head>
+	<title>Invoices - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="Invoices"
+			subtitle="View your invoices and payment history."
+			colorScheme="accent6"
+		/>
+
+		<!-- Month Selector and Filter Tabs -->
+		<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
+			<MonthSelector value={currentMonth} />
+			<div class="flex gap-2">
+				{#each filterTabs as tab (tab.key)}
+					<button
+						type="button"
+						onclick={() => (activeFilter = tab.key)}
+						class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
+						tab.key
+							? 'bg-accent6-500 text-white'
+							: 'bg-black/5 text-theme-secondary hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/15'}"
+					>
+						{tab.label}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Invoices List -->
+		{#if sortedInvoices.length > 0}
+			<div class="space-y-3">
+				{#each sortedInvoices as invoice (invoice.id)}
+					{@const statusBadge = getStatusBadge(invoice.status)}
+					<a href="/customer/invoices/{invoice.id}" class="block card-invoice">
+						<div class="flex items-center justify-between gap-4">
+							<div class="min-w-0 flex-1">
+								<div class="mb-1 flex items-center gap-2">
+									<span class="text-sm font-medium text-theme">
+										Invoice - {formatDate(invoice.date)}
+									</span>
+								</div>
+								{#if hasMultipleCustomers && invoice.customerId}
+									<p class="text-sm text-theme-secondary">
+										{getCustomerName(invoice.customerId)}
+									</p>
+								{/if}
+								{#if invoice.datePaid}
+									<p class="text-xs text-theme-muted">
+										Paid on {formatDate(invoice.datePaid)}
+									</p>
+								{/if}
+							</div>
+							<div class="flex shrink-0 items-center gap-2">
+								<span class="rounded px-2 py-1 text-xs {statusBadge.classes}">
+									{statusBadge.text}
+								</span>
+								<svg
+									class="h-5 w-5 text-theme-muted"
+									style="fill: none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-16 w-16 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+					/>
+				</svg>
+				<h2 class="mb-2 text-lg font-semibold text-theme">No Invoices</h2>
+				<p class="mx-auto max-w-md text-theme-muted">
+					{#if activeFilter === 'sent'}
+						No pending invoices.
+					{:else if activeFilter === 'paid'}
+						No paid invoices yet.
+					{:else}
+						No invoices found.
+					{/if}
+				</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/invoices/[invoice]/+page.server.ts b/src/routes/customer/invoices/[invoice]/+page.server.ts
new file mode 100644
index 0000000..4e59c94
--- /dev/null
+++ b/src/routes/customer/invoices/[invoice]/+page.server.ts
@@ -0,0 +1,23 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { GetCustomerInvoiceStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+
+	const invoiceResult = await new GetCustomerInvoiceStore().fetch({
+		event,
+		metadata: { cookie: locals.cookie },
+		variables: { id: params.invoice }
+	});
+
+	if (!invoiceResult.data?.invoice) {
+		throw error(404, 'Invoice not found');
+	}
+
+	return {
+		...parentData,
+		invoice: invoiceResult
+	};
+};
diff --git a/src/routes/customer/invoices/[invoice]/+page.svelte b/src/routes/customer/invoices/[invoice]/+page.svelte
new file mode 100644
index 0000000..6385c93
--- /dev/null
+++ b/src/routes/customer/invoices/[invoice]/+page.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import { formatDate } from '$lib/utils/date';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let invoice = $derived(data.invoice?.data?.invoice);
+	let customerAccountLookup = $derived(
+		(data as { customerAccountLookup?: Record<string, { name: string }> }).customerAccountLookup ??
+			{}
+	);
+	let customerNames = $derived(
+		(data as { customerNames?: Record<string, string> }).customerNames ?? {}
+	);
+
+	function getAccountName(accountId: string): string {
+		// accountId from revenues is already a UUID, not a Relay ID
+		const info = customerAccountLookup[accountId];
+		return info?.name ?? 'Unknown Account';
+	}
+
+	function getCustomerName(customerId: string): string {
+		// customerId from invoice is already a UUID, not a Relay ID
+		return customerNames[customerId] ?? 'Unknown';
+	}
+
+	function getStatusBadge(status: string): { text: string; classes: string } {
+		switch (status) {
+			case 'PAID':
+				return {
+					text: 'Paid',
+					classes: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400'
+				};
+			case 'CANCELLED':
+				return {
+					text: 'Cancelled',
+					classes: 'bg-black/10 text-theme-secondary dark:bg-white/10'
+				};
+			case 'OVERDUE':
+				return {
+					text: 'Overdue',
+					classes: 'bg-error-100 text-error-700 dark:bg-error-900/30 dark:text-error-400'
+				};
+			case 'DRAFT':
+			default:
+				// Draft and other statuses show as pending
+				return {
+					text: 'Pending',
+					classes: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+				};
+		}
+	}
+
+	// Calculate totals
+	let revenueTotal = $derived(
+		invoice?.revenues?.reduce((sum, r) => sum + (Number(r.amount) || 0), 0) ?? 0
+	);
+	let projectTotal = $derived(
+		invoice?.projects?.reduce((sum, p) => sum + (Number(p.amount) || 0), 0) ?? 0
+	);
+	let grandTotal = $derived(revenueTotal + projectTotal);
+
+	function formatCurrency(amount: number): string {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(amount);
+	}
+</script>
+
+<svelte:head>
+	<title>Invoice - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="Invoice Details"
+			subtitle={invoice ? formatDate(invoice.date) : undefined}
+			colorScheme="accent6"
+			backHref="/customer/invoices"
+		/>
+
+		{#if invoice}
+			{@const statusBadge = getStatusBadge(invoice.status)}
+			<div class="space-y-6">
+				<!-- Invoice Summary Card -->
+				<div class="rounded-xl border border-theme bg-theme-card">
+					<div class="border-b border-theme p-4">
+						<div class="flex items-center justify-between">
+							<div>
+								<p class="text-sm text-theme-muted">Invoice Date</p>
+								<p class="text-xl font-semibold text-theme">{formatDate(invoice.date)}</p>
+							</div>
+							<span class="rounded-lg px-3 py-1.5 text-sm font-medium {statusBadge.classes}">
+								{statusBadge.text}
+							</span>
+						</div>
+					</div>
+					<div class="p-4">
+						<div class="flex items-center justify-between border-b border-theme pb-4">
+							<span class="text-theme-secondary">Customer</span>
+							<span class="font-medium text-theme">{getCustomerName(invoice.customerId)}</span>
+						</div>
+						{#if invoice.datePaid}
+							<div class="flex items-center justify-between border-b border-theme py-4">
+								<span class="text-theme-secondary">Date Paid</span>
+								<span class="font-medium text-theme">{formatDate(invoice.datePaid)}</span>
+							</div>
+						{/if}
+						{#if invoice.paymentType}
+							<div class="flex items-center justify-between border-b border-theme py-4">
+								<span class="text-theme-secondary">Payment Method</span>
+								<span class="font-medium text-theme">{invoice.paymentType}</span>
+							</div>
+						{/if}
+						<div class="flex items-center justify-between pt-4">
+							<span class="text-lg font-semibold text-theme">Total</span>
+							<span class="text-lg font-bold text-accent6-600 dark:text-accent6-400">
+								{formatCurrency(grandTotal)}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<!-- Revenues Section -->
+				{#if invoice.revenues && invoice.revenues.length > 0}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Service Charges</h2>
+						</div>
+						<div class="divide-theme divide-y">
+							{#each invoice.revenues as revenue (revenue.id)}
+								<div class="flex items-center justify-between p-4">
+									<div>
+										<p class="font-medium text-theme">{getAccountName(revenue.accountId)}</p>
+										<p class="text-sm text-theme-muted">
+											{formatDate(revenue.startDate)} - {formatDate(revenue.endDate)}
+										</p>
+									</div>
+									<span class="font-medium text-theme">
+										{formatCurrency(Number(revenue.amount) || 0)}
+									</span>
+								</div>
+							{/each}
+						</div>
+						<div class="border-t border-theme bg-black/[0.02] p-4 dark:bg-white/[0.02]">
+							<div class="flex items-center justify-between">
+								<span class="font-medium text-theme-secondary">Subtotal</span>
+								<span class="font-semibold text-theme">{formatCurrency(revenueTotal)}</span>
+							</div>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Projects Section -->
+				{#if invoice.projects && invoice.projects.length > 0}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Projects</h2>
+						</div>
+						<div class="divide-theme divide-y">
+							{#each invoice.projects as project (project.id)}
+								<div class="flex items-center justify-between p-4">
+									<div>
+										<p class="font-medium text-theme">{project.name}</p>
+										<p class="text-sm text-theme-muted">{formatDate(project.date)}</p>
+									</div>
+									<span class="font-medium text-theme">
+										{formatCurrency(Number(project.amount) || 0)}
+									</span>
+								</div>
+							{/each}
+						</div>
+						<div class="border-t border-theme bg-black/[0.02] p-4 dark:bg-white/[0.02]">
+							<div class="flex items-center justify-between">
+								<span class="font-medium text-theme-secondary">Subtotal</span>
+								<span class="font-semibold text-theme">{formatCurrency(projectTotal)}</span>
+							</div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Invoice not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/profile/+page.svelte b/src/routes/customer/profile/+page.svelte
new file mode 100644
index 0000000..70a6117
--- /dev/null
+++ b/src/routes/customer/profile/+page.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// GraphQL user data from layout
+	let user = $derived(data.user?.data?.me);
+	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
+	let customers = $derived(
+		isCustomer && user?.__typename === 'CustomerProfileType' ? user.customers : []
+	);
+
+	// Kratos session data
+	let kratosIdentity = $derived(auth.session?.identity);
+	let kratosTraits = $derived(kratosIdentity?.traits);
+</script>
+
+<svelte:head>
+	<title>My Profile - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Page Header -->
+		<div class="mb-8">
+			<h1 class="text-2xl font-bold text-theme md:text-3xl">My Profile</h1>
+			<p class="mt-2 text-theme-secondary">View and manage your profile information.</p>
+		</div>
+
+		<div class="space-y-6">
+			<!-- Nexus Account Section (from Kratos) -->
+			<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+				<div
+					class="border-b border-theme bg-gradient-to-r from-accent-500/10 to-secondary-500/10 p-6"
+				>
+					<div class="flex items-center gap-3">
+						<svg
+							class="h-6 w-6 text-accent-600 dark:text-accent-400"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+							/>
+						</svg>
+						<div>
+							<h2 class="text-lg font-semibold text-theme">Nexus Account</h2>
+							<p class="text-sm text-theme-muted">Your authentication and identity information</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="p-6">
+					{#if kratosTraits}
+						<dl class="space-y-4">
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">First Name</dt>
+								<dd class="text-sm text-theme">{kratosTraits.name?.first ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Last Name</dt>
+								<dd class="text-sm text-theme">{kratosTraits.name?.last ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
+								<dd class="text-sm text-theme">{kratosTraits.email ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
+								<dd class="text-sm text-theme">{kratosTraits.phone ?? 'Not set'}</dd>
+							</div>
+						</dl>
+					{:else}
+						<p class="text-sm text-theme-muted">Loading account information...</p>
+					{/if}
+				</div>
+
+				<div class="border-t border-theme bg-black/[0.02] p-6 dark:bg-white/[0.02]">
+					<a
+						href="https://account.example.com/"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+						Manage Nexus Account
+						<svg class="h-3 w-3" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			<!-- Profile Information Section (from GraphQL/GetMe) -->
+			{#if user}
+				<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+					<div
+						class="border-b border-theme bg-gradient-to-r from-primary-500/10 to-accent-500/10 p-6"
+					>
+						<div class="flex items-center gap-4">
+							<!-- Avatar -->
+							<div
+								class="flex h-16 w-16 items-center justify-center rounded-full bg-accent-500 text-xl font-bold text-white"
+							>
+								{user.fullName?.charAt(0).toUpperCase() ?? '?'}
+							</div>
+							<div>
+								<div class="flex items-center gap-3">
+									<h2 class="text-lg font-semibold text-theme">Profile Information</h2>
+									<span
+										class="inline-flex items-center rounded-full bg-accent-100 px-2.5 py-0.5 text-xs font-semibold tracking-wide text-accent-700 uppercase dark:bg-accent-900 dark:text-accent-300"
+									>
+										Customer
+									</span>
+								</div>
+								<p class="text-sm text-theme-muted">Your customer profile data</p>
+							</div>
+						</div>
+					</div>
+
+					<div class="p-6">
+						<dl class="space-y-4">
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Full Name</dt>
+								<dd class="text-sm text-theme">{user.fullName ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
+								<dd class="text-sm text-theme">{user.email ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
+								<dd class="text-sm text-theme">{user.phone ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Customers</dt>
+								<dd class="text-sm text-theme">
+									{#if customers && customers.length > 0}
+										<div class="flex flex-wrap gap-2">
+											{#each customers as customer (customer.id)}
+												<span
+													class="inline-flex items-center rounded bg-black/5 px-2 py-1 text-xs dark:bg-white/10"
+												>
+													{customer.name}
+												</span>
+											{/each}
+										</div>
+									{:else}
+										<span class="text-theme-muted">No linked customers</span>
+									{/if}
+								</dd>
+							</div>
+						</dl>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/schedule/+page.svelte b/src/routes/customer/schedule/+page.svelte
new file mode 100644
index 0000000..63ca4d5
--- /dev/null
+++ b/src/routes/customer/schedule/+page.svelte
@@ -0,0 +1,313 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import MonthSelector from '$lib/components/team/MonthSelector.svelte';
+	import { formatDate, getCurrentMonth } from '$lib/utils/date';
+	import { navigating } from '$app/state';
+	import type { PageData } from './$types';
+	import type { CustomerAccountInfo } from '../+layout.server';
+	import type { CustomerServices$result, CustomerProjects$result } from '$houdini';
+
+	type Service = CustomerServices$result['services'][number];
+	type Project = CustomerProjects$result['projects'][number];
+
+	type LayoutData = PageData & {
+		currentMonth?: string;
+		services?: {
+			upcoming?: Service[];
+		};
+		projects?: {
+			upcoming?: Project[];
+		};
+		customerAccountLookup?: Record<string, CustomerAccountInfo>;
+	};
+
+	let { data }: { data: LayoutData } = $props();
+
+	let currentMonth = $derived(data.currentMonth ?? getCurrentMonth());
+	let upcomingServices = $derived(data.services?.upcoming ?? []);
+	let upcomingProjects = $derived(data.projects?.upcoming ?? []);
+	let customerAccountLookup = $derived(
+		data.customerAccountLookup ?? ({} as Record<string, CustomerAccountInfo>)
+	);
+
+	type FilterType = 'all' | 'services' | 'projects';
+	let activeFilter = $state<FilterType>('all');
+
+	// Combine and sort items
+	type ScheduleItem =
+		| {
+				type: 'service';
+				id: string;
+				date: string;
+				status: string;
+				accountId: string;
+				accountAddressId: string;
+		  }
+		| {
+				type: 'project';
+				id: string;
+				date: string;
+				status: string;
+				name: string;
+				accountAddressId?: string;
+				streetAddress?: string;
+				city?: string;
+				state?: string;
+		  };
+
+	let allItems = $derived.by(() => {
+		const items: ScheduleItem[] = [];
+
+		upcomingServices.forEach((s) => {
+			items.push({
+				type: 'service',
+				id: s.id,
+				date: s.date,
+				status: s.status,
+				accountId: s.accountId ?? '',
+				accountAddressId: s.accountAddressId ?? ''
+			});
+		});
+
+		upcomingProjects.forEach((p) => {
+			items.push({
+				type: 'project',
+				id: p.id,
+				date: p.date,
+				status: p.status,
+				name: p.name,
+				accountAddressId: p.accountAddressId ?? undefined,
+				streetAddress: p.streetAddress ?? undefined,
+				city: p.city ?? undefined,
+				state: p.state ?? undefined
+			});
+		});
+
+		return items;
+	});
+
+	// Helper to get sortable name for an item
+	function getSortName(item: ScheduleItem): string {
+		if (item.type === 'service') {
+			return getAccountName(item.accountId, item.accountAddressId);
+		}
+		return item.name;
+	}
+
+	// Sort by date ascending, then alphabetically by name
+	let sortedItems = $derived(
+		[...allItems].sort((a, b) => {
+			const dateCompare = a.date.localeCompare(b.date);
+			if (dateCompare !== 0) return dateCompare;
+			return getSortName(a).localeCompare(getSortName(b));
+		})
+	);
+
+	// Filter by selected month (client-side)
+	let monthFilteredItems = $derived(
+		sortedItems.filter((item) => item.date.startsWith(currentMonth))
+	);
+
+	let filteredItems = $derived(
+		monthFilteredItems.filter((item) => {
+			if (activeFilter === 'all') return true;
+			if (activeFilter === 'services') return item.type === 'service';
+			if (activeFilter === 'projects') return item.type === 'project';
+			return true;
+		})
+	);
+
+	function getAccountName(accountId: string, addressId: string): string {
+		// accountId and addressId from services are already UUIDs, not Relay IDs
+		const addrInfo = customerAccountLookup[addressId];
+		if (addrInfo) {
+			return addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name;
+		}
+		const acctInfo = customerAccountLookup[accountId];
+		return acctInfo?.name ?? 'Unknown Account';
+	}
+
+	function getProjectLocation(item: Extract<ScheduleItem, { type: 'project' }>): string {
+		// If project has accountAddressId, get address from lookup
+		if (item.accountAddressId) {
+			const addrInfo = customerAccountLookup[item.accountAddressId];
+			if (addrInfo) {
+				return `${addrInfo.streetAddress}, ${addrInfo.city}`;
+			}
+		}
+		// Otherwise use project's own address fields
+		return `${item.streetAddress ?? ''}, ${item.city ?? ''}`;
+	}
+
+	function getItemHref(item: ScheduleItem): string {
+		if (item.type === 'service') {
+			return `/customer/schedule/service/${item.id}`;
+		}
+		return `/customer/schedule/project/${item.id}`;
+	}
+
+	function getStatusBadgeClasses(status: string, type: 'service' | 'project'): string {
+		if (status === 'IN_PROGRESS') {
+			return 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400';
+		}
+		if (type === 'service') {
+			return 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400';
+		}
+		return 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400';
+	}
+
+	const filterTabs: { key: FilterType; label: string }[] = [
+		{ key: 'all', label: 'All' },
+		{ key: 'services', label: 'Services' },
+		{ key: 'projects', label: 'Projects' }
+	];
+
+	// Check if navigating to a specific item
+	function isNavigatingTo(item: ScheduleItem): boolean {
+		if (!navigating.to) return false;
+		const href = getItemHref(item);
+		return navigating.to.url.pathname === href;
+	}
+</script>
+
+<svelte:head>
+	<title>Schedule - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="Schedule"
+			subtitle="View your upcoming services and projects."
+			colorScheme="secondary"
+		/>
+
+		<!-- Month Selector and Filter Tabs -->
+		<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
+			<MonthSelector value={currentMonth} />
+			<div class="flex gap-2">
+				{#each filterTabs as tab (tab.key)}
+					<button
+						type="button"
+						onclick={() => (activeFilter = tab.key)}
+						class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {activeFilter ===
+						tab.key
+							? 'bg-secondary-500 text-white'
+							: 'bg-black/5 text-theme-secondary hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/15'}"
+					>
+						{tab.label}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Schedule List -->
+		{#if filteredItems.length > 0}
+			<div class="space-y-3">
+				{#each filteredItems as item (item.id)}
+					<a
+						href={getItemHref(item)}
+						class="block {item.type === 'service' ? 'card-service' : 'card-project'}"
+					>
+						<div class="flex items-center justify-between gap-4">
+							<div class="min-w-0 flex-1">
+								<div class="mb-1 flex items-center gap-2">
+									<span
+										class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium {item.type ===
+										'service'
+											? 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'
+											: 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400'}"
+									>
+										{item.type === 'service' ? 'Service' : 'Project'}
+									</span>
+									<span class="text-sm font-medium text-theme">
+										{formatDate(item.date)}
+									</span>
+								</div>
+								{#if item.type === 'service'}
+									<p class="truncate text-sm text-theme-secondary">
+										{getAccountName(item.accountId, item.accountAddressId)}
+									</p>
+								{:else}
+									<p class="truncate font-medium text-theme">{item.name}</p>
+									<p class="truncate text-sm text-theme-muted">
+										{getProjectLocation(item)}
+									</p>
+								{/if}
+							</div>
+							<div class="flex shrink-0 items-center gap-2">
+								<span
+									class="rounded px-2 py-1 text-xs {getStatusBadgeClasses(item.status, item.type)}"
+								>
+									{item.status === 'IN_PROGRESS' ? 'In Progress' : 'Scheduled'}
+								</span>
+								{#if isNavigatingTo(item)}
+									<svg
+										class="h-5 w-5 animate-spin text-theme-muted"
+										viewBox="0 0 24 24"
+										style="fill: none"
+									>
+										<circle
+											class="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											stroke-width="4"
+										></circle>
+										<path
+											class="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										></path>
+									</svg>
+								{:else}
+									<svg
+										class="h-5 w-5 text-theme-muted"
+										style="fill: none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 5l7 7-7 7"
+										/>
+									</svg>
+								{/if}
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<svg
+					class="mx-auto mb-4 h-16 w-16 text-theme-muted"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
+				</svg>
+				<h2 class="mb-2 text-lg font-semibold text-theme">No Upcoming Items</h2>
+				<p class="mx-auto max-w-md text-theme-muted">
+					{#if activeFilter === 'services'}
+						No upcoming services scheduled.
+					{:else if activeFilter === 'projects'}
+						No upcoming projects scheduled.
+					{:else}
+						No upcoming services or projects scheduled.
+					{/if}
+				</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/schedule/project/[project]/+page.server.ts b/src/routes/customer/schedule/project/[project]/+page.server.ts
new file mode 100644
index 0000000..8d43ab5
--- /dev/null
+++ b/src/routes/customer/schedule/project/[project]/+page.server.ts
@@ -0,0 +1,37 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { GetProjectStore, ProjectScopeStore } from '$houdini';
+import { toGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+
+	const projectResult = await new GetProjectStore().fetch({
+		event,
+		metadata: { cookie: locals.cookie },
+		variables: { id: params.project }
+	});
+
+	if (!projectResult.data?.project) {
+		throw error(404, 'Project not found');
+	}
+
+	// Fetch the project scope if it exists
+	let scopeResult = null;
+	const scopeId = projectResult.data.project.scopeId;
+	if (scopeId) {
+		const scopeGlobalId = toGlobalId('ProjectScopeType', scopeId);
+		scopeResult = await new ProjectScopeStore().fetch({
+			event,
+			metadata: { cookie: locals.cookie },
+			variables: { id: scopeGlobalId }
+		});
+	}
+
+	return {
+		...parentData,
+		project: projectResult,
+		scope: scopeResult
+	};
+};
diff --git a/src/routes/customer/schedule/project/[project]/+page.svelte b/src/routes/customer/schedule/project/[project]/+page.svelte
new file mode 100644
index 0000000..acbc2e3
--- /dev/null
+++ b/src/routes/customer/schedule/project/[project]/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import { formatDate } from '$lib/utils/date';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { goto } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type { ProjectScope$result } from '$houdini';
+	import type { CustomerAccountInfo } from '../../../+layout.server';
+
+	let { data }: { data: PageData } = $props();
+
+	let project = $derived(data.project?.data?.project);
+
+	// Customer account lookup for account-affiliated projects (plain object from server)
+	let customerAccountLookup = $derived(
+		(data as { customerAccountLookup?: Record<string, CustomerAccountInfo> })
+			.customerAccountLookup ?? {}
+	);
+
+	// Get account info if project is affiliated with an account address
+	let accountInfo = $derived.by(() => {
+		if (!project?.accountAddressId) return null;
+		const addrInfo = customerAccountLookup[project.accountAddressId];
+		if (addrInfo) {
+			return {
+				name: addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name,
+				streetAddress: addrInfo.streetAddress,
+				city: addrInfo.city,
+				state: addrInfo.state
+			};
+		}
+		return null;
+	});
+
+	// Get the project scope
+	let scope = $derived(
+		(data as { scope?: { data?: ProjectScope$result } }).scope?.data?.projectScope ?? null
+	);
+
+	// Track which scope areas are expanded
+	let expandedAreas = new SvelteSet<string>();
+
+	function toggleArea(areaId: string) {
+		if (expandedAreas.has(areaId)) {
+			expandedAreas.delete(areaId);
+		} else {
+			expandedAreas.add(areaId);
+		}
+	}
+
+	function getStatusBadge(status: string): { text: string; classes: string } {
+		switch (status) {
+			case 'SCHEDULED':
+				return {
+					text: 'Scheduled',
+					classes: 'bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400'
+				};
+			case 'IN_PROGRESS':
+				return {
+					text: 'In Progress',
+					classes: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+				};
+			case 'COMPLETED':
+				return {
+					text: 'Completed',
+					classes: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400'
+				};
+			default:
+				return {
+					text: status,
+					classes: 'bg-black/10 text-theme-secondary dark:bg-white/10'
+				};
+		}
+	}
+
+	// Navigate to new message page with project entity pre-filled
+	function messageAboutProject() {
+		if (!project) return;
+		const dateStr = formatDate(project.date) || '';
+		const projectName = project.name || 'Project';
+		const ownerName = accountInfo?.name ?? '';
+		const parts = [dateStr, `Project: ${projectName}`, ownerName].filter(Boolean);
+		const subject = parts.join(' - ');
+
+		const params = new URLSearchParams({
+			entityType: 'Project',
+			entityId: project.id,
+			subject
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+</script>
+
+<svelte:head>
+	<title>{project?.name ?? 'Project'} - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title={project?.name ?? 'Project'}
+			subtitle={project ? formatDate(project.date) : undefined}
+			colorScheme="accent"
+			backHref="/customer/schedule"
+		/>
+
+		{#if project}
+			{@const statusBadge = getStatusBadge(project.status)}
+			<div class="space-y-6">
+				<!-- Status & Date Card -->
+				<div class="rounded-xl border border-theme bg-theme-card p-4">
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="text-sm text-theme-muted">Project Date</p>
+							<p class="text-xl font-semibold text-theme">{formatDate(project.date)}</p>
+						</div>
+						<span class="rounded-lg px-3 py-1.5 text-sm font-medium {statusBadge.classes}">
+							{statusBadge.text}
+						</span>
+					</div>
+				</div>
+
+				<!-- Message Support Button -->
+				<button
+					type="button"
+					onclick={messageAboutProject}
+					class="flex w-full items-center justify-center gap-2 rounded-xl border border-theme bg-theme-card px-4 py-3 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-900/20"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+					Message Support About This Project
+				</button>
+
+				<!-- Location Card -->
+				<div class="rounded-xl border border-theme bg-theme-card">
+					<div class="border-b border-theme px-4 py-3">
+						<h2 class="font-semibold text-theme">Location</h2>
+					</div>
+					<div class="p-4">
+						{#if accountInfo}
+							<p class="mb-1 text-xs font-medium text-theme-muted uppercase">Account</p>
+							<p class="font-medium text-theme">{accountInfo.name}</p>
+							<p class="mt-2 font-medium text-theme">{accountInfo.streetAddress}</p>
+							<p class="text-sm text-theme-secondary">
+								{accountInfo.city}, {accountInfo.state}
+							</p>
+						{:else}
+							<p class="font-medium text-theme">{project.streetAddress}</p>
+							<p class="text-sm text-theme-secondary">
+								{project.city}, {project.state}
+								{project.zipCode}
+							</p>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Notes Card (if any) -->
+				{#if project.notes}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Notes</h2>
+						</div>
+						<div class="p-4">
+							<p class="text-sm whitespace-pre-wrap text-theme-secondary">{project.notes}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Project Scope -->
+				{#if scope}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Project Scope</h2>
+							{#if scope.description}
+								<p class="mt-1 text-sm text-theme-muted">{scope.description}</p>
+							{/if}
+						</div>
+						<div class="p-4">
+							{#if scope.projectAreas && scope.projectAreas.length > 0}
+								<div class="space-y-2">
+									{#each [...scope.projectAreas].sort((a, b) => a.order - b.order) as area (area.id)}
+										<div
+											class="rounded-lg border border-theme bg-black/[0.02] dark:bg-white/[0.02]"
+										>
+											<button
+												type="button"
+												onclick={() => toggleArea(area.id)}
+												class="flex w-full items-center justify-between px-3 py-2 text-left"
+											>
+												<span class="text-sm font-medium text-theme">{area.name}</span>
+												<svg
+													class="h-4 w-4 text-theme-muted transition-transform {expandedAreas.has(
+														area.id
+													)
+														? 'rotate-180'
+														: ''}"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M19 9l-7 7-7-7"
+													/>
+												</svg>
+											</button>
+
+											{#if expandedAreas.has(area.id)}
+												<div class="border-t border-theme px-3 py-2">
+													{#if area.projectTasks && area.projectTasks.length > 0}
+														<ul class="space-y-1.5">
+															{#each [...area.projectTasks].sort((a, b) => a.order - b.order) as task (task.id)}
+																<li class="flex items-start justify-between gap-2 text-sm">
+																	<span class="text-theme-secondary">
+																		{task.checklistDescription || task.description}
+																	</span>
+																	{#if task.estimatedMinutes}
+																		<span
+																			class="shrink-0 rounded bg-black/5 px-1.5 py-0.5 text-xs text-theme-muted dark:bg-white/10"
+																		>
+																			~{task.estimatedMinutes} min
+																		</span>
+																	{/if}
+																</li>
+															{/each}
+														</ul>
+													{:else}
+														<p class="text-sm text-theme-muted">No tasks in this category.</p>
+													{/if}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{:else}
+								<p class="text-sm text-theme-muted">No scope items defined.</p>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Project not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/customer/schedule/service/[service]/+page.server.ts b/src/routes/customer/schedule/service/[service]/+page.server.ts
new file mode 100644
index 0000000..86e9d93
--- /dev/null
+++ b/src/routes/customer/schedule/service/[service]/+page.server.ts
@@ -0,0 +1,35 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { GetServiceStore, ScopeByAddressStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const parentData = await parent();
+
+	const serviceResult = await new GetServiceStore().fetch({
+		event,
+		metadata: { cookie: locals.cookie },
+		variables: { id: params.service }
+	});
+
+	if (!serviceResult.data?.service) {
+		throw error(404, 'Service not found');
+	}
+
+	// Fetch the active scope for this service's address
+	let scopeResult = null;
+	const accountAddressId = serviceResult.data.service.accountAddressId;
+	if (accountAddressId) {
+		scopeResult = await new ScopeByAddressStore().fetch({
+			event,
+			metadata: { cookie: locals.cookie },
+			variables: { accountAddressId }
+		});
+	}
+
+	return {
+		...parentData,
+		service: serviceResult,
+		scope: scopeResult
+	};
+};
diff --git a/src/routes/customer/schedule/service/[service]/+page.svelte b/src/routes/customer/schedule/service/[service]/+page.svelte
new file mode 100644
index 0000000..052aa87
--- /dev/null
+++ b/src/routes/customer/schedule/service/[service]/+page.svelte
@@ -0,0 +1,262 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import CustomerPageHeader from '$lib/components/customer/CustomerPageHeader.svelte';
+	import { formatDate } from '$lib/utils/date';
+	import { getFrequencyLabel } from '$lib/stores/scopeEditor.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { goto } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type { ScopeByAddress$result } from '$houdini';
+
+	let { data }: { data: PageData } = $props();
+
+	let service = $derived(data.service?.data?.service);
+	let customerAccountLookup = $derived(
+		(
+			data as {
+				customerAccountLookup?: Record<
+					string,
+					{
+						name: string;
+						addressName?: string;
+						streetAddress?: string;
+						city?: string;
+						state?: string;
+					}
+				>;
+			}
+		).customerAccountLookup ?? {}
+	);
+
+	// Get the active scope (first one returned since we filter by isActive)
+	let scope = $derived(
+		(data as { scope?: { data?: ScopeByAddress$result } }).scope?.data?.scopes?.[0] ?? null
+	);
+
+	// Track which scope areas are expanded
+	let expandedAreas = new SvelteSet<string>();
+
+	function toggleArea(areaId: string) {
+		if (expandedAreas.has(areaId)) {
+			expandedAreas.delete(areaId);
+		} else {
+			expandedAreas.add(areaId);
+		}
+	}
+
+	function getAccountInfo(accountId: string, addressId: string): { name: string; address: string } {
+		// accountId and addressId from services are already UUIDs, not Relay IDs
+		const addrInfo = customerAccountLookup[addressId];
+		if (addrInfo) {
+			return {
+				name: addrInfo.addressName ? `${addrInfo.name} - ${addrInfo.addressName}` : addrInfo.name,
+				address: `${addrInfo.streetAddress || ''}, ${addrInfo.city || ''}, ${addrInfo.state || ''}`
+			};
+		}
+		const acctInfo = customerAccountLookup[accountId];
+		if (acctInfo) {
+			return {
+				name: acctInfo.name,
+				address: `${acctInfo.streetAddress || ''}, ${acctInfo.city || ''}, ${acctInfo.state || ''}`
+			};
+		}
+		return { name: 'Unknown Account', address: '' };
+	}
+
+	let accountInfo = $derived(
+		service ? getAccountInfo(service.accountId, service.accountAddressId) : null
+	);
+
+	function getStatusBadge(status: string): { text: string; classes: string } {
+		switch (status) {
+			case 'SCHEDULED':
+				return {
+					text: 'Scheduled',
+					classes:
+						'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-400'
+				};
+			case 'IN_PROGRESS':
+				return {
+					text: 'In Progress',
+					classes: 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-400'
+				};
+			case 'COMPLETED':
+				return {
+					text: 'Completed',
+					classes: 'bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-400'
+				};
+			default:
+				return {
+					text: status,
+					classes: 'bg-black/10 text-theme-secondary dark:bg-white/10'
+				};
+		}
+	}
+
+	// Navigate to new message page with service entity pre-filled
+	function messageAboutService() {
+		if (!service) return;
+		const dateStr = formatDate(service.date) || 'Service';
+		const accountName = accountInfo?.name ?? 'Unknown';
+		const subject = `${dateStr} - Service: ${accountName}`;
+
+		const params = new URLSearchParams({
+			entityType: 'Service',
+			entityId: service.id,
+			subject
+		});
+		goto(`/messages/new?${params.toString()}`);
+	}
+</script>
+
+<svelte:head>
+	<title>Service Details - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<CustomerPageHeader
+			title="Service Details"
+			subtitle={service ? formatDate(service.date) : undefined}
+			colorScheme="secondary"
+			backHref="/customer/schedule"
+		/>
+
+		{#if service}
+			{@const statusBadge = getStatusBadge(service.status)}
+			<div class="space-y-6">
+				<!-- Status & Date Card -->
+				<div class="rounded-xl border border-theme bg-theme-card p-4">
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="text-sm text-theme-muted">Service Date</p>
+							<p class="text-xl font-semibold text-theme">{formatDate(service.date)}</p>
+						</div>
+						<span class="rounded-lg px-3 py-1.5 text-sm font-medium {statusBadge.classes}">
+							{statusBadge.text}
+						</span>
+					</div>
+				</div>
+
+				<!-- Message Support Button -->
+				<button
+					type="button"
+					onclick={messageAboutService}
+					class="flex w-full items-center justify-center gap-2 rounded-xl border border-theme bg-theme-card px-4 py-3 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-900/20"
+				>
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+					Message Support About This Service
+				</button>
+
+				<!-- Location Card -->
+				{#if accountInfo}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Location</h2>
+						</div>
+						<div class="p-4">
+							<p class="font-medium text-theme">{accountInfo.name}</p>
+							<p class="text-sm text-theme-secondary">{accountInfo.address}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Notes Card (if any) -->
+				{#if service.notes}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Notes</h2>
+						</div>
+						<div class="p-4">
+							<p class="text-sm whitespace-pre-wrap text-theme-secondary">{service.notes}</p>
+						</div>
+					</div>
+				{/if}
+
+				<!-- Service Checklist (Scope) -->
+				{#if scope}
+					<div class="rounded-xl border border-theme bg-theme-card">
+						<div class="border-b border-theme px-4 py-3">
+							<h2 class="font-semibold text-theme">Service Checklist</h2>
+							{#if scope.description}
+								<p class="mt-1 text-sm text-theme-muted">{scope.description}</p>
+							{/if}
+						</div>
+						<div class="p-4">
+							{#if scope.areas && scope.areas.length > 0}
+								<div class="space-y-2">
+									{#each [...scope.areas].sort((a, b) => a.order - b.order) as area (area.id)}
+										<div
+											class="rounded-lg border border-theme bg-black/[0.02] dark:bg-white/[0.02]"
+										>
+											<button
+												type="button"
+												onclick={() => toggleArea(area.id)}
+												class="flex w-full items-center justify-between px-3 py-2 text-left"
+											>
+												<span class="text-sm font-medium text-theme">{area.name}</span>
+												<svg
+													class="h-4 w-4 text-theme-muted transition-transform {expandedAreas.has(
+														area.id
+													)
+														? 'rotate-180'
+														: ''}"
+													style="fill: none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M19 9l-7 7-7-7"
+													/>
+												</svg>
+											</button>
+
+											{#if expandedAreas.has(area.id)}
+												<div class="border-t border-theme px-3 py-2">
+													{#if area.tasks && area.tasks.length > 0}
+														<ul class="space-y-1.5">
+															{#each [...area.tasks].sort((a, b) => a.order - b.order) as task (task.id)}
+																<li class="flex items-start justify-between gap-2 text-sm">
+																	<span class="text-theme-secondary">
+																		{task.checklistDescription || task.description}
+																	</span>
+																	<span
+																		class="shrink-0 rounded bg-black/5 px-1.5 py-0.5 text-xs text-theme-muted dark:bg-white/10"
+																	>
+																		{getFrequencyLabel(task.frequency)}
+																	</span>
+																</li>
+															{/each}
+														</ul>
+													{:else}
+														<p class="text-sm text-theme-muted">No tasks in this area.</p>
+													{/if}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{:else}
+								<p class="text-sm text-theme-muted">No checklist items defined.</p>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+				<p class="text-theme-muted">Service not found.</p>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/layout.css b/src/routes/layout.css
new file mode 100644
index 0000000..da9b33a
--- /dev/null
+++ b/src/routes/layout.css
@@ -0,0 +1,887 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+/* ============================================
+   THEME COLOR SYSTEM
+   ============================================
+   Primary: Blue
+   Secondary: Green
+   Primary Accent: Orange
+   Secondary Accent: Purple
+   Alert/Error: Red
+   Warning: Yellow
+   Success: Green (distinct from secondary)
+   ============================================ */
+
+@theme {
+	/* Primary - Blue (muted/professional) */
+	--color-primary-50: #f0f6fc;
+	--color-primary-100: #dbe8f7;
+	--color-primary-200: #bdd4f0;
+	--color-primary-300: #8fb8e5;
+	--color-primary-400: #5a94d6;
+	--color-primary-500: #3b78c4;
+	--color-primary-600: #2d5fa6;
+	--color-primary-700: #274d87;
+	--color-primary-800: #254270;
+	--color-primary-900: #23395e;
+	--color-primary-950: #18253f;
+
+	/* Secondary - Green (muted/professional) */
+	--color-secondary-50: #f2f8f4;
+	--color-secondary-100: #e0efe4;
+	--color-secondary-200: #c3dfcc;
+	--color-secondary-300: #96c7a6;
+	--color-secondary-400: #65a97b;
+	--color-secondary-500: #458c5e;
+	--color-secondary-600: #33714a;
+	--color-secondary-700: #2a5b3d;
+	--color-secondary-800: #244933;
+	--color-secondary-900: #1f3c2b;
+	--color-secondary-950: #102118;
+
+	/* Accent Primary - Orange (muted/professional) */
+	--color-accent-50: #fdf6f0;
+	--color-accent-100: #fbe9db;
+	--color-accent-200: #f6d0b6;
+	--color-accent-300: #f0b088;
+	--color-accent-400: #e88958;
+	--color-accent-500: #e16a36;
+	--color-accent-600: #d2522b;
+	--color-accent-700: #ae3f26;
+	--color-accent-800: #8b3425;
+	--color-accent-900: #712e22;
+	--color-accent-950: #3d1510;
+
+	/* Accent Secondary - Purple (muted/professional) */
+	--color-accent2-50: #f6f4fb;
+	--color-accent2-100: #ede9f7;
+	--color-accent2-200: #ddd5f0;
+	--color-accent2-300: #c5b6e4;
+	--color-accent2-400: #a78fd4;
+	--color-accent2-500: #8b6bc2;
+	--color-accent2-600: #7652ab;
+	--color-accent2-700: #634391;
+	--color-accent2-800: #533978;
+	--color-accent2-900: #463162;
+	--color-accent2-950: #2c1c42;
+
+	/* Accent Tertiary - Teal (customers) */
+	--color-accent3-50: #f0fdfa;
+	--color-accent3-100: #ccfbf1;
+	--color-accent3-200: #99f6e4;
+	--color-accent3-300: #5eead4;
+	--color-accent3-400: #2dd4bf;
+	--color-accent3-500: #14b8a6;
+	--color-accent3-600: #0d9488;
+	--color-accent3-700: #0f766e;
+	--color-accent3-800: #115e59;
+	--color-accent3-900: #134e4a;
+	--color-accent3-950: #042f2e;
+
+	/* Accent Quaternary - Rose (profiles) */
+	--color-accent4-50: #fff1f2;
+	--color-accent4-100: #ffe4e6;
+	--color-accent4-200: #fecdd3;
+	--color-accent4-300: #fda4af;
+	--color-accent4-400: #fb7185;
+	--color-accent4-500: #f43f5e;
+	--color-accent4-600: #e11d48;
+	--color-accent4-700: #be123c;
+	--color-accent4-800: #9f1239;
+	--color-accent4-900: #881337;
+	--color-accent4-950: #4c0519;
+
+	/* Accent Quinary - Amber (specialty) */
+	--color-accent5-50: #fffbeb;
+	--color-accent5-100: #fef3c7;
+	--color-accent5-200: #fde68a;
+	--color-accent5-300: #fcd34d;
+	--color-accent5-400: #fbbf24;
+	--color-accent5-500: #f59e0b;
+	--color-accent5-600: #d97706;
+	--color-accent5-700: #b45309;
+	--color-accent5-800: #92400e;
+	--color-accent5-900: #78350f;
+	--color-accent5-950: #451a03;
+
+	/* Accent Senary - Indigo (invoices) */
+	--color-accent6-50: #eef2ff;
+	--color-accent6-100: #e0e7ff;
+	--color-accent6-200: #c7d2fe;
+	--color-accent6-300: #a5b4fc;
+	--color-accent6-400: #818cf8;
+	--color-accent6-500: #6366f1;
+	--color-accent6-600: #4f46e5;
+	--color-accent6-700: #4338ca;
+	--color-accent6-800: #3730a3;
+	--color-accent6-900: #312e81;
+	--color-accent6-950: #1e1b4b;
+
+	/* Accent Septenary - Cyan (calendar) */
+	--color-accent7-50: #ecfeff;
+	--color-accent7-100: #cffafe;
+	--color-accent7-200: #a5f3fc;
+	--color-accent7-300: #67e8f9;
+	--color-accent7-400: #22d3ee;
+	--color-accent7-500: #06b6d4;
+	--color-accent7-600: #0891b2;
+	--color-accent7-700: #0e7490;
+	--color-accent7-800: #155e75;
+	--color-accent7-900: #164e63;
+	--color-accent7-950: #083344;
+
+	/* Messages - Slate Blue (professional communication) */
+	--color-message-50: #f1f5f9;
+	--color-message-100: #e2e8f0;
+	--color-message-200: #cbd5e1;
+	--color-message-300: #94a3b8;
+	--color-message-400: #64748b;
+	--color-message-500: #475569;
+	--color-message-600: #334155;
+	--color-message-700: #1e293b;
+	--color-message-800: #0f172a;
+	--color-message-900: #020617;
+	--color-message-950: #010313;
+
+	/* Notifications - Coral/Salmon (attention-grabbing but warm) */
+	--color-notification-50: #fff5f5;
+	--color-notification-100: #ffe4e4;
+	--color-notification-200: #fecaca;
+	--color-notification-300: #fca5a5;
+	--color-notification-400: #f87171;
+	--color-notification-500: #ef5350;
+	--color-notification-600: #dc2626;
+	--color-notification-700: #b91c1c;
+	--color-notification-800: #991b1b;
+	--color-notification-900: #7f1d1d;
+	--color-notification-950: #450a0a;
+
+	/* Error/Alert - Red (muted/professional) */
+	--color-error-50: #fdf3f3;
+	--color-error-100: #fce4e4;
+	--color-error-200: #fbcdcd;
+	--color-error-300: #f6a8a8;
+	--color-error-400: #ee7676;
+	--color-error-500: #e14a4a;
+	--color-error-600: #cd2d2d;
+	--color-error-700: #ac2323;
+	--color-error-800: #8e2121;
+	--color-error-900: #772222;
+	--color-error-950: #400d0d;
+
+	/* Warning - Yellow (muted/professional) */
+	--color-warning-50: #fdfaeb;
+	--color-warning-100: #faf2c9;
+	--color-warning-200: #f5e394;
+	--color-warning-300: #efd05b;
+	--color-warning-400: #e8bb30;
+	--color-warning-500: #d8a01d;
+	--color-warning-600: #ba7c16;
+	--color-warning-700: #955916;
+	--color-warning-800: #7b4619;
+	--color-warning-900: #693a1a;
+	--color-warning-950: #3d1e0a;
+
+	/* Success - Green (distinct from secondary, muted) */
+	--color-success-50: #f0fdf2;
+	--color-success-100: #dcfce2;
+	--color-success-200: #bbf7c6;
+	--color-success-300: #86ef9b;
+	--color-success-400: #4ade6a;
+	--color-success-500: #22c546;
+	--color-success-600: #16a336;
+	--color-success-700: #16802e;
+	--color-success-800: #176528;
+	--color-success-900: #155324;
+	--color-success-950: #052e10;
+
+	/* Neutral/Surface colors for theming */
+	--color-surface-50: #f8fafc;
+	--color-surface-100: #f1f5f9;
+	--color-surface-200: #e2e8f0;
+	--color-surface-300: #cbd5e1;
+	--color-surface-400: #94a3b8;
+	--color-surface-500: #64748b;
+	--color-surface-600: #475569;
+	--color-surface-700: #334155;
+	--color-surface-800: #1e293b;
+	--color-surface-900: #0f172a;
+	--color-surface-950: #020617;
+}
+
+/* ============================================
+   LIGHT THEME (default)
+   ============================================ */
+:root {
+	color-scheme: light;
+
+	/* Background colors - subtle blue tint for softer appearance */
+	--theme-bg: var(--color-primary-50);
+	--theme-bg-secondary: #e8f0f8;
+	--theme-bg-tertiary: var(--color-primary-100);
+
+	/* Text colors */
+	--theme-text: var(--color-surface-900);
+	--theme-text-secondary: var(--color-surface-600);
+	--theme-text-muted: var(--color-surface-400);
+
+	/* Border colors */
+	--theme-border: var(--color-surface-200);
+	--theme-border-hover: var(--color-surface-300);
+
+	/* Interactive states */
+	--theme-hover: var(--color-primary-100);
+	--theme-active: var(--color-primary-200);
+
+	/* Shadows */
+	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+	/* Card/Panel backgrounds - subtle blue tint to match overall theme */
+	--theme-card: #f5f8fc;
+	--theme-card-hover: #edf2f9;
+}
+
+/* ============================================
+   DARK THEME
+   ============================================ */
+.dark {
+	color-scheme: dark;
+
+	/* Background colors */
+	--theme-bg: var(--color-surface-900);
+	--theme-bg-secondary: var(--color-surface-800);
+	--theme-bg-tertiary: var(--color-surface-700);
+
+	/* Text colors */
+	--theme-text: var(--color-surface-50);
+	--theme-text-secondary: var(--color-surface-300);
+	--theme-text-muted: var(--color-surface-500);
+
+	/* Border colors */
+	--theme-border: var(--color-surface-700);
+	--theme-border-hover: var(--color-surface-600);
+
+	/* Interactive states */
+	--theme-hover: var(--color-surface-800);
+	--theme-active: var(--color-surface-700);
+
+	/* Shadows (more subtle in dark mode) */
+	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+
+	/* Card/Panel backgrounds */
+	--theme-card: var(--color-surface-800);
+	--theme-card-hover: var(--color-surface-700);
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+html {
+	background-color: var(--theme-bg);
+	color: var(--theme-text);
+	transition:
+		background-color 0.2s ease,
+		color 0.2s ease;
+}
+
+body {
+	background-color: var(--theme-bg);
+	min-height: 100vh;
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+@utility bg-theme {
+	background-color: var(--theme-bg);
+}
+
+@utility bg-theme-secondary {
+	background-color: var(--theme-bg-secondary);
+}
+
+@utility bg-theme-tertiary {
+	background-color: var(--theme-bg-tertiary);
+}
+
+@utility bg-theme-card {
+	background-color: var(--theme-card);
+}
+
+@utility text-theme {
+	color: var(--theme-text);
+}
+
+@utility text-theme-secondary {
+	color: var(--theme-text-secondary);
+}
+
+@utility text-theme-muted {
+	color: var(--theme-text-muted);
+}
+
+@utility border-theme {
+	border-color: var(--theme-border);
+}
+
+@utility border-theme-hover {
+	border-color: var(--theme-border-hover);
+}
+
+@utility shadow-theme {
+	box-shadow: var(--theme-shadow);
+}
+
+@utility shadow-theme-md {
+	box-shadow: var(--theme-shadow-md);
+}
+
+@utility shadow-theme-lg {
+	box-shadow: var(--theme-shadow-lg);
+}
+
+/* ============================================
+   COMPONENT STYLES
+   ============================================ */
+
+/* Page Titles */
+@utility page-title {
+	@apply text-2xl font-bold md:text-3xl;
+	color: var(--theme-text);
+}
+
+@utility page-title-primary {
+	@apply text-3xl font-bold text-primary-500 sm:text-4xl;
+}
+
+@utility page-subtitle {
+	@apply mt-2;
+	color: var(--theme-text-secondary);
+}
+
+/* Section Headers */
+@utility section-title {
+	@apply text-xl font-semibold text-primary-500;
+}
+
+@utility section-title-accent {
+	@apply text-xl font-semibold text-accent-500;
+}
+
+/* Cards */
+@utility card {
+	@apply rounded-lg border;
+	border-color: var(--theme-border);
+	background-color: var(--theme-card);
+}
+
+@utility card-interactive {
+	@apply rounded-lg border transition-colors hover:border-primary-500/30 hover:bg-black/5 dark:hover:bg-white/5;
+	border-color: var(--theme-border);
+	background-color: var(--theme-card);
+}
+
+@utility card-padded {
+	@apply rounded-lg border p-6;
+	border-color: var(--theme-border);
+	background-color: var(--theme-card);
+}
+
+/* Empty State */
+@utility empty-state {
+	@apply rounded-lg border p-8 text-center;
+	border-color: var(--theme-border);
+	background-color: var(--theme-card);
+}
+
+@utility empty-state-icon {
+	@apply mx-auto mb-4 h-16 w-16;
+	color: var(--theme-text-muted);
+}
+
+@utility empty-state-title {
+	@apply mb-2 text-lg font-semibold;
+	color: var(--theme-text);
+}
+
+@utility empty-state-text {
+	@apply mx-auto max-w-md;
+	color: var(--theme-text-muted);
+}
+
+/* Badges/Tags */
+@utility badge {
+	@apply rounded px-2 py-0.5 text-xs font-semibold;
+}
+
+@utility badge-primary {
+	@apply rounded bg-primary-500/20 px-2 py-0.5 text-xs font-semibold text-primary-500;
+}
+
+@utility badge-secondary {
+	@apply rounded bg-secondary-500/20 px-2 py-0.5 text-xs font-semibold text-secondary-500;
+}
+
+@utility badge-accent {
+	@apply rounded bg-accent-500/20 px-2 py-0.5 text-xs font-semibold text-accent-500;
+}
+
+@utility badge-warning {
+	@apply rounded bg-amber-500/20 px-2 py-0.5 text-xs font-semibold text-amber-600 dark:text-amber-400;
+}
+
+@utility badge-success {
+	@apply rounded bg-success-500/20 px-2 py-0.5 text-xs font-semibold text-success-600 dark:text-success-400;
+}
+
+/* Detail Labels (for info cards) */
+@utility detail-label {
+	@apply mb-1 text-xs font-medium tracking-wide uppercase;
+	color: var(--theme-text-muted);
+}
+
+/* Back Links */
+@utility back-link {
+	@apply inline-flex items-center gap-2 text-primary-500 transition-colors hover:text-primary-600;
+}
+
+/* Buttons */
+@utility btn {
+	@apply inline-block rounded-lg px-4 py-2 font-medium transition-colors;
+}
+
+@utility btn-primary {
+	@apply inline-block rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 active:bg-primary-700;
+}
+
+@utility btn-accent {
+	@apply inline-block rounded-lg bg-accent-500 px-4 py-2 font-medium text-white transition-colors hover:bg-accent-600 active:bg-accent-700;
+}
+
+@utility btn-ghost {
+	@apply inline-block rounded-lg px-4 py-2 font-medium transition-colors hover:bg-black/5 dark:hover:bg-white/10;
+}
+
+/* Icon Buttons */
+@utility btn-icon {
+	@apply inline-flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
+}
+
+@utility btn-icon-sm {
+	@apply inline-flex items-center justify-center rounded-lg p-1.5 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
+}
+
+@utility btn-icon-xs {
+	@apply inline-flex items-center justify-center rounded p-1 transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
+}
+
+/* Form Layout */
+@utility form-section {
+	@apply space-y-6;
+}
+
+@utility form-fields {
+	@apply space-y-4;
+}
+
+/* Expandable Sections (for use with <details>) */
+@utility expandable-header {
+	@apply flex w-full cursor-pointer list-none items-center justify-between transition-opacity hover:opacity-80;
+}
+
+@utility expandable-chevron {
+	@apply h-5 w-5 flex-shrink-0 transition-transform group-open:rotate-180;
+}
+
+/* Scope/Area Styles */
+@utility scope-container {
+	@apply rounded-lg border border-accent-500/20 bg-gradient-to-br from-accent-500/5 to-accent-500/10 p-5 text-sm shadow-sm dark:from-accent-500/10 dark:to-accent-500/5;
+}
+
+@utility scope-title {
+	@apply text-base font-bold text-accent-700 dark:text-accent-300;
+}
+
+@utility area-container {
+	@apply rounded-r-md border-l-4 border-primary-500 py-2 pr-2 pl-4;
+	background-color: color-mix(in srgb, var(--theme-card) 40%, transparent);
+}
+
+@utility area-title {
+	@apply text-sm font-semibold text-primary-600 dark:text-primary-400;
+}
+
+@utility task-container {
+	@apply rounded-md border-l-2 border-surface-400/20 bg-black/5 p-3 dark:bg-white/5;
+}
+
+/* Schedule Day Badges */
+@utility schedule-day {
+	@apply rounded bg-primary-500/20 px-2 py-1 text-xs text-primary-500;
+}
+
+@utility schedule-day-weekend {
+	@apply rounded bg-accent-500/20 px-2 py-1 text-xs text-accent-500;
+}
+
+/* Contact Cards */
+@utility contact-name {
+	@apply font-medium;
+	color: var(--theme-text);
+}
+
+@utility contact-email {
+	@apply text-sm hover:text-primary-500;
+	color: var(--theme-text-secondary);
+}
+
+/* List Item Divider */
+@utility list-divider {
+	@apply border-b pb-4;
+	border-color: var(--theme-border);
+}
+
+/* Subtle Backgrounds */
+@utility bg-subtle {
+	@apply bg-black/5 dark:bg-white/5;
+}
+
+@utility bg-subtle-hover {
+	@apply hover:bg-black/5 dark:hover:bg-white/10;
+}
+
+@utility bg-subtle-active {
+	@apply active:bg-black/10 dark:active:bg-white/15;
+}
+
+/* Card Variants by Section */
+@utility card-account {
+	@apply card-padded card-interactive border-l-4 border-l-primary-500/50;
+}
+
+@utility card-service {
+	@apply card-padded card-interactive border-l-4 border-l-secondary-500/50;
+}
+
+@utility card-project {
+	@apply card-padded card-interactive border-l-4 border-l-accent-500/50;
+}
+
+@utility card-report {
+	@apply card-padded card-interactive border-l-4 border-l-accent2-500/50;
+}
+
+@utility card-customer {
+	@apply card-padded card-interactive border-l-4 border-l-accent3-500/50;
+}
+
+@utility card-profile {
+	@apply overflow-hidden card-padded card-interactive border-l-4 border-l-accent4-500/50;
+}
+
+@utility card-invoice {
+	@apply card-padded card-interactive border-l-4 border-l-accent6-500/50;
+}
+
+@utility card-specialty {
+	@apply card-padded card-interactive border-l-4 border-l-accent5-500/50;
+}
+
+@utility card-calendar {
+	@apply card-padded card-interactive border-l-4 border-l-accent7-500/50;
+}
+
+@utility card-message {
+	@apply card-padded card-interactive border-l-4 border-l-message-400/50;
+}
+
+@utility card-notification {
+	@apply card-padded card-interactive border-l-4 border-l-notification-500/50;
+}
+
+/* Section Header Variants */
+@utility section-header-primary {
+	@apply border-b border-primary-500/20 bg-primary-500/5;
+}
+
+@utility section-header-secondary {
+	@apply border-b border-secondary-500/20 bg-secondary-500/5;
+}
+
+@utility section-header-accent {
+	@apply border-b border-accent-500/20 bg-accent-500/5;
+}
+
+@utility section-header-accent2 {
+	@apply border-b border-accent2-500/20 bg-accent2-500/5;
+}
+
+@utility section-header-accent3 {
+	@apply border-b border-accent3-500/20 bg-accent3-500/5;
+}
+
+@utility section-header-accent4 {
+	@apply border-b border-accent4-500/20 bg-accent4-500/5;
+}
+
+@utility section-header-accent5 {
+	@apply border-b border-accent5-500/20 bg-accent5-500/5;
+}
+
+@utility section-header-accent6 {
+	@apply border-b border-accent6-500/20 bg-accent6-500/5;
+}
+
+@utility section-header-accent7 {
+	@apply border-b border-accent7-500/20 bg-accent7-500/5;
+}
+
+@utility section-header-message {
+	@apply border-b border-message-400/20 bg-message-400/5;
+}
+
+@utility section-header-notification {
+	@apply border-b border-notification-500/20 bg-notification-500/5;
+}
+
+/* ============================================
+   SEMANTIC STATE UTILITIES
+   ============================================ */
+
+/* Danger/Error States */
+@utility bg-danger {
+	@apply bg-error-50 dark:bg-error-900/20;
+}
+
+@utility text-danger {
+	@apply text-error-700 dark:text-error-400;
+}
+
+@utility border-danger {
+	@apply border-error-200 dark:border-error-800;
+}
+
+@utility danger-zone {
+	@apply rounded-lg border border-danger bg-danger p-6;
+}
+
+@utility danger-zone-title {
+	@apply mb-2 text-lg font-semibold text-danger;
+}
+
+@utility danger-zone-text {
+	@apply mb-4 text-sm text-error-600 dark:text-error-300;
+}
+
+@utility btn-danger {
+	@apply inline-block rounded-lg bg-error-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-error-700 active:bg-error-800;
+}
+
+/* Warning States */
+@utility bg-warning {
+	@apply bg-warning-50 dark:bg-warning-900/20;
+}
+
+@utility text-warning {
+	@apply text-warning-700 dark:text-warning-300;
+}
+
+@utility border-warning {
+	@apply border-warning-200 dark:border-warning-800;
+}
+
+@utility warning-box {
+	@apply rounded-xl border border-warning bg-warning p-6;
+}
+
+@utility warning-box-title {
+	@apply font-medium text-warning-800 dark:text-warning-200;
+}
+
+@utility warning-box-text {
+	@apply mt-1 text-sm text-warning-700 dark:text-warning-300;
+}
+
+@utility warning-box-icon {
+	@apply h-6 w-6 flex-shrink-0 text-warning-500;
+}
+
+/* Success States */
+@utility bg-success {
+	@apply bg-success-50 dark:bg-success-900/20;
+}
+
+@utility text-success {
+	@apply text-success-700 dark:text-success-400;
+}
+
+@utility border-success {
+	@apply border-success-200 dark:border-success-700;
+}
+
+@utility success-box {
+	@apply rounded-lg border border-success bg-success p-3;
+}
+
+@utility success-box-title {
+	@apply flex items-center gap-2 text-sm font-medium text-success-700 dark:text-success-400;
+}
+
+@utility success-box-text {
+	@apply mt-1 text-sm text-success-600 dark:text-success-300;
+}
+
+/* Info States */
+@utility bg-info {
+	@apply bg-primary-50 dark:bg-primary-900/20;
+}
+
+@utility text-info {
+	@apply text-primary-700 dark:text-primary-400;
+}
+
+@utility border-info {
+	@apply border-primary-200 dark:border-primary-800;
+}
+
+@utility info-box {
+	@apply rounded-lg border border-info bg-info p-3;
+}
+
+/* Neutral/Inactive States */
+@utility badge-neutral {
+	@apply rounded bg-surface-100 px-2 py-0.5 text-xs font-semibold text-surface-600 dark:bg-surface-700 dark:text-surface-300;
+}
+
+@utility badge-error {
+	@apply rounded bg-error-500/20 px-2 py-0.5 text-xs font-semibold text-error-600 dark:text-error-400;
+}
+
+/* Form Input Borders (for checkboxes, radios) */
+@utility border-input {
+	@apply border-surface-300 dark:border-surface-600;
+}
+
+/* Overlay Backgrounds */
+@utility bg-overlay {
+	@apply bg-black/50 dark:bg-black/70;
+}
+
+@utility bg-overlay-heavy {
+	@apply bg-black/80;
+}
+
+/* ============================================
+   FORM UTILITIES
+   ============================================ */
+
+/* Form input base - unifies input styling across all forms */
+@utility input-base {
+	@apply w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* Textarea base - same as input but allows resize */
+@utility textarea-base {
+	@apply w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* Select base */
+@utility select-base {
+	@apply w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* Form label */
+@utility form-label {
+	@apply mb-1.5 block text-sm font-medium text-theme;
+}
+
+/* Required indicator */
+@utility required-indicator {
+	@apply text-red-500;
+}
+
+/* Form button row */
+@utility form-actions {
+	@apply flex items-center gap-3 pt-4;
+}
+
+/* Submit button */
+@utility btn-submit {
+	@apply flex-1 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* Cancel button */
+@utility btn-cancel {
+	@apply rounded-lg border border-theme bg-theme px-4 py-2 font-medium text-theme transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10;
+}
+
+/* ============================================
+   ALERT UTILITIES
+   ============================================ */
+
+/* Error alert - replaces hardcoded red error boxes */
+@utility alert-error {
+	@apply rounded-lg border border-red-400 bg-red-50 p-3 text-sm text-red-700 dark:border-red-600 dark:bg-red-900/20 dark:text-red-400;
+}
+
+/* ============================================
+   INTERACTIVE STATE UTILITIES
+   ============================================ */
+
+/* Interactive hover/active - unifies hover states */
+@utility interactive {
+	@apply transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
+}
+
+/* Delete button hover state */
+@utility btn-delete-hover {
+	@apply transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20;
+}
+
+/* ============================================
+   MOBILE UTILITIES
+   ============================================ */
+
+/* Mobile FAB (Floating Action Button) */
+@utility fab-primary {
+	@apply fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-colors hover:bg-primary-600 sm:hidden;
+}
+
+/* ============================================
+   SEARCH UTILITIES
+   ============================================ */
+
+/* Search container */
+@utility search-container {
+	@apply relative;
+}
+
+/* Search icon positioning */
+@utility search-icon {
+	@apply pointer-events-none absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted;
+}
+
+/* Search input with icon space */
+@utility search-input {
+	@apply input-base bg-theme-card py-2 pr-4 pl-10;
+}
+
+/* ============================================
+   CHECKBOX/RADIO UTILITIES
+   ============================================ */
+
+/* Checkbox base */
+@utility checkbox-base {
+	@apply h-4 w-4 rounded border-surface-300 text-primary-500 focus:ring-primary-500 dark:border-surface-600;
+}
+
+/* Checkbox label */
+@utility checkbox-label {
+	@apply text-sm text-theme;
+}
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..39ad29f
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { auth } from '$lib/stores/auth.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Get user type from layout data
+	let user = $derived(data.user?.data?.me);
+	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
+	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
+
+	// Determine the correct dashboard based on user type
+	function getDefaultDashboard(): string {
+		if (isTeamMember) return '/team';
+		if (isCustomer) return '/customer';
+		return '/';
+	}
+
+	// Redirect authenticated users away from login page
+	$effect(() => {
+		if (auth.isAuthenticated && user) {
+			const returnTo = page.url.searchParams.get('return_to');
+			// If return_to is provided and is a valid internal route, use it
+			// Otherwise redirect to the appropriate dashboard
+			if (
+				returnTo &&
+				returnTo.startsWith('/') &&
+				!returnTo.startsWith('/login') &&
+				!returnTo.startsWith('/register')
+			) {
+				goto(returnTo);
+			} else {
+				goto(getDefaultDashboard());
+			}
+		}
+	});
+
+	// Redirect to Kratos login on mount
+	onMount(() => {
+		// If already authenticated, the effect above will handle redirect
+		if (auth.isAuthenticated) return;
+
+		const returnTo = page.url.searchParams.get('return_to');
+
+		// If no return_to param, use the referrer (where they came from)
+		if (!returnTo && document.referrer) {
+			try {
+				const referrerUrl = new URL(document.referrer);
+				const currentOrigin = window.location.origin;
+
+				// If they came from the same app, redirect back there
+				if (referrerUrl.origin === currentOrigin && referrerUrl.pathname !== '/login') {
+					auth.redirectToLogin(document.referrer);
+					return;
+				}
+			} catch (e) {
+				console.error('Invalid referrer URL:', e);
+			}
+		}
+
+		// Otherwise use the provided return_to or default to login callback
+		// We use /login as the return_to so the effect above can determine the right dashboard
+		auth.redirectToLogin(returnTo || `${window.location.origin}/login`);
+	});
+</script>
+
+<svelte:head>
+	<title>Sign In - Nexus</title>
+</svelte:head>
+
+<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
+	<div class="text-center">
+		<div class="mb-4 text-lg text-theme-secondary">Redirecting to login...</div>
+		<div
+			class="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary-500/30 border-t-primary-500"
+		></div>
+	</div>
+</section>
diff --git a/src/routes/logout/+page.svelte b/src/routes/logout/+page.svelte
new file mode 100644
index 0000000..9682837
--- /dev/null
+++ b/src/routes/logout/+page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { auth } from '$lib/stores/auth.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+
+	onMount(() => {
+		const returnTo = page.url.searchParams.get('return_to');
+		auth.logout(returnTo || window.location.origin);
+	});
+</script>
+
+<svelte:head>
+	<title>Signing Out - Nexus</title>
+</svelte:head>
+
+<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
+	<div class="text-center">
+		<div class="mb-4 text-lg text-theme-secondary">Signing out...</div>
+		<div
+			class="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary-500/30 border-t-primary-500"
+		></div>
+	</div>
+</section>
diff --git a/src/routes/messages/+page.server.ts b/src/routes/messages/+page.server.ts
new file mode 100644
index 0000000..da24641
--- /dev/null
+++ b/src/routes/messages/+page.server.ts
@@ -0,0 +1,22 @@
+import type { PageServerLoad } from './$types';
+import { GetMyConversationsStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { url, locals } = event;
+	const tab = url.searchParams.get('tab') ?? 'all';
+	const includeArchived = tab === 'archived';
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const result = await new GetMyConversationsStore().fetch({
+		...fetchParams,
+		variables: {
+			includeArchived,
+			first: 50
+		}
+	});
+
+	return {
+		conversations: result
+	};
+};
diff --git a/src/routes/messages/+page.svelte b/src/routes/messages/+page.svelte
new file mode 100644
index 0000000..d288448
--- /dev/null
+++ b/src/routes/messages/+page.svelte
@@ -0,0 +1,284 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { page } from '$app/state';
+	import { invalidateAll } from '$app/navigation';
+	import { formatDistanceToNow } from 'date-fns';
+	import TabFilter from '$lib/components/shared/TabFilter.svelte';
+	import {
+		getConversationTypeLabel,
+		getParticipantNames,
+		getLastMessagePreview,
+		getEntityDisplay,
+		deleteConversation,
+		archiveConversation
+	} from '$lib/utils/messages';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	let conversations = $derived(
+		data.conversations.data?.getMyConversations?.edges?.map((e) => e?.node).filter(Boolean) ?? []
+	);
+	let currentTab = $derived(page.url.searchParams.get('tab') ?? 'all');
+
+	// Lookups from parent layout
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Determine dashboard URL based on user type
+	let dashboardUrl = $derived(
+		data.user?.data?.me?.__typename === 'CustomerProfileType' ? '/customer' : '/team'
+	);
+
+	// Filter for unread tab (client-side)
+	let filteredConversations = $derived(
+		currentTab === 'unread' ? conversations.filter((c) => c && c.unreadCount > 0) : conversations
+	);
+
+	const tabs = [
+		{ id: 'all', label: 'All' },
+		{ id: 'unread', label: 'Unread', count: unreadCounts.messageCount },
+		{ id: 'archived', label: 'Archived' }
+	];
+
+	async function handleDelete(id: string, event: MouseEvent) {
+		event.stopPropagation();
+		event.preventDefault();
+		if (!confirm('Are you sure you want to delete this conversation?')) return;
+
+		try {
+			await deleteConversation(id);
+			unreadCounts.fetchCounts();
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to delete conversation:', error);
+		}
+	}
+
+	async function handleArchive(id: string, isArchived: boolean, event: MouseEvent) {
+		event.stopPropagation();
+		event.preventDefault();
+
+		try {
+			await archiveConversation(id, !isArchived);
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to archive conversation:', error);
+		}
+	}
+
+	function formatTime(dateString: string | null | undefined): string {
+		if (!dateString) return '';
+		try {
+			return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+		} catch {
+			return '';
+		}
+	}
+
+	function getTypeBadgeClass(type: string | null | undefined): string {
+		switch (type) {
+			case 'DIRECT':
+				return 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300';
+			case 'GROUP':
+				return 'bg-secondary-100 text-secondary-700 dark:bg-secondary-900/30 dark:text-secondary-300';
+			case 'SUPPORT':
+				return 'bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-300';
+			default:
+				return 'bg-black/5 text-theme-secondary dark:bg-white/10';
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Messages | Nexus</title>
+</svelte:head>
+
+<div class="mx-auto max-w-3xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-3">
+			<a href={dashboardUrl} class="rounded-lg interactive p-2" aria-label="Go to dashboard">
+				<svg
+					class="h-5 w-5 text-theme-secondary"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</a>
+			<h1 class="text-xl font-semibold text-theme">Messages</h1>
+		</div>
+
+		<a
+			href="/messages/new"
+			class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
+		>
+			<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			New
+		</a>
+	</div>
+
+	<!-- Tabs -->
+	<div class="mb-6">
+		<TabFilter {tabs} />
+	</div>
+
+	<!-- Conversations List -->
+	{#if filteredConversations.length === 0}
+		<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+			<svg
+				class="mx-auto mb-4 h-12 w-12 text-theme-muted"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+				/>
+			</svg>
+			<p class="mb-4 text-theme-secondary">
+				{#if currentTab === 'unread'}
+					No unread messages
+				{:else if currentTab === 'archived'}
+					No archived conversations
+				{:else}
+					No conversations yet
+				{/if}
+			</p>
+			{#if currentTab !== 'archived'}
+				<a
+					href="/messages/new"
+					class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
+				>
+					Start a Conversation
+				</a>
+			{/if}
+		</div>
+	{:else}
+		<div class="space-y-3">
+			{#each filteredConversations as conversation (conversation?.id)}
+				{@const entityDisplay = getEntityDisplay(conversation?.entity, {
+					accountLookup,
+					customerLookup
+				})}
+				<a href="/messages/{conversation?.id}" class="group block card-message">
+					<div class="flex items-start gap-3">
+						<!-- Unread indicator -->
+						<div class="mt-1.5 flex-shrink-0">
+							{#if conversation && conversation.unreadCount > 0}
+								<span
+									class="flex h-5 min-w-5 items-center justify-center rounded-full bg-message-500 px-1 text-xs font-semibold text-white"
+								>
+									{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}
+								</span>
+							{:else}
+								<span class="block h-5 w-5"></span>
+							{/if}
+						</div>
+
+						<div class="min-w-0 flex-1">
+							<!-- Top row: type badge and time -->
+							<div class="mb-1 flex items-center justify-between gap-2">
+								<span
+									class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {getTypeBadgeClass(
+										conversation?.conversationType
+									)}"
+								>
+									{getConversationTypeLabel(conversation?.conversationType)}
+								</span>
+								<span class="flex-shrink-0 text-xs text-theme-muted">
+									{formatTime(conversation?.lastMessageAt)}
+								</span>
+							</div>
+
+							<!-- Entity info (if present) -->
+							{#if entityDisplay}
+								<p class="mb-1 text-xs text-theme-secondary">
+									{entityDisplay.type}: {entityDisplay.name}
+								</p>
+							{/if}
+
+							<!-- Subject -->
+							<h3
+								class="mb-1 font-medium text-theme {conversation && conversation.unreadCount > 0
+									? 'font-semibold'
+									: ''}"
+							>
+								{conversation?.subject || 'No subject'}
+							</h3>
+
+							<!-- Last message preview -->
+							<p class="mb-2 line-clamp-1 text-sm text-theme-secondary">
+								{getLastMessagePreview(conversation?.messages, 80)}
+							</p>
+
+							<!-- Participants -->
+							<p class="text-xs text-theme-muted">
+								{getParticipantNames(conversation?.participants, undefined, 3)}
+							</p>
+						</div>
+
+						<!-- Archive button -->
+						<button
+							onclick={(e) => handleArchive(conversation.id, conversation.isArchived, e)}
+							class="flex-shrink-0 rounded-lg p-1.5 text-theme-muted transition-all hover:bg-black/10 hover:text-theme-secondary dark:hover:bg-white/10"
+							aria-label={conversation?.isArchived
+								? 'Unarchive conversation'
+								: 'Archive conversation'}
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+								/>
+							</svg>
+						</button>
+
+						<!-- Delete button (only if canDelete) -->
+						{#if conversation?.canDelete}
+							<button
+								onclick={(e) => handleDelete(conversation.id, e)}
+								class="flex-shrink-0 rounded-lg p-1.5 text-theme-muted transition-all hover:bg-error-100 hover:text-error-600 dark:hover:bg-error-900/30 dark:hover:text-error-400"
+								aria-label="Delete conversation"
+							>
+								<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+									/>
+								</svg>
+							</button>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<!-- Mobile FAB -->
+<a
+	href="/messages/new"
+	class="fixed right-4 bottom-20 z-30 flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-white shadow-lg transition-transform hover:scale-105 hover:bg-primary-700 sm:hidden"
+	aria-label="New conversation"
+>
+	<svg class="h-6 w-6" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+	</svg>
+</a>
diff --git a/src/routes/messages/[conversation]/+page.server.ts b/src/routes/messages/[conversation]/+page.server.ts
new file mode 100644
index 0000000..318b8e0
--- /dev/null
+++ b/src/routes/messages/[conversation]/+page.server.ts
@@ -0,0 +1,21 @@
+import type { PageServerLoad } from './$types';
+import { GetConversationStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals } = event;
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const result = await new GetConversationStore().fetch({
+		...fetchParams,
+		variables: {
+			id: params.conversation,
+			messageLimit: 100,
+			messageOffset: 0
+		}
+	});
+
+	return {
+		conversation: result
+	};
+};
diff --git a/src/routes/messages/[conversation]/+page.svelte b/src/routes/messages/[conversation]/+page.svelte
new file mode 100644
index 0000000..c67738f
--- /dev/null
+++ b/src/routes/messages/[conversation]/+page.svelte
@@ -0,0 +1,479 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { LayoutData } from '../../$types';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { format, isSameDay, isToday, isYesterday } from 'date-fns';
+	import {
+		sendMessage,
+		deleteMessage,
+		markAsRead,
+		archiveConversation,
+		muteConversation,
+		deleteConversation,
+		getSenderName,
+		getSenderId,
+		getConversationTypeLabel,
+		getEntityDisplay
+	} from '$lib/utils/messages';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
+
+	interface Props {
+		data: PageData & {
+			user?: LayoutData['user'];
+			accountLookup?: LayoutData['accountLookup'];
+			customerLookup?: LayoutData['customerLookup'];
+		};
+	}
+
+	let { data }: Props = $props();
+
+	let conversation = $derived(data.conversation.data?.conversation);
+	let messages = $derived(conversation?.messages ?? []);
+	let currentUserId = $derived(data.user?.data?.me?.id ?? '');
+
+	// Determine user type for entity links
+	let userType = $derived<'team' | 'customer'>(
+		data.user?.data?.me?.__typename === 'CustomerProfileType' ? 'customer' : 'team'
+	);
+
+	// Lookups from parent layout
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	let messageInput = $state('');
+	let isSending = $state(false);
+	let actionsOpen = $state(false);
+	let messagesContainer = $state<HTMLDivElement | null>(null);
+
+	// Mark as read on mount
+	$effect(() => {
+		if (conversation && conversation.unreadCount > 0) {
+			markAsRead(conversation.id)
+				.then(() => {
+					unreadCounts.decrementMessages(conversation!.unreadCount);
+				})
+				.catch(console.error);
+		}
+	});
+
+	// Scroll to bottom on new messages
+	$effect(() => {
+		if (messages.length > 0 && messagesContainer) {
+			setTimeout(() => {
+				messagesContainer?.scrollTo({ top: messagesContainer.scrollHeight, behavior: 'smooth' });
+			}, 100);
+		}
+	});
+
+	async function handleSend() {
+		if (!conversation || !messageInput.trim() || isSending) return;
+
+		isSending = true;
+		try {
+			await sendMessage({
+				conversationId: conversation.id,
+				body: messageInput.trim()
+			});
+			messageInput = '';
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to send message:', error);
+		} finally {
+			isSending = false;
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSend();
+		}
+	}
+
+	async function handleDeleteMessage(id: string) {
+		if (!confirm('Delete this message?')) return;
+
+		try {
+			await deleteMessage(id);
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to delete message:', error);
+		}
+	}
+
+	async function handleArchive() {
+		if (!conversation) return;
+		actionsOpen = false;
+
+		try {
+			await archiveConversation(conversation.id, !conversation.isArchived);
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to archive conversation:', error);
+		}
+	}
+
+	async function handleMute() {
+		if (!conversation) return;
+		actionsOpen = false;
+
+		// Get current muted state from participant
+		const myParticipant = conversation.participants?.find((p) => {
+			const id = p?.participant?.teamProfile?.id ?? p?.participant?.customerProfile?.id;
+			return id === currentUserId;
+		});
+		const isMuted = myParticipant?.isMuted ?? false;
+
+		try {
+			await muteConversation(conversation.id, !isMuted);
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to mute conversation:', error);
+		}
+	}
+
+	async function handleDelete() {
+		if (!conversation) return;
+		if (!confirm('Are you sure you want to delete this conversation? This cannot be undone.'))
+			return;
+		actionsOpen = false;
+
+		try {
+			await deleteConversation(conversation.id);
+			unreadCounts.fetchCounts();
+			goto('/messages');
+		} catch (error) {
+			console.error('Failed to delete conversation:', error);
+		}
+	}
+
+	function formatMessageTime(dateString: string): string {
+		try {
+			return format(new Date(dateString), 'h:mm a');
+		} catch {
+			return '';
+		}
+	}
+
+	function formatDateSeparator(dateString: string): string {
+		try {
+			const date = new Date(dateString);
+			if (isToday(date)) return 'Today';
+			if (isYesterday(date)) return 'Yesterday';
+			return format(date, 'MMMM d, yyyy');
+		} catch {
+			return '';
+		}
+	}
+
+	function shouldShowDateSeparator(index: number): boolean {
+		if (index === 0) return true;
+		const currentMsg = messages[index];
+		const prevMsg = messages[index - 1];
+		if (!currentMsg?.createdAt || !prevMsg?.createdAt) return false;
+		return !isSameDay(new Date(currentMsg.createdAt), new Date(prevMsg.createdAt));
+	}
+
+	function isOwnMessage(senderId: string | null): boolean {
+		return senderId === currentUserId;
+	}
+
+	function goBack() {
+		goto('/messages');
+	}
+
+	let entityDisplay = $derived(
+		conversation
+			? getEntityDisplay(conversation.entity, { accountLookup, customerLookup, userType })
+			: null
+	);
+	let myParticipant = $derived(
+		conversation?.participants?.find((p) => {
+			const id = p?.participant?.teamProfile?.id ?? p?.participant?.customerProfile?.id;
+			return id === currentUserId;
+		})
+	);
+	let isMuted = $derived(myParticipant?.isMuted ?? false);
+</script>
+
+<svelte:head>
+	<title>{conversation?.subject ?? 'Conversation'} | Nexus</title>
+</svelte:head>
+
+<div class="flex h-[calc(100vh-3.5rem)] flex-col">
+	<!-- Header -->
+	<div class="flex items-center justify-between border-b border-theme bg-theme-card px-4 py-3">
+		<div class="flex min-w-0 items-center gap-3">
+			<button
+				onclick={goBack}
+				class="flex-shrink-0 rounded-lg interactive p-2"
+				aria-label="Go back"
+			>
+				<svg
+					class="h-5 w-5 text-theme-secondary"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</button>
+			<div class="min-w-0">
+				<h1 class="truncate text-lg font-semibold text-theme">
+					{conversation?.subject || 'Conversation'}
+				</h1>
+				<p class="truncate text-xs text-theme-muted">
+					{getConversationTypeLabel(conversation?.conversationType)}
+					{#if entityDisplay}
+						·
+						{#if entityDisplay.link}
+							<a
+								href={entityDisplay.link}
+								class="text-primary-600 hover:underline dark:text-primary-400"
+							>
+								{entityDisplay.type}: {entityDisplay.name}
+							</a>
+						{:else}
+							{entityDisplay.type}: {entityDisplay.name}
+						{/if}
+					{/if}
+				</p>
+			</div>
+		</div>
+
+		<!-- Actions dropdown -->
+		<div class="relative">
+			<button
+				onclick={() => (actionsOpen = !actionsOpen)}
+				class="rounded-lg interactive p-2"
+				aria-label="More actions"
+			>
+				<svg
+					class="h-5 w-5 text-theme-secondary"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+					/>
+				</svg>
+			</button>
+
+			{#if actionsOpen}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="fixed inset-0 z-40"
+					onclick={() => (actionsOpen = false)}
+					onkeydown={(e) => e.key === 'Escape' && (actionsOpen = false)}
+				></div>
+				<div
+					class="absolute top-full right-0 z-50 mt-1 w-48 overflow-hidden rounded-lg border border-theme bg-theme-card shadow-theme-lg"
+				>
+					<button
+						onclick={handleMute}
+						class="flex w-full items-center gap-2 interactive px-4 py-2.5 text-sm text-theme-secondary"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							{#if isMuted}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15.536 8.464a5 5 0 010 7.072M12 6v12m0 0l-4-4m4 4l4-4"
+								/>
+							{:else}
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"
+								/>
+							{/if}
+						</svg>
+						{isMuted ? 'Unmute' : 'Mute'}
+					</button>
+					<button
+						onclick={handleArchive}
+						class="flex w-full items-center gap-2 interactive px-4 py-2.5 text-sm text-theme-secondary"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+							/>
+						</svg>
+						{conversation?.isArchived ? 'Unarchive' : 'Archive'}
+					</button>
+					{#if conversation?.canDelete}
+						<button
+							onclick={handleDelete}
+							class="flex w-full items-center gap-2 px-4 py-2.5 text-sm text-error-600 transition-colors hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-900/20"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+								/>
+							</svg>
+							Delete
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Messages -->
+	<div bind:this={messagesContainer} class="flex-1 overflow-y-auto px-4 py-4">
+		{#if !conversation}
+			<div class="flex h-full items-center justify-center">
+				<p class="text-theme-muted">Conversation not found</p>
+			</div>
+		{:else if messages.length === 0}
+			<div class="flex h-full items-center justify-center">
+				<p class="text-theme-muted">No messages yet. Start the conversation!</p>
+			</div>
+		{:else}
+			<div class="mx-auto max-w-2xl space-y-4">
+				{#each messages as message, index (message.id)}
+					{@const senderId = getSenderId(message.sender)}
+					{@const isOwn = isOwnMessage(senderId)}
+
+					<!-- Date separator -->
+					{#if shouldShowDateSeparator(index)}
+						<div class="flex items-center justify-center py-2">
+							<span
+								class="rounded-full bg-black/5 px-3 py-1 text-xs font-medium text-theme-muted dark:bg-white/10"
+							>
+								{formatDateSeparator(message.createdAt)}
+							</span>
+						</div>
+					{/if}
+
+					<!-- Message bubble -->
+					<div class="group flex {isOwn ? 'justify-end' : 'justify-start'}">
+						<div class="max-w-[80%] {isOwn ? 'items-end' : 'items-start'}">
+							<!-- Sender name (for received messages) -->
+							{#if !isOwn && !message.isSystemMessage}
+								<p class="mb-1 px-3 text-xs font-medium text-theme-muted">
+									{getSenderName(message.sender)}
+								</p>
+							{/if}
+
+							<div class="flex items-end gap-2 {isOwn ? 'flex-row-reverse' : ''}">
+								<!-- Bubble -->
+								<div
+									class="rounded-2xl px-4 py-2 {isOwn
+										? 'rounded-br-md bg-primary-600 text-white'
+										: message.isSystemMessage
+											? 'bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-200'
+											: 'rounded-bl-md bg-black/5 text-theme dark:bg-white/10'}"
+								>
+									{#if message.replyTo}
+										<div class="mb-2 border-l-2 border-current/30 pl-2 text-xs opacity-70">
+											<span class="font-medium">{getSenderName(message.replyTo.sender)}</span>
+											<p class="line-clamp-1">{message.replyTo.body}</p>
+										</div>
+									{/if}
+									<p class="break-words whitespace-pre-wrap">{message.body}</p>
+								</div>
+
+								<!-- Delete button (own messages only) -->
+								{#if message.canDelete}
+									<button
+										onclick={() => handleDeleteMessage(message.id)}
+										class="flex-shrink-0 rounded-lg p-1 text-theme-muted opacity-0 transition-all group-hover:opacity-100 hover:bg-error-100 hover:text-error-600 dark:hover:bg-error-900/30"
+										aria-label="Delete message"
+									>
+										<svg
+											class="h-3.5 w-3.5"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</div>
+
+							<!-- Time -->
+							<p class="mt-1 px-3 text-xs text-theme-muted {isOwn ? 'text-right' : ''}">
+								{formatMessageTime(message.createdAt)}
+							</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Message input -->
+	<div class="border-t border-theme bg-theme-card p-4">
+		<div class="mx-auto max-w-2xl">
+			<div class="flex items-end gap-2">
+				<textarea
+					bind:value={messageInput}
+					onkeydown={handleKeyDown}
+					placeholder="Type a message..."
+					rows="1"
+					class="flex-1 resize-none rounded-xl border border-theme bg-theme px-4 py-3 text-sm text-theme transition-all outline-none placeholder:text-theme-muted focus:border-primary-500"
+				></textarea>
+				<button
+					onclick={handleSend}
+					disabled={!messageInput.trim() || isSending}
+					class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-primary-600 text-white transition-colors hover:bg-primary-700 disabled:opacity-50"
+					aria-label="Send message"
+				>
+					{#if isSending}
+						<svg
+							class="h-5 w-5 animate-spin"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<circle class="opacity-25" cx="12" cy="12" r="10" stroke-width="4"></circle>
+							<path
+								class="opacity-75"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					{:else}
+						<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+							/>
+						</svg>
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/messages/new/+page.server.ts b/src/routes/messages/new/+page.server.ts
new file mode 100644
index 0000000..11a4303
--- /dev/null
+++ b/src/routes/messages/new/+page.server.ts
@@ -0,0 +1,27 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { url } = event;
+
+	// Get entity info from query params if provided
+	const entityType = url.searchParams.get('entityType');
+	const entityId = url.searchParams.get('entityId');
+
+	// Get pre-fill params for messaging from service/project pages
+	const participantIdsParam = url.searchParams.get('participantIds');
+	const conversationType = url.searchParams.get('conversationType');
+	const subject = url.searchParams.get('subject');
+
+	// Parse comma-separated participant IDs
+	const participantIds = participantIdsParam
+		? participantIdsParam.split(',').filter((id) => id.trim())
+		: [];
+
+	return {
+		entityType,
+		entityId,
+		participantIds,
+		conversationType,
+		subject
+	};
+};
diff --git a/src/routes/messages/new/+page.svelte b/src/routes/messages/new/+page.svelte
new file mode 100644
index 0000000..e67bc60
--- /dev/null
+++ b/src/routes/messages/new/+page.svelte
@@ -0,0 +1,556 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { LayoutData } from '../../$types';
+	import { goto } from '$app/navigation';
+	import { createConversation, sendMessage } from '$lib/utils/messages';
+	import { formatDate } from '$lib/utils/date';
+	import type { CustomerAccountInfo } from '../../customer/+layout.server';
+
+	// Service/Project types from customer data
+	interface CustomerService {
+		id: string;
+		date: string;
+		status: string;
+		accountAddressId?: string | null;
+	}
+
+	interface CustomerProject {
+		id: string;
+		name: string;
+		date: string;
+		status: string;
+	}
+
+	interface CustomerAccount {
+		id: string;
+		name: string;
+	}
+
+	interface Props {
+		data: PageData & {
+			user?: LayoutData['user'];
+			team?: LayoutData['team'];
+			teamMemberLookup?: LayoutData['teamMemberLookup'];
+			// Customer-specific data from customer layout
+			accounts?: { data?: { accounts?: CustomerAccount[] } };
+			services?: {
+				upcoming?: { data?: { services?: CustomerService[] } };
+				completed?: { data?: { services?: CustomerService[] } };
+			};
+			projects?: {
+				upcoming?: { data?: { projects?: CustomerProject[] } };
+				completed?: { data?: { projects?: CustomerProject[] } };
+			};
+			customerAccountLookup?: Record<string, CustomerAccountInfo>;
+		};
+	}
+
+	let { data }: Props = $props();
+
+	// Get user type from layout data
+	let user = $derived(data.user?.data?.me);
+	let isCustomer = $derived(user?.__typename === 'CustomerProfileType');
+
+	// Team member lookup for displaying names (uses UUIDs)
+	let teamMemberLookup = $derived(data.teamMemberLookup ?? new Map());
+
+	// Find the admin profile (Nexus Dispatch) for support message routing
+	let adminProfile = $derived(
+		data.team?.data?.teamProfiles?.find((p) => p.role === 'ADMIN') ?? null
+	);
+
+	// Customer data for entity selection
+	let customerAccounts = $derived(data.accounts?.data?.accounts ?? []);
+	let customerAccountLookup = $derived(data.customerAccountLookup ?? {});
+	let customerServices = $derived([
+		...(data.services?.upcoming?.data?.services ?? []),
+		...(data.services?.completed?.data?.services ?? [])
+	]);
+	let customerProjects = $derived([
+		...(data.projects?.upcoming?.data?.projects ?? []),
+		...(data.projects?.completed?.data?.projects ?? [])
+	]);
+
+	// Check if this is a pre-filled message from a service/project page
+	let isEntityLinked = $derived(!!data.entityType && !!data.entityId);
+	let subjectPrefix = $derived(data.subject ?? '');
+
+	// Form state
+	let subjectSuffix = $state('');
+	let subject = $state(data.subject ?? '');
+	let conversationType = $state(
+		data.conversationType ??
+			(data.user?.data?.me?.__typename === 'CustomerProfileType' ? 'SUPPORT' : 'DIRECT')
+	);
+	let participantInput = $state('');
+	let participantIds = $state<string[]>(data.participantIds ?? []);
+	let entityType = $state(data.entityType ?? '');
+	let entityId = $state(data.entityId ?? '');
+	let customerEntitySelection = $state(''); // Combined "Type:Id" for customer dropdown
+	let initialMessage = $state('');
+	let isSubmitting = $state(false);
+	let error = $state('');
+
+	// Build entity options for customer dropdown
+	interface EntityOption {
+		value: string; // "Type:Id"
+		label: string;
+		group: string;
+	}
+
+	let customerEntityOptions = $derived.by((): EntityOption[] => {
+		const options: EntityOption[] = [];
+
+		// Add accounts
+		for (const account of customerAccounts) {
+			options.push({
+				value: `Account:${account.id}`,
+				label: account.name,
+				group: 'Accounts'
+			});
+		}
+
+		// Add services (upcoming first, then completed)
+		for (const service of customerServices) {
+			const accountInfo = service.accountAddressId
+				? customerAccountLookup[service.accountAddressId]
+				: null;
+			const dateStr = formatDate(service.date) || 'Unknown date';
+			const accountName = accountInfo?.name ?? 'Service';
+			const status = service.status === 'COMPLETED' ? ' (Completed)' : '';
+			options.push({
+				value: `Service:${service.id}`,
+				label: `${dateStr} - ${accountName}${status}`,
+				group: 'Services'
+			});
+		}
+
+		// Add projects
+		for (const project of customerProjects) {
+			const dateStr = formatDate(project.date) || '';
+			const status = project.status === 'COMPLETED' ? ' (Completed)' : '';
+			const parts = [dateStr, project.name].filter(Boolean);
+			options.push({
+				value: `Project:${project.id}`,
+				label: `${parts.join(' - ')}${status}`,
+				group: 'Projects'
+			});
+		}
+
+		return options;
+	});
+
+	// Parse customer entity selection into type and id
+	$effect(() => {
+		if (customerEntitySelection) {
+			const [type, id] = customerEntitySelection.split(':');
+			entityType = type;
+			entityId = id;
+		} else {
+			entityType = '';
+			entityId = '';
+		}
+	});
+
+	// Build full subject from prefix + suffix when entity is linked
+	let fullSubject = $derived(
+		isEntityLinked
+			? subjectSuffix.trim()
+				? `${subjectPrefix} - ${subjectSuffix.trim()}`
+				: subjectPrefix
+			: subject
+	);
+
+	// Lock participants if provided via URL params (pre-selected from service/project page)
+	let participantsLocked = $derived(data.participantIds && data.participantIds.length > 0);
+
+	// Conversation types available based on user role
+	let availableTypes = $derived(
+		isCustomer
+			? [{ value: 'SUPPORT', label: 'Support Request' }]
+			: [
+					{ value: 'DIRECT', label: 'Direct Message' },
+					{ value: 'GROUP', label: 'Group Conversation' },
+					{ value: 'SUPPORT', label: 'Support' }
+				]
+	);
+
+	// Look up participant name from team member lookup (UUID) or team profiles (Global ID)
+	function getParticipantName(id: string): string {
+		// First try the UUID-based lookup
+		const member = teamMemberLookup.get(id);
+		if (member) return member.fullName;
+
+		// Then try to find by Global ID in team profiles
+		const profile = data.team?.data?.teamProfiles?.find((p) => p.id === id);
+		if (profile) return profile.fullName ?? id;
+
+		return id;
+	}
+
+	async function handleSubmit() {
+		error = '';
+
+		// Validation
+		if (!fullSubject.trim()) {
+			error = 'Subject is required';
+			return;
+		}
+
+		if (participantIds.length === 0 && conversationType !== 'SUPPORT') {
+			error = 'At least one participant is required';
+			return;
+		}
+
+		isSubmitting = true;
+
+		try {
+			// For SUPPORT conversations, automatically add admin (Nexus Dispatch) as participant
+			let finalParticipantIds = [...participantIds];
+			if (conversationType === 'SUPPORT' && adminProfile) {
+				// adminProfile.id is already a Global ID from the GraphQL query
+				// createConversation will handle any necessary conversions
+				if (!finalParticipantIds.includes(adminProfile.id)) {
+					finalParticipantIds.push(adminProfile.id);
+				}
+			}
+
+			// Create conversation
+			const conversation = await createConversation({
+				subject: fullSubject.trim(),
+				conversationType,
+				participantIds: finalParticipantIds,
+				entityType: entityType || undefined,
+				entityId: entityId || undefined
+			});
+
+			if (!conversation) {
+				error = 'Failed to create conversation';
+				return;
+			}
+
+			// Send initial message if provided
+			if (initialMessage.trim()) {
+				await sendMessage({
+					conversationId: conversation.id,
+					body: initialMessage.trim()
+				});
+			}
+
+			// Navigate to the new conversation
+			goto(`/messages/${conversation.id}`);
+		} catch (err) {
+			console.error('Failed to create conversation:', err);
+			error = err instanceof Error ? err.message : 'Failed to create conversation';
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function addParticipant() {
+		const id = participantInput.trim();
+		if (id && !participantIds.includes(id)) {
+			participantIds = [...participantIds, id];
+			participantInput = '';
+		}
+	}
+
+	function removeParticipant(id: string) {
+		participantIds = participantIds.filter((p) => p !== id);
+	}
+
+	function handleParticipantKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			addParticipant();
+		}
+	}
+
+	function goBack() {
+		goto('/messages');
+	}
+</script>
+
+<svelte:head>
+	<title>New Conversation | Nexus</title>
+</svelte:head>
+
+<div class="mx-auto max-w-2xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center gap-3">
+		<button onclick={goBack} class="rounded-lg interactive p-2" aria-label="Go back">
+			<svg
+				class="h-5 w-5 text-theme-secondary"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+		</button>
+		<h1 class="text-xl font-semibold text-theme">New Conversation</h1>
+	</div>
+
+	<!-- Form -->
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSubmit();
+		}}
+		class="space-y-6"
+	>
+		<!-- Error message -->
+		{#if error}
+			<div
+				class="rounded-lg bg-error-50 p-4 text-sm text-error-700 dark:bg-error-900/20 dark:text-error-300"
+			>
+				{error}
+			</div>
+		{/if}
+
+		<!-- Conversation Type -->
+		{#if !isCustomer}
+			<div>
+				<label for="type" class="mb-2 block text-sm font-medium text-theme">Conversation Type</label
+				>
+				<select
+					id="type"
+					bind:value={conversationType}
+					class="w-full rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none focus:border-primary-500"
+				>
+					{#each availableTypes as type (type.value)}
+						<option value={type.value}>{type.label}</option>
+					{/each}
+				</select>
+			</div>
+		{:else}
+			<div class="rounded-lg bg-primary-50 p-4 dark:bg-primary-900/20">
+				<div class="flex items-center gap-2 text-sm text-primary-700 dark:text-primary-300">
+					<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+						/>
+					</svg>
+					<span
+						>Your message will be sent to <strong>{adminProfile?.fullName ?? 'Support'}</strong
+						></span
+					>
+				</div>
+			</div>
+
+			<!-- Customer entity selection -->
+			{#if customerEntityOptions.length > 0}
+				<div>
+					<label for="customerEntity" class="mb-2 block text-sm font-medium text-theme">
+						Regarding
+						<span class="font-normal text-theme-muted">(optional)</span>
+					</label>
+					<select
+						id="customerEntity"
+						bind:value={customerEntitySelection}
+						class="w-full rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none focus:border-primary-500"
+					>
+						<option value="">General inquiry</option>
+						{#if customerAccounts.length > 0}
+							<optgroup label="Accounts">
+								{#each customerEntityOptions.filter((o) => o.group === 'Accounts') as option (option.value)}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</optgroup>
+						{/if}
+						{#if customerServices.length > 0}
+							<optgroup label="Services">
+								{#each customerEntityOptions.filter((o) => o.group === 'Services') as option (option.value)}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</optgroup>
+						{/if}
+						{#if customerProjects.length > 0}
+							<optgroup label="Projects">
+								{#each customerEntityOptions.filter((o) => o.group === 'Projects') as option (option.value)}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</optgroup>
+						{/if}
+					</select>
+				</div>
+			{/if}
+		{/if}
+
+		<!-- Subject -->
+		<div>
+			<label for="subject" class="mb-2 block text-sm font-medium text-theme">Subject</label>
+			{#if isEntityLinked}
+				<!-- Locked prefix with editable suffix -->
+				<div class="space-y-2">
+					<div
+						class="rounded-lg border border-theme bg-black/5 px-4 py-2.5 text-sm text-theme dark:bg-white/5"
+					>
+						{subjectPrefix}
+					</div>
+					<input
+						id="subject"
+						type="text"
+						bind:value={subjectSuffix}
+						placeholder="Add additional context (optional)..."
+						class="w-full rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none placeholder:text-theme-muted focus:border-primary-500"
+					/>
+				</div>
+			{:else}
+				<input
+					id="subject"
+					type="text"
+					bind:value={subject}
+					placeholder="What's this conversation about?"
+					class="w-full rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none placeholder:text-theme-muted focus:border-primary-500"
+				/>
+			{/if}
+		</div>
+
+		<!-- Participants (not for customers) -->
+		{#if !isCustomer}
+			<div>
+				<label for="participants" class="mb-2 block text-sm font-medium text-theme">
+					{#if participantsLocked}
+						To
+					{:else}
+						Participants
+						{#if conversationType === 'DIRECT'}
+							<span class="font-normal text-theme-muted">(Enter recipient ID)</span>
+						{:else if conversationType === 'GROUP'}
+							<span class="font-normal text-theme-muted">(Add multiple participants)</span>
+						{/if}
+					{/if}
+				</label>
+
+				{#if !participantsLocked}
+					<div class="flex gap-2">
+						<input
+							id="participants"
+							type="text"
+							bind:value={participantInput}
+							onkeydown={handleParticipantKeyDown}
+							placeholder="Enter participant ID..."
+							class="flex-1 rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none placeholder:text-theme-muted focus:border-primary-500"
+						/>
+						<button
+							type="button"
+							onclick={addParticipant}
+							class="rounded-lg bg-black/5 px-4 py-2.5 text-sm font-medium text-theme-secondary transition-colors hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/15"
+						>
+							Add
+						</button>
+					</div>
+				{/if}
+
+				{#if participantIds.length > 0}
+					<div class="mt-3 flex flex-wrap gap-2">
+						{#each participantIds as id (id)}
+							<span
+								class="inline-flex items-center gap-1 rounded-full bg-primary-100 px-3 py-1 text-sm text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+							>
+								{getParticipantName(id)}
+								{#if !participantsLocked}
+									<button
+										type="button"
+										onclick={() => removeParticipant(id)}
+										class="ml-1 rounded-full p-0.5 transition-colors hover:bg-primary-200 dark:hover:bg-primary-800"
+										aria-label="Remove participant"
+									>
+										<svg
+											class="h-3 w-3"
+											style="fill: none"
+											stroke="currentColor"
+											viewBox="0 0 24 24"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</span>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Entity link indicator (shown when message initiated from service/project) -->
+		{#if isEntityLinked}
+			<div class="rounded-lg border border-theme bg-black/5 p-3 dark:bg-white/5">
+				<div class="flex items-center gap-2 text-sm">
+					<svg
+						class="h-4 w-4 text-theme-muted"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+						/>
+					</svg>
+					<span class="text-theme-muted">Linked to {data.entityType}</span>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Initial Message -->
+		<div>
+			<label for="message" class="mb-2 block text-sm font-medium text-theme">
+				Initial Message
+				<span class="font-normal text-theme-muted">(optional)</span>
+			</label>
+			<textarea
+				id="message"
+				bind:value={initialMessage}
+				placeholder="Write your first message..."
+				rows="4"
+				class="w-full resize-none rounded-lg border border-theme bg-theme px-4 py-2.5 text-sm text-theme transition-all outline-none placeholder:text-theme-muted focus:border-primary-500"
+			></textarea>
+		</div>
+
+		<!-- Submit -->
+		<div class="flex justify-end gap-3">
+			<button
+				type="button"
+				onclick={goBack}
+				class="rounded-lg interactive px-4 py-2.5 text-sm font-medium text-theme-secondary"
+			>
+				Cancel
+			</button>
+			<button
+				type="submit"
+				disabled={isSubmitting}
+				class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-primary-700 disabled:opacity-50"
+			>
+				{#if isSubmitting}
+					<svg
+						class="h-4 w-4 animate-spin"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke-width="4"></circle>
+						<path
+							class="opacity-75"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+					Creating...
+				{:else}
+					Create Conversation
+				{/if}
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/routes/notifications/+page.server.ts b/src/routes/notifications/+page.server.ts
new file mode 100644
index 0000000..4d89e63
--- /dev/null
+++ b/src/routes/notifications/+page.server.ts
@@ -0,0 +1,22 @@
+import type { PageServerLoad } from './$types';
+import { GetMyNotificationsStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { url, locals } = event;
+	const unreadOnly = url.searchParams.get('tab') === 'unread';
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const result = await new GetMyNotificationsStore().fetch({
+		...fetchParams,
+		variables: {
+			unreadOnly,
+			limit: 50,
+			offset: 0
+		}
+	});
+
+	return {
+		notifications: result
+	};
+};
diff --git a/src/routes/notifications/+page.svelte b/src/routes/notifications/+page.svelte
new file mode 100644
index 0000000..a6063d0
--- /dev/null
+++ b/src/routes/notifications/+page.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { page } from '$app/state';
+	import { invalidateAll } from '$app/navigation';
+	import { formatDistanceToNow } from 'date-fns';
+	import TabFilter from '$lib/components/shared/TabFilter.svelte';
+	import {
+		markAllAsRead,
+		deleteNotification,
+		getEventTypeLabel,
+		getBodyPreview
+	} from '$lib/utils/notifications';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	let notifications = $derived(data.notifications.data?.myNotifications ?? []);
+	let currentTab = $derived(page.url.searchParams.get('tab') ?? 'all');
+	let isLoading = $state(false);
+
+	// Determine dashboard URL based on user type
+	let dashboardUrl = $derived(
+		data.user?.data?.me?.__typename === 'CustomerProfileType' ? '/customer' : '/team'
+	);
+
+	const tabs = [
+		{ id: 'all', label: 'All' },
+		{ id: 'unread', label: 'Unread', count: unreadCounts.notificationCount }
+	];
+
+	async function handleMarkAllRead() {
+		if (isLoading) return;
+		isLoading = true;
+		try {
+			await markAllAsRead();
+			unreadCounts.fetchCounts();
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to mark all as read:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function handleDelete(id: string, event: MouseEvent) {
+		event.stopPropagation();
+		event.preventDefault();
+		if (!confirm('Are you sure you want to delete this notification?')) return;
+
+		try {
+			await deleteNotification(id);
+			unreadCounts.fetchCounts();
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to delete notification:', error);
+		}
+	}
+
+	function formatTime(dateString: string | null | undefined): string {
+		if (!dateString) return '';
+		try {
+			return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+		} catch {
+			return '';
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Notifications | Nexus</title>
+</svelte:head>
+
+<div class="mx-auto max-w-3xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-3">
+			<a href={dashboardUrl} class="rounded-lg interactive p-2" aria-label="Go to dashboard">
+				<svg
+					class="h-5 w-5 text-theme-secondary"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</a>
+			<h1 class="text-xl font-semibold text-theme">Notifications</h1>
+		</div>
+
+		{#if notifications.length > 0 && unreadCounts.notificationCount > 0}
+			<button
+				onclick={handleMarkAllRead}
+				disabled={isLoading}
+				class="rounded-lg px-3 py-1.5 text-sm font-medium text-primary-600 transition-colors hover:bg-primary-50 disabled:opacity-50 dark:text-primary-400 dark:hover:bg-primary-900/20"
+			>
+				Mark all read
+			</button>
+		{/if}
+	</div>
+
+	<!-- Tabs -->
+	<div class="mb-6">
+		<TabFilter {tabs} />
+	</div>
+
+	<!-- Notifications List -->
+	{#if notifications.length === 0}
+		<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+			<svg
+				class="mx-auto mb-4 h-12 w-12 text-theme-muted"
+				style="fill: none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="1.5"
+					d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+				/>
+			</svg>
+			<p class="text-theme-secondary">
+				{#if currentTab === 'unread'}
+					No unread notifications
+				{:else}
+					No notifications yet
+				{/if}
+			</p>
+		</div>
+	{:else}
+		<div class="space-y-3">
+			{#each notifications as notification (notification.id)}
+				<a href="/notifications/{notification.id}" class="group block card-notification">
+					<div class="flex items-start gap-3">
+						<!-- Unread indicator -->
+						<div class="mt-1.5 flex-shrink-0">
+							{#if !notification.isRead}
+								<span class="block h-2.5 w-2.5 rounded-full bg-notification-500"></span>
+							{:else}
+								<span class="block h-2.5 w-2.5 rounded-full bg-transparent"></span>
+							{/if}
+						</div>
+
+						<div class="min-w-0 flex-1">
+							<!-- Subject and time -->
+							<div class="mb-1 flex items-start justify-between gap-2">
+								<h3 class="font-medium text-theme {notification.isRead ? '' : 'font-semibold'}">
+									{notification.subject}
+								</h3>
+								<span class="flex-shrink-0 text-xs text-theme-muted">
+									{formatTime(notification.createdAt)}
+								</span>
+							</div>
+
+							<!-- Body preview -->
+							{#if notification.body}
+								<p class="mb-2 line-clamp-2 text-sm text-theme-secondary">
+									{getBodyPreview(notification.body, 120)}
+								</p>
+							{/if}
+
+							<!-- Event type badge -->
+							<div class="flex items-center gap-2">
+								{#if notification.event?.eventType}
+									<span
+										class="inline-flex items-center rounded-full bg-black/5 px-2 py-0.5 text-xs font-medium text-theme-secondary dark:bg-white/10"
+									>
+										{getEventTypeLabel(notification.event.eventType)}
+									</span>
+								{/if}
+								{#if notification.event?.entityType}
+									<span
+										class="inline-flex items-center rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+									>
+										{notification.event.entityType}
+									</span>
+								{/if}
+							</div>
+						</div>
+
+						<!-- Delete button -->
+						<button
+							onclick={(e) => handleDelete(notification.id, e)}
+							class="flex-shrink-0 rounded-lg p-1.5 text-theme-muted transition-all hover:bg-error-100 hover:text-error-600 dark:hover:bg-error-900/30 dark:hover:text-error-400"
+							aria-label="Delete notification"
+						>
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+								/>
+							</svg>
+						</button>
+					</div>
+				</a>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/notifications/[notification]/+page.server.ts b/src/routes/notifications/[notification]/+page.server.ts
new file mode 100644
index 0000000..ceb1e22
--- /dev/null
+++ b/src/routes/notifications/[notification]/+page.server.ts
@@ -0,0 +1,19 @@
+import type { PageServerLoad } from './$types';
+import { GetNotificationStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals } = event;
+
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	const result = await new GetNotificationStore().fetch({
+		...fetchParams,
+		variables: {
+			id: params.notification
+		}
+	});
+
+	return {
+		notification: result
+	};
+};
diff --git a/src/routes/notifications/[notification]/+page.svelte b/src/routes/notifications/[notification]/+page.svelte
new file mode 100644
index 0000000..f5ba200
--- /dev/null
+++ b/src/routes/notifications/[notification]/+page.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+	import { formatDistanceToNow, format } from 'date-fns';
+	import {
+		markAsRead,
+		deleteNotification,
+		getEventTypeLabel,
+		getActionUrl,
+		getEntityTypeLabel
+	} from '$lib/utils/notifications';
+	import { unreadCounts } from '$lib/stores/unreadCounts.svelte';
+
+	let { data }: { data: PageData } = $props();
+
+	let notification = $derived(data.notification.data?.notification);
+
+	// Mark as read on mount
+	$effect(() => {
+		if (notification && !notification.isRead) {
+			markAsRead(notification.id)
+				.then(() => {
+					unreadCounts.decrementNotifications();
+				})
+				.catch(console.error);
+		}
+	});
+
+	async function handleDelete() {
+		if (!notification) return;
+		if (!confirm('Are you sure you want to delete this notification?')) return;
+
+		try {
+			await deleteNotification(notification.id);
+			unreadCounts.fetchCounts();
+			goto('/notifications');
+		} catch (error) {
+			console.error('Failed to delete notification:', error);
+		}
+	}
+
+	function formatTime(dateString: string | null | undefined): string {
+		if (!dateString) return '';
+		try {
+			return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+		} catch {
+			return '';
+		}
+	}
+
+	function formatDateTime(dateString: string | null | undefined): string {
+		if (!dateString) return '';
+		try {
+			return format(new Date(dateString), 'PPpp');
+		} catch {
+			return '';
+		}
+	}
+
+	function goBack() {
+		goto('/notifications');
+	}
+
+	let actionUrl = $derived(notification ? getActionUrl(notification) : null);
+</script>
+
+<svelte:head>
+	<title>{notification?.subject ?? 'Notification'} | Nexus</title>
+</svelte:head>
+
+<div class="mx-auto max-w-3xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-3">
+			<button onclick={goBack} class="rounded-lg interactive p-2" aria-label="Go back">
+				<svg
+					class="h-5 w-5 text-theme-secondary"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 19l-7-7 7-7"
+					/>
+				</svg>
+			</button>
+			<h1 class="text-xl font-semibold text-theme">Notification</h1>
+		</div>
+
+		<button
+			onclick={handleDelete}
+			class="rounded-lg p-2 text-error-600 transition-colors hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-900/20"
+			aria-label="Delete notification"
+		>
+			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</button>
+	</div>
+
+	{#if !notification}
+		<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
+			<p class="text-theme-secondary">Notification not found</p>
+		</div>
+	{:else}
+		<div class="space-y-4">
+			<!-- Main notification card -->
+			<div class="rounded-xl border border-theme bg-theme-card p-6">
+				<!-- Subject -->
+				<h2 class="mb-2 text-lg font-semibold text-theme">{notification.subject}</h2>
+
+				<!-- Time -->
+				<p class="mb-4 text-sm text-theme-muted">
+					{formatTime(notification.createdAt)}
+					<span class="mx-1">·</span>
+					{formatDateTime(notification.createdAt)}
+				</p>
+
+				<!-- Body -->
+				{#if notification.body}
+					<div class="prose prose-sm max-w-none text-theme-secondary dark:prose-invert">
+						<p class="whitespace-pre-wrap">{notification.body}</p>
+					</div>
+				{/if}
+
+				<!-- Action button -->
+				{#if actionUrl}
+					<div class="mt-6">
+						<a
+							href={actionUrl}
+							class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
+						>
+							View Related Item
+							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 5l7 7-7 7"
+								/>
+							</svg>
+						</a>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Event details -->
+			{#if notification.event}
+				<div class="rounded-xl border border-theme bg-theme-card p-6">
+					<h3 class="mb-4 text-sm font-semibold tracking-wide text-theme-muted uppercase">
+						Event Details
+					</h3>
+
+					<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						{#if notification.event.eventType}
+							<div>
+								<dt class="text-xs font-medium text-theme-muted">Event Type</dt>
+								<dd class="mt-1 text-sm text-theme">
+									{getEventTypeLabel(notification.event.eventType)}
+								</dd>
+							</div>
+						{/if}
+
+						{#if notification.event.entityType}
+							<div>
+								<dt class="text-xs font-medium text-theme-muted">Entity Type</dt>
+								<dd class="mt-1 text-sm text-theme">
+									{getEntityTypeLabel(notification.event.entityType)}
+								</dd>
+							</div>
+						{/if}
+
+						{#if notification.event.entityId}
+							<div>
+								<dt class="text-xs font-medium text-theme-muted">Entity ID</dt>
+								<dd class="mt-1 font-mono text-xs text-theme-secondary">
+									{notification.event.entityId}
+								</dd>
+							</div>
+						{/if}
+
+						{#if notification.event.createdAt}
+							<div>
+								<dt class="text-xs font-medium text-theme-muted">Event Time</dt>
+								<dd class="mt-1 text-sm text-theme">
+									{formatDateTime(notification.event.createdAt)}
+								</dd>
+							</div>
+						{/if}
+					</dl>
+				</div>
+			{/if}
+
+			<!-- Rule info -->
+			{#if notification.rule}
+				<div class="rounded-xl border border-theme bg-theme-card p-6">
+					<h3 class="mb-4 text-sm font-semibold tracking-wide text-theme-muted uppercase">
+						Notification Rule
+					</h3>
+
+					<dl class="space-y-3">
+						<div>
+							<dt class="text-xs font-medium text-theme-muted">Rule Name</dt>
+							<dd class="mt-1 text-sm text-theme">{notification.rule.name}</dd>
+						</div>
+
+						{#if notification.rule.description}
+							<div>
+								<dt class="text-xs font-medium text-theme-muted">Description</dt>
+								<dd class="mt-1 text-sm text-theme-secondary">{notification.rule.description}</dd>
+							</div>
+						{/if}
+					</dl>
+				</div>
+			{/if}
+
+			<!-- Metadata (if present) -->
+			{#if notification.metadata && Object.keys(notification.metadata).length > 0}
+				<div class="rounded-xl border border-theme bg-theme-card p-6">
+					<h3 class="mb-4 text-sm font-semibold tracking-wide text-theme-muted uppercase">
+						Additional Data
+					</h3>
+					<pre
+						class="overflow-x-auto rounded-lg bg-black/5 p-4 text-xs text-theme-secondary dark:bg-white/5">{JSON.stringify(
+							notification.metadata,
+							null,
+							2
+						)}</pre>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
new file mode 100644
index 0000000..4a31fac
--- /dev/null
+++ b/src/routes/pricing/+page.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+</script>
+
+<svelte:head>
+	<title>Pricing - Nexus Cleaning Solutions</title>
+	<meta
+		name="description"
+		content="Transparent commercial cleaning pricing in Macomb County. Learn how janitorial service costs are determined and what factors affect your quote."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">
+				Honest Pricing, No Surprises
+			</h1>
+			<p class="mt-6 text-xl text-theme-secondary">
+				Commercial cleaning isn't one-size-fits-all, and neither is pricing. Here's a transparent
+				look at how we determine costs and what you can expect when working with us.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- The Reality Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="max-w-3xl">
+			<h2 class="mb-6 text-3xl font-bold text-theme">The Reality of Cleaning Costs</h2>
+			<div class="space-y-4 text-theme-secondary">
+				<p>
+					Let's be upfront: quality commercial cleaning has real costs. Professional-grade
+					chemicals, reliable equipment, trained staff, insurance, and the simple reality of getting
+					to your location all factor into what you pay.
+				</p>
+				<p>
+					We've seen the race to the bottom in this industry. Companies quoting impossibly low
+					prices, then cutting corners or disappearing entirely. That's not how we operate. Our
+					pricing reflects the true cost of doing the job right, consistently, with people who are
+					paid fairly for their work.
+				</p>
+				<p>
+					What you get in return is peace of mind. A cleaning partner who shows up, does the work
+					properly, and stands behind it.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Janitorial Pricing Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="grid gap-12 lg:grid-cols-2">
+			<div>
+				<div
+					class="mb-4 inline-flex items-center gap-2 rounded-full bg-primary-100 px-3 py-1 text-sm font-medium text-primary-700 dark:bg-primary-900 dark:text-primary-300"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+					Recurring Service
+				</div>
+				<h2 class="mb-4 text-3xl font-bold text-theme">Janitorial Service Accounts</h2>
+				<p class="mb-6 text-theme-secondary">
+					Our routine janitorial service starts at <span class="font-semibold text-theme"
+						>$400/month</span
+					>. This baseline typically covers:
+				</p>
+				<ul class="mb-8 space-y-3">
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary"
+							>Smaller facilities up to approximately 5,000 sq ft</span
+						>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Once-per-week service frequency</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Single-stall restroom facilities</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Standard office/retail cleaning scope</span>
+					</li>
+				</ul>
+				<p class="text-sm text-theme-secondary">
+					This represents our sweet spot: facilities that aren't so large they need a dedicated
+					crew, but substantial enough to benefit from professional service. It's the kind of
+					building where the owner or manager has real work to do and shouldn't be spending their
+					evenings emptying trash cans.
+				</p>
+			</div>
+
+			<div class="rounded-2xl border border-theme bg-theme-card p-8">
+				<h3 class="mb-6 text-xl font-bold text-theme">What Affects Your Price</h3>
+				<div class="space-y-6">
+					<div>
+						<h4 class="mb-2 font-semibold text-theme">Square Footage</h4>
+						<p class="text-sm text-theme-secondary">
+							More space means more time. A 15,000 sq ft facility costs more than a 3,000 sq ft
+							office. That's just physics.
+						</p>
+					</div>
+					<div>
+						<h4 class="mb-2 font-semibold text-theme">Service Frequency</h4>
+						<p class="text-sm text-theme-secondary">
+							Once a week is our baseline. Twice weekly, three times, or daily service scales the
+							price accordingly.
+						</p>
+					</div>
+					<div>
+						<h4 class="mb-2 font-semibold text-theme">Restroom Count & Complexity</h4>
+						<p class="text-sm text-theme-secondary">
+							A single-stall bathroom is quick. A facility with multiple multi-stall restrooms
+							requires significantly more time and supplies.
+						</p>
+					</div>
+					<div>
+						<h4 class="mb-2 font-semibold text-theme">Facility Type</h4>
+						<p class="text-sm text-theme-secondary">
+							Medical offices have different requirements than retail stores. Industrial spaces
+							differ from professional offices. We tailor our approach and pricing accordingly.
+						</p>
+					</div>
+					<div>
+						<h4 class="mb-2 font-semibold text-theme">Scope of Work</h4>
+						<p class="text-sm text-theme-secondary">
+							Basic cleaning vs. detailed cleaning. Standard tasks vs. specialized needs. Your scope
+							determines your price.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Project Pricing Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="grid gap-12 lg:grid-cols-2">
+			<div class="order-2 rounded-2xl border border-theme bg-theme p-8 lg:order-1">
+				<h3 class="mb-6 text-xl font-bold text-theme">What Goes Into the Price</h3>
+				<div class="space-y-6">
+					<div class="border-b border-theme pb-6">
+						<div class="mb-2 flex items-baseline justify-between">
+							<h4 class="font-semibold text-theme">Minimum Project Cost</h4>
+							<span class="text-2xl font-bold text-primary-600 dark:text-primary-400">$300</span>
+						</div>
+						<p class="text-sm text-theme-secondary">
+							For smaller, straightforward projects under ideal conditions.
+						</p>
+					</div>
+					<div>
+						<p class="mb-4 text-sm text-theme-secondary">
+							Every project has real costs before we even start cleaning: professional-grade
+							chemicals, equipment, transportation, and the expertise to use them properly.
+						</p>
+						<p class="text-sm text-theme-secondary">
+							We price our work to reflect what it actually costs to do it right and to pay our team
+							fairly for skilled work. That's not an apology. It's a commitment to <a
+								href="/standard"
+								class="text-primary-600 hover:underline dark:text-primary-400"
+								>the standard we hold ourselves to</a
+							>.
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="order-1 lg:order-2">
+				<div
+					class="mb-4 inline-flex items-center gap-2 rounded-full bg-secondary-100 px-3 py-1 text-sm font-medium text-secondary-700 dark:bg-secondary-900 dark:text-secondary-300"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+						/>
+					</svg>
+					One-Time Projects
+				</div>
+				<h2 class="mb-4 text-3xl font-bold text-theme">Project-Based Work</h2>
+				<p class="mb-6 text-theme-secondary">
+					Floor care, deep cleans, post-construction cleanup, and other one-time projects start as
+					low as <span class="font-semibold text-theme">$300</span>, depending on the scope and
+					circumstances.
+				</p>
+				<p class="mb-6 text-theme-secondary">
+					Project pricing varies more than recurring service because the variables are endless. A
+					small office floor strip-and-wax is very different from a restaurant kitchen deep clean or
+					a post-renovation cleanup.
+				</p>
+				<p class="text-theme-secondary">
+					We provide detailed quotes after understanding exactly what you need. No ballpark figures
+					that balloon later. Just honest pricing based on the actual work involved.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Why We Don't Race to the Bottom -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-3xl">
+			<h2 class="mb-6 text-center text-3xl font-bold text-theme">
+				Why We Don't Race to the Bottom
+			</h2>
+			<div class="space-y-6 text-theme-secondary">
+				<p>
+					You can find cheaper cleaning services. We know that. There's always someone willing to
+					quote less, pay their workers less, skip the insurance, or cut corners on supplies.
+				</p>
+				<p>
+					Here's what we've learned in this industry: you get what you pay for. The company quoting
+					half our price often delivers half the service, if they show up at all. We've taken over
+					accounts from bargain providers more times than we can count, always hearing the same
+					story: inconsistent service, missed cleanings, poor communication, and eventually, just...
+					nothing.
+				</p>
+				<p>
+					Our pricing reflects what it actually costs to run a professional operation. We pay our
+					team fairly. We carry proper insurance. We use quality products. We answer our phones. We
+					show up.
+				</p>
+				<p>
+					This isn't just about business. It's about respect for the work itself. Cleaning is
+					skilled labor that keeps workplaces healthy, safe, and functional. It deserves to be done
+					well and compensated fairly. That belief is at the core of <a
+						href="/about"
+						class="text-primary-600 hover:underline dark:text-primary-400">who we are</a
+					>.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Quote Process Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="mb-12 text-center">
+			<h2 class="mb-4 text-3xl font-bold text-theme">Getting Your Quote</h2>
+			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
+				We don't do blind quotes. Here's our process for getting you accurate pricing.
+			</p>
+		</div>
+
+		<div class="mx-auto grid max-w-4xl gap-8 md:grid-cols-3">
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					1
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Initial Conversation</h3>
+				<p class="text-sm text-theme-secondary">
+					Tell us about your facility and what you're looking for. We'll ask questions to understand
+					your needs.
+				</p>
+			</div>
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					2
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Site Walkthrough</h3>
+				<p class="text-sm text-theme-secondary">
+					We visit your location to see the space firsthand. This is how we give you an accurate
+					quote, not a guess.
+				</p>
+			</div>
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					3
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Detailed Proposal</h3>
+				<p class="text-sm text-theme-secondary">
+					You receive a clear proposal outlining exactly what's included, how often, and what it
+					costs. No hidden fees.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- CTA Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Let's talk numbers</h2>
+			<p class="mt-4 text-lg text-theme-secondary">
+				Every facility is different. Contact us for a free walkthrough and honest quote. No
+				obligation, no pressure.
+			</p>
+			<a
+				href="/contact"
+				class="mt-8 inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
+			>
+				Request a Quote
+			</a>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
new file mode 100644
index 0000000..03fe7ab
--- /dev/null
+++ b/src/routes/privacy/+page.svelte
@@ -0,0 +1,256 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+</script>
+
+<svelte:head>
+	<title>Privacy Policy - Nexus</title>
+	<meta
+		name="description"
+		content="Privacy Policy for Nexus, the business management platform operated by Nexus Cleaning Solutions."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Privacy Policy</h1>
+			<p class="mt-6 text-lg text-theme-secondary">Last updated: December 2024</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Content Section -->
+<section class="pb-20">
+	<ContentContainer>
+		<div class="prose prose-lg max-w-3xl dark:prose-invert">
+			<h2 class="text-2xl font-bold text-theme">The Short Version</h2>
+			<p class="text-theme-secondary">
+				We collect only what we need to provide our cleaning services and run Nexus. We don't sell
+				your data. We use it to serve you better, and we protect it like it's our own.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Who We Are</h2>
+			<p class="text-theme-secondary">
+				Nexus Cleaning Solutions is a commercial cleaning company based in Macomb County,
+				Michigan. Nexus is our business management platform that helps us coordinate services with
+				our customers and team members. The Nexus platform is developed and maintained by Corellon
+				Digital; Nexus Cleaning Solutions is the data controller responsible for your
+				information.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Information We Collect</h2>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Information You Give Us</h3>
+			<p class="text-theme-secondary">When you use Nexus, you may provide:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Account information:</strong> Name, email address, phone number
+				</li>
+				<li>
+					<strong>Business information:</strong> Company name, service addresses, billing details
+				</li>
+				<li>
+					<strong>Communications:</strong> Messages you send through Nexus, contact form submissions
+				</li>
+				<li>
+					<strong>Content you upload:</strong> Photos or documents related to your services
+				</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Information We Collect Automatically</h3>
+			<p class="text-theme-secondary">When you use Nexus, we automatically collect:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Usage data:</strong> How you interact with Nexus (pages visited, features used)
+				</li>
+				<li>
+					<strong>Device information:</strong> Browser type, operating system, device type
+				</li>
+				<li>
+					<strong>Log data:</strong> IP address, access times, referring pages
+				</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Cookies</h3>
+			<p class="text-theme-secondary">
+				We use cookies to keep you logged in and remember your preferences (like dark mode). We
+				don't use tracking cookies for advertising. The only cookies we use are:
+			</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Session cookies:</strong> Encrypted cookies that keep you logged in (expire after 24
+					hours of inactivity)
+				</li>
+				<li>
+					<strong>Preference cookies:</strong> Remember your settings like theme preference (stored locally
+					on your device)
+				</li>
+			</ul>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">How We Use Your Information</h2>
+			<p class="text-theme-secondary">We use your information to:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>Provide and improve our cleaning services</li>
+				<li>Schedule and coordinate service appointments</li>
+				<li>Send you invoices and process payments</li>
+				<li>Communicate with you about your services</li>
+				<li>Respond to your questions and requests</li>
+				<li>Send service notifications and updates</li>
+				<li>Maintain and improve Nexus</li>
+				<li>Comply with legal obligations</li>
+			</ul>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Who We Share Information With</h2>
+			<p class="text-theme-secondary">
+				We don't sell your personal information. We share it only when necessary:
+			</p>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Service Providers</h3>
+			<p class="text-theme-secondary">
+				We work with trusted companies that help us run our business:
+			</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Wave:</strong> Our accounting software for invoicing and payments
+				</li>
+				<li>
+					<strong>Email services:</strong> Gmail SMTP for verification emails and notifications
+				</li>
+				<li>
+					<strong>Have I Been Pwned:</strong> We check passwords against known breach databases to protect
+					your account (only a secure hash is checked, not your actual password)
+				</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Data Hosting</h3>
+			<p class="text-theme-secondary">
+				Your data is stored on dedicated servers that we fully control and manage. We use
+				InterServer for physical server infrastructure, but all software, databases, and your
+				information are managed exclusively by us. Access to our servers is restricted to VPN and
+				strict firewall rules—no third-party cloud provider has access to your data.
+			</p>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Our Team</h3>
+			<p class="text-theme-secondary">
+				Our team members access information they need to do their jobs—like your service address so
+				they know where to go, or your contact info so they can reach you about your appointment.
+			</p>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Legal Requirements</h3>
+			<p class="text-theme-secondary">
+				We may share information if required by law, court order, or to protect the rights and
+				safety of Nexus, our customers, or others.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">How We Protect Your Information</h2>
+			<p class="text-theme-secondary">
+				We take security seriously and use enterprise-grade protection:
+			</p>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Authentication Security</h3>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Password protection:</strong> Passwords are hashed using bcrypt and checked against
+					known breach databases to prevent use of compromised passwords
+				</li>
+				<li>
+					<strong>Multi-factor authentication:</strong> Support for security keys (WebAuthn/passkeys)
+					and authenticator apps (TOTP)
+				</li>
+				<li>
+					<strong>Secure sessions:</strong> Sessions are encrypted and automatically expire after 24
+					hours of inactivity
+				</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Data Protection</h3>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>All data is transmitted over encrypted connections (HTTPS/TLS)</li>
+				<li>Sensitive data is encrypted at rest using XChaCha20-Poly1305</li>
+				<li>Session cookies are secure, encrypted, and scoped to our domain</li>
+				<li>Access to customer data is limited to team members who need it</li>
+			</ul>
+			<p class="mt-4 text-theme-secondary">
+				No system is 100% secure, but we work hard to protect your information and will notify you
+				if there's ever a breach that affects your data.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">How Long We Keep Your Information</h2>
+			<p class="text-theme-secondary">We keep your information for as long as:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>You have an active account with us</li>
+				<li>We need it to provide services to you</li>
+				<li>
+					We're required to keep it for legal or tax purposes (typically 7 years for financial
+					records)
+				</li>
+			</ul>
+			<p class="mt-4 text-theme-secondary">
+				If you close your account, we'll delete or anonymize your personal information, except where
+				we need to keep it for legal compliance.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Your Rights</h2>
+			<p class="text-theme-secondary">You have the right to:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>
+					<strong>Access your data:</strong> See what information we have about you
+				</li>
+				<li>
+					<strong>Correct your data:</strong> Update inaccurate information
+				</li>
+				<li>
+					<strong>Delete your data:</strong> Request we remove your personal information
+				</li>
+				<li>
+					<strong>Export your data:</strong> Get a copy of your data in a portable format
+				</li>
+				<li>
+					<strong>Opt out of communications:</strong> Unsubscribe from marketing emails (you'll still
+					get essential service communications)
+				</li>
+			</ul>
+			<p class="mt-4 text-theme-secondary">
+				To exercise any of these rights, contact us using the information below.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Children's Privacy</h2>
+			<p class="text-theme-secondary">
+				Nexus is designed for businesses and is not intended for anyone under 18. We don't knowingly
+				collect personal information from minors.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Changes to This Policy</h2>
+			<p class="text-theme-secondary">
+				We may update this Privacy Policy from time to time. If we make significant changes, we'll
+				let you know through Nexus or by email. The "Last updated" date at the top shows when this
+				policy was last revised.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Contact Us</h2>
+			<p class="text-theme-secondary">
+				Questions about this Privacy Policy or how we handle your data? Reach out:
+			</p>
+			<ul class="list-none space-y-2 pl-0 text-theme-secondary">
+				<li>
+					<strong>Email:</strong>
+					<a
+						href="mailto:service@nexusclean.net"
+						class="text-primary-600 hover:underline dark:text-primary-400"
+					>
+						service@nexusclean.net
+					</a>
+				</li>
+				<li>
+					<strong>Phone:</strong>
+					<a href="tel:+15864058925" class="text-primary-600 hover:underline dark:text-primary-400">
+						(586) 405-8925
+					</a>
+				</li>
+			</ul>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
new file mode 100644
index 0000000..2a76e90
--- /dev/null
+++ b/src/routes/register/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { auth } from '$lib/stores/auth.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+
+	// Redirect authenticated users away from register page
+	$effect(() => {
+		if (auth.isAuthenticated) {
+			const returnTo = page.url.searchParams.get('return_to');
+			goto(returnTo || '/');
+		}
+	});
+
+	// Redirect to Kratos registration on mount
+	onMount(() => {
+		const returnTo = page.url.searchParams.get('return_to');
+		auth.redirectToRegistration(returnTo || window.location.origin);
+	});
+</script>
+
+<svelte:head>
+	<title>Sign Up - Nexus</title>
+</svelte:head>
+
+<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
+	<div class="text-center">
+		<div class="mb-4 text-lg text-theme-secondary">Redirecting to registration...</div>
+		<div
+			class="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary-500/30 border-t-primary-500"
+		></div>
+	</div>
+</section>
diff --git a/src/routes/services/+page.svelte b/src/routes/services/+page.svelte
new file mode 100644
index 0000000..2b8a508
--- /dev/null
+++ b/src/routes/services/+page.svelte
@@ -0,0 +1,547 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+	import floorsPhoto from '$lib/assets/floors.jpg';
+	import kitchensPhoto from '$lib/assets/kitchens.jpg';
+</script>
+
+<svelte:head>
+	<title>Our Services - Nexus Cleaning Solutions</title>
+	<meta
+		name="description"
+		content="Commercial cleaning services in Macomb County, MI and surrounding areas. Routine janitorial, floor care, commercial kitchen cleaning, and specialty deep cleaning projects."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Our Services</h1>
+			<p class="mt-6 text-xl text-theme-secondary">
+				From routine janitorial maintenance to specialized deep cleaning projects, Nexus
+				Cleaning Solutions provides comprehensive commercial cleaning services throughout Macomb
+				County and the greater Detroit area.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Routine Janitorial Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div>
+				<div
+					class="mb-4 inline-flex items-center gap-2 rounded-full bg-primary-100 px-3 py-1 text-sm font-medium text-primary-700 dark:bg-primary-900 dark:text-primary-300"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+						/>
+					</svg>
+					Recurring Service
+				</div>
+				<h2 class="mb-4 text-3xl font-bold text-theme">Janitorial Service</h2>
+				<p class="mb-6 text-theme-secondary">
+					Our core service offering. We work with you to develop a customized scope of work that
+					covers every area of your facility, with task frequencies tailored to your needs and
+					schedule.
+				</p>
+				<div class="space-y-3">
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Daily, weekly, and monthly task scheduling</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Restroom cleaning and sanitation</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Trash removal and recycling</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Dusting, vacuuming, and mopping</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Break room and common area maintenance</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Window and glass cleaning (interior)</span>
+					</div>
+				</div>
+			</div>
+			<div class="aspect-square overflow-hidden rounded-2xl">
+				<img
+					src="https://images.unsplash.com/photo-1628177142898-93e36e4e3a50?w=500&h=500&fit=crop"
+					alt="Office cleaning service"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Floor Care Section -->
+<section class="py-16">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div class="order-2 aspect-square overflow-hidden rounded-2xl md:order-1">
+				<img
+					src={floorsPhoto}
+					alt="Floor care and maintenance"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+			<div class="order-1 md:order-2">
+				<div
+					class="mb-4 inline-flex items-center gap-2 rounded-full bg-secondary-100 px-3 py-1 text-sm font-medium text-secondary-700 dark:bg-secondary-900 dark:text-secondary-300"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+						/>
+					</svg>
+					Project-Based
+				</div>
+				<h2 class="mb-4 text-3xl font-bold text-theme">Floor Care</h2>
+				<p class="mb-6 text-theme-secondary">
+					Keep your floors looking their best with professional floor care services. Whether you
+					need regular maintenance or a complete restoration, we have the equipment and expertise to
+					handle it.
+				</p>
+				<div class="space-y-3">
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Strip and wax (VCT, LVT, and other hard floors)</span
+						>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">High-speed buffing and burnishing</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Scrub and recoat maintenance</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Carpet extraction and deep cleaning</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Tile and grout cleaning</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Commercial Kitchen Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div>
+				<div
+					class="mb-4 inline-flex items-center gap-2 rounded-full bg-accent-100 px-3 py-1 text-sm font-medium text-accent-700 dark:bg-accent-900 dark:text-accent-300"
+				>
+					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					Specialty Service
+				</div>
+				<h2 class="mb-4 text-3xl font-bold text-theme">Commercial Kitchen Cleaning</h2>
+				<p class="mb-6 text-theme-secondary">
+					A thorough top-down cleaning service for commercial kitchens. We cover everything from
+					ceiling tiles to floors, giving your kitchen a deep clean that goes beyond daily
+					maintenance.
+				</p>
+				<div class="space-y-3">
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Ceiling tile cleaning and degreasing</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Wall washing and degreasing</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Equipment exterior cleaning</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Conveyor pizza oven cleaning</span>
+					</div>
+					<div class="flex items-start gap-3">
+						<svg
+							class="mt-0.5 h-5 w-5 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span class="text-theme-secondary">Floor degreasing and deep cleaning</span>
+					</div>
+				</div>
+
+			</div>
+			<div class="aspect-square overflow-hidden rounded-2xl">
+				<img
+					src={kitchensPhoto}
+					alt="Commercial kitchen cleaning"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Deep Cleaning / Projects Section -->
+<section class="py-16">
+	<ContentContainer>
+		<div class="mb-12 text-center">
+			<h2 class="mb-4 text-3xl font-bold text-theme">Specialty & One-Time Projects</h2>
+			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
+				Beyond our core services, we handle a variety of specialty cleaning projects. If you have a
+				unique cleaning need, let's talk.
+			</p>
+		</div>
+
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Impact Cleaning</h3>
+				<p class="text-sm text-theme-secondary">
+					Intensive deep cleaning to reset your facility. Perfect for spaces that need a fresh start
+					or have fallen behind on maintenance.
+				</p>
+			</div>
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Turnovers / Move-Out Cleaning</h3>
+				<p class="text-sm text-theme-secondary">
+					Deep cleaning for tenant transitions and property turnovers. We work with property
+					managers to get spaces move-in ready.
+				</p>
+			</div>
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Post-Construction Cleanup</h3>
+				<p class="text-sm text-theme-secondary">
+					Remove construction dust and debris to prepare your space for occupancy.
+				</p>
+			</div>
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Window Cleaning</h3>
+				<p class="text-sm text-theme-secondary">
+					Interior and exterior window cleaning for a spotless finish.
+				</p>
+			</div>
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Emergency Response</h3>
+				<p class="text-sm text-theme-secondary">
+					Rapid response cleaning for unexpected situations.
+				</p>
+			</div>
+			<div class="rounded-xl border border-theme bg-theme-card p-5">
+				<h3 class="mb-2 font-semibold text-theme">Something Else?</h3>
+				<p class="text-sm text-theme-secondary">
+					Have a unique cleaning challenge? Give us a call. You'd be surprised what we've tackled.
+					We love a good project.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- How It Works Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="mb-12 text-center">
+			<h2 class="mb-4 text-3xl font-bold text-theme">How It Works</h2>
+			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
+				Getting started with Nexus is simple. Here's what to expect.
+			</p>
+		</div>
+
+		<div class="grid gap-8 md:grid-cols-4">
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					1
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Consultation</h3>
+				<p class="text-sm text-theme-secondary">
+					We visit your facility to understand your needs and assess the scope of work.
+				</p>
+			</div>
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					2
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Custom Proposal</h3>
+				<p class="text-sm text-theme-secondary">
+					You receive a detailed proposal outlining services, frequency, and pricing.
+				</p>
+			</div>
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					3
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Onboarding</h3>
+				<p class="text-sm text-theme-secondary">
+					We set up your service schedule and provide access to your customer portal.
+				</p>
+			</div>
+			<div class="text-center">
+				<div
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-600 dark:bg-primary-900 dark:text-primary-400"
+				>
+					4
+				</div>
+				<h3 class="mb-2 font-semibold text-theme">Service Begins</h3>
+				<p class="text-sm text-theme-secondary">
+					Our team arrives on schedule to deliver consistent, quality cleaning.
+				</p>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Service Area Section -->
+<section class="py-16">
+	<ContentContainer>
+		<div class="mb-10 text-center">
+			<h2 class="mb-4 text-3xl font-bold text-theme">Proudly Serving Southeast Michigan</h2>
+			<p class="mx-auto max-w-2xl text-lg text-theme-secondary">
+				Based in Macomb County, we provide commercial cleaning services to businesses throughout
+				Sterling Heights, Warren, Clinton Township, Shelby Township, and the surrounding
+				communities. We also serve Oakland County and the greater Metro Detroit area.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- CTA Section -->
+<section class="border-t border-theme bg-theme-card py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Let's discuss your cleaning needs</h2>
+			<p class="mt-4 text-lg text-theme-secondary">
+				Every facility is different. Contact us for a free consultation and customized quote.
+			</p>
+			<a
+				href="/contact"
+				class="mt-8 inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
+			>
+				Request a Quote
+			</a>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/standard/+page.svelte b/src/routes/standard/+page.svelte
new file mode 100644
index 0000000..75dd75e
--- /dev/null
+++ b/src/routes/standard/+page.svelte
@@ -0,0 +1,438 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+</script>
+
+<svelte:head>
+	<title>The Nexus Standard - Our Commitment to Excellence</title>
+	<meta
+		name="description"
+		content="The Nexus Standard of Excellence defines our commitment to quality, consistency, and accountability. Learn what sets Nexus Cleaning Solutions apart in Macomb County and Metro Detroit."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">
+				The Nexus Standard
+			</h1>
+			<p class="mt-6 text-xl text-theme-secondary">
+				Excellence isn't a buzzword. It's how we operate. The Nexus Standard is our promise that
+				every service, every visit, and every interaction meets the level of quality your business
+				deserves.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- What It Means Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="grid items-center gap-12 md:grid-cols-2">
+			<div>
+				<h2 class="mb-6 text-3xl font-bold text-theme">What It Means</h2>
+				<div class="space-y-4 text-theme-secondary">
+					<p>
+						When we say "Nexus Standard", we're talking about a measurable commitment, not just
+						good intentions. It means your facility gets the same thorough attention whether it's
+						our first visit or our hundredth.
+					</p>
+					<p>
+						It means when something isn't right, we make it right. No excuses, no runaround. If
+						you're not satisfied with a service, we'll return to address it at no additional cost.
+					</p>
+					<p>
+						This standard exists because we believe <a
+							href="/about"
+							class="text-primary-600 hover:underline dark:text-primary-400"
+							>cleaning work deserves respect</a
+						>, and that starts with doing it well. When we hold ourselves to a higher bar, everyone
+						benefits: our clients get reliable service, and our team takes pride in work that
+						matters.
+					</p>
+				</div>
+			</div>
+			<div class="aspect-square overflow-hidden rounded-2xl">
+				<img
+					src="https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?w=500&h=500&fit=crop"
+					alt="Quality cleaning service"
+					class="h-full w-full object-cover"
+				/>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Pillars Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mb-16 text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">The Four Pillars</h2>
+			<p class="mx-auto mt-4 max-w-2xl text-lg text-theme-secondary">
+				Every aspect of our service is built on these foundational commitments.
+			</p>
+		</div>
+
+		<div class="grid gap-8 md:grid-cols-2">
+			<!-- Consistency -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-8">
+				<div
+					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-primary-100 dark:bg-primary-900"
+				>
+					<svg
+						class="h-7 w-7 text-primary-600 dark:text-primary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-3 text-xl font-bold text-theme">Consistency</h3>
+				<p class="mb-4 text-theme-secondary">
+					A clean building one week and a messy one the next isn't service. It's a gamble. We use
+					detailed checklists and documented scopes of work to ensure every task gets completed,
+					every time.
+				</p>
+				<ul class="space-y-2 text-sm text-theme-secondary">
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Documented task lists for every visit</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Same cleaning team when possible</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-primary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Routine quality inspections</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Accountability -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-8">
+				<div
+					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-secondary-100 dark:bg-secondary-900"
+				>
+					<svg
+						class="h-7 w-7 text-secondary-600 dark:text-secondary-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-3 text-xl font-bold text-theme">Accountability</h3>
+				<p class="mb-4 text-theme-secondary">
+					We own our work. When something falls short, we don't make excuses. We fix it. Our
+					satisfaction guarantee means you never pay for service that doesn't meet expectations.
+				</p>
+				<ul class="space-y-2 text-sm text-theme-secondary">
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Satisfaction guarantee on every service</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Direct line to management</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-secondary-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Rapid response to concerns</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Communication -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-8">
+				<div
+					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-accent-100 dark:bg-accent-900"
+				>
+					<svg
+						class="h-7 w-7 text-accent-600 dark:text-accent-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-3 text-xl font-bold text-theme">Communication</h3>
+				<p class="mb-4 text-theme-secondary">
+					No surprises, no ghosting. We keep you informed about your service, respond promptly to
+					questions, and proactively let you know if anything changes.
+				</p>
+				<ul class="space-y-2 text-sm text-theme-secondary">
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Customer portal for service tracking</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Prompt responses to inquiries</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-accent-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Proactive schedule updates</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Professionalism -->
+			<div class="rounded-2xl border border-theme bg-theme-card p-8">
+				<div
+					class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-success-100 dark:bg-success-900"
+				>
+					<svg
+						class="h-7 w-7 text-success-600 dark:text-success-400"
+						style="fill: none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+				</div>
+				<h3 class="mb-3 text-xl font-bold text-theme">Professionalism</h3>
+				<p class="mb-4 text-theme-secondary">
+					We represent your facility when we're in it. Our team arrives prepared, treats your space
+					with respect, and conducts themselves in a way that reflects well on both of us.
+				</p>
+				<ul class="space-y-2 text-sm text-theme-secondary">
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Background-checked team members</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Fully insured operations</span>
+					</li>
+					<li class="flex items-start gap-2">
+						<svg
+							class="mt-0.5 h-4 w-4 flex-shrink-0 text-success-500"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						<span>Respectful of your space and people</span>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Guarantee Section -->
+<section class="border-y border-theme bg-theme-card py-16">
+	<ContentContainer>
+		<div class="mx-auto max-w-3xl text-center">
+			<div
+				class="mx-auto mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
+			>
+				<svg
+					class="h-10 w-10 text-primary-600 dark:text-primary-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+					/>
+				</svg>
+			</div>
+			<h2 class="mb-6 text-3xl font-bold text-theme">Our Guarantee</h2>
+			<p class="mb-6 text-lg text-theme-secondary">
+				If you're not satisfied with any service we provide, let us know within 24 hours and we'll
+				return to make it right, at no additional charge. No fine print, no hoops to jump through.
+			</p>
+			<p class="text-theme-secondary">
+				This isn't just a policy. It's a reflection of how we do business. We'd rather lose money on
+				a re-clean than lose your trust.
+			</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- CTA Section -->
+<section class="py-20">
+	<ContentContainer>
+		<div class="mx-auto max-w-2xl text-center">
+			<h2 class="text-3xl font-bold text-theme md:text-4xl">Experience the difference</h2>
+			<p class="mt-4 text-lg text-theme-secondary">
+				Ready to see what the Nexus Standard looks like in your facility? Let's talk.
+			</p>
+			<a
+				href="/contact"
+				class="mt-8 inline-flex items-center justify-center rounded-lg bg-primary-600 px-8 py-4 font-medium text-white transition-colors hover:bg-primary-700"
+			>
+				Request a Consultation
+			</a>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/src/routes/team/+layout.server.ts b/src/routes/team/+layout.server.ts
new file mode 100644
index 0000000..034adf9
--- /dev/null
+++ b/src/routes/team/+layout.server.ts
@@ -0,0 +1,57 @@
+import type { LayoutServerLoad } from './$types';
+import { redirect, error } from '@sveltejs/kit';
+import { TeamDashboardStore } from '$houdini';
+import { getCurrentMonth } from '$lib/utils/date';
+
+export const load: LayoutServerLoad = async (event) => {
+	const { url, parent, locals, depends } = event;
+
+	// Register dependency for invalidation
+	depends('app:dashboard');
+
+	const parentData = await parent();
+	const me = parentData.user?.data?.me;
+
+	// Not authenticated
+	if (!me) {
+		const returnTo = encodeURIComponent(url.pathname + url.search);
+		throw redirect(307, `/login?return_to=${returnTo}`);
+	}
+
+	// Team routes require team profile (any role: admin, team_leader, team_member)
+	if (me.__typename !== 'TeamProfileType') {
+		throw error(403, 'This area is only accessible to team members');
+	}
+
+	// Get month from query params or use current month
+	const month = url.searchParams.get('month') || getCurrentMonth();
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Single consolidated query for all team dashboard data
+	const dashboardResult = await new TeamDashboardStore().fetch({
+		...fetchParams,
+		variables: { teamProfileId: me.id, month }
+	});
+
+	const dashboard = dashboardResult.data?.teamDashboard;
+
+	// Filter services and projects by status client-side
+	const services = dashboard?.services ?? [];
+	const projects = dashboard?.projects ?? [];
+
+	return {
+		...parentData,
+		services: {
+			scheduled: services.filter((s) => s.status === 'SCHEDULED'),
+			inProgress: services.filter((s) => s.status === 'IN_PROGRESS'),
+			completed: services.filter((s) => s.status === 'COMPLETED')
+		},
+		projects: {
+			scheduled: projects.filter((p) => p.status === 'SCHEDULED'),
+			inProgress: projects.filter((p) => p.status === 'IN_PROGRESS'),
+			completed: projects.filter((p) => p.status === 'COMPLETED')
+		},
+		reports: dashboard?.reports ?? [],
+		filters: { month }
+	};
+};
diff --git a/src/routes/team/+layout.svelte b/src/routes/team/+layout.svelte
new file mode 100644
index 0000000..ae9c9d0
--- /dev/null
+++ b/src/routes/team/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+{@render children()}
diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
new file mode 100644
index 0000000..7cac4da
--- /dev/null
+++ b/src/routes/team/+page.svelte
@@ -0,0 +1,540 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import { beforeNavigate } from '$app/navigation';
+	import type { PageData } from './$types';
+	import type { TeamDashboard$result } from '$houdini';
+
+	type Project = TeamDashboard$result['teamDashboard']['projects'][number];
+	type Service = TeamDashboard$result['teamDashboard']['services'][number];
+
+	// Track which item is currently loading
+	let loadingId = $state<string | null>(null);
+
+	// Listen for navigation to set loading state
+	beforeNavigate(({ to }) => {
+		if (
+			to?.url.pathname.startsWith('/team/services/') ||
+			to?.url.pathname.startsWith('/team/projects/')
+		) {
+			// Extract the ID from the URL
+			const parts = to.url.pathname.split('/');
+			loadingId = parts[parts.length - 1];
+		}
+	});
+
+	let { data }: { data: PageData } = $props();
+
+	// User info
+	let user = $derived(data.user?.data?.me);
+	let firstName = $derived(user?.fullName?.split(' ')[0] ?? 'there');
+
+	// Lookups
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Services data - now flat arrays
+	let scheduledServices = $derived(data.services.scheduled ?? []);
+	let inProgressServices = $derived(data.services.inProgress ?? []);
+	let completedServices = $derived(data.services.completed ?? []);
+
+	// Projects data - now flat arrays
+	let scheduledProjects = $derived(data.projects.scheduled ?? []);
+	let inProgressProjects = $derived(data.projects.inProgress ?? []);
+	let completedProjects = $derived(data.projects.completed ?? []);
+
+	// Get current week bounds (Monday to Sunday) - returns timestamp numbers for comparison
+	function getWeekBounds(): { start: number; end: number } {
+		const now = new Date();
+		const day = now.getDay();
+		const diff = day === 0 ? -6 : 1 - day; // Monday = start
+		const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff);
+		const sunday = new Date(
+			monday.getFullYear(),
+			monday.getMonth(),
+			monday.getDate() + 6,
+			23,
+			59,
+			59,
+			999
+		);
+		return { start: monday.getTime(), end: sunday.getTime() };
+	}
+
+	// Filter services for this week (flat list, sorted by date)
+	let thisWeekServices = $derived.by(() => {
+		const { start, end } = getWeekBounds();
+		const allActive = [...scheduledServices, ...inProgressServices];
+		return allActive
+			.filter((service) => {
+				const d = new Date(service.date + 'T00:00:00').getTime();
+				return d >= start && d <= end;
+			})
+			.sort((a, b) => a.date.localeCompare(b.date));
+	});
+
+	// Recently completed services (first 5)
+	let recentlyCompletedServices = $derived(completedServices.slice(0, 5));
+
+	// Filter projects for this week (flat list, sorted by date)
+	let thisWeekProjects = $derived.by(() => {
+		const { start, end } = getWeekBounds();
+		const allActive = [...scheduledProjects, ...inProgressProjects];
+		return allActive
+			.filter((project) => {
+				const d = new Date(project.date + 'T00:00:00').getTime();
+				return d >= start && d <= end;
+			})
+			.sort((a, b) => a.date.localeCompare(b.date));
+	});
+
+	// Recently completed projects (first 5)
+	let recentlyCompletedProjects = $derived(completedProjects.slice(0, 5));
+
+	// Get day number from date
+	function getDayNum(dateStr: string): number {
+		return new Date(dateStr + 'T00:00:00').getDate();
+	}
+
+	// Get short weekday from date
+	function getWeekday(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', { weekday: 'short' });
+	}
+
+	// Get account info
+	function getAccountInfo(accountAddressId: string | null | undefined) {
+		if (!accountAddressId) return null;
+		return accountLookup.get(accountAddressId) ?? null;
+	}
+
+	// Get project display name
+	function getProjectDisplayName(project: Project) {
+		if (project.accountAddressId) {
+			return accountLookup.get(project.accountAddressId)?.accountName ?? 'Unknown Account';
+		}
+		if (project.customerId) {
+			return customerLookup.get(project.customerId)?.customerName ?? 'Unknown Customer';
+		}
+		return 'No account/customer';
+	}
+</script>
+
+<svelte:head>
+	<title>Dashboard - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<!-- Welcome Header -->
+		<TeamPageHeader title="Welcome back, {firstName}!" showBackButton={false} showNavMenu={true}>
+			{#snippet subtitleSnippet({ toggleMenu })}
+				Here's your weekly snapshot. Use the <button
+					type="button"
+					onclick={toggleMenu}
+					class="menu-trigger text-primary-500 underline underline-offset-2 hover:text-primary-600 dark:hover:text-primary-400"
+					>menu</button
+				> or bottom nav to access your work.
+			{/snippet}
+		</TeamPageHeader>
+
+		<!-- Getting Started Guide -->
+		<div class="mb-6 space-y-3">
+			<!-- Step 1 -->
+			<div class="card-padded">
+				<div class="flex items-start gap-4">
+					<div
+						class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-sm font-bold text-white"
+					>
+						1
+					</div>
+					<div class="min-w-0">
+						<h2 class="text-base font-semibold text-theme">Find Your Assigned Work</h2>
+						<p class="text-sm text-theme-secondary">
+							Browse your assigned <a
+								href="/team/services"
+								class="text-secondary-500 underline underline-offset-2 hover:text-secondary-600 dark:hover:text-secondary-400"
+								>services</a
+							>
+							and
+							<a
+								href="/team/projects"
+								class="text-accent-500 underline underline-offset-2 hover:text-accent-600 dark:hover:text-accent-400"
+								>projects</a
+							>. Use the month filter to find work scheduled for a specific time period.
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Step 2 -->
+			<div class="card-padded">
+				<div class="flex items-start gap-4">
+					<div
+						class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-sm font-bold text-white"
+					>
+						2
+					</div>
+					<div class="min-w-0">
+						<h2 class="text-base font-semibold text-theme">Log Your Completed Work</h2>
+						<p class="text-sm text-theme-secondary">
+							Open a service or project to start a new session. Record the tasks you've completed
+							and any notes about the work performed.
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Step 3 -->
+			<div class="card-padded">
+				<div class="flex items-start gap-4">
+					<div
+						class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-sm font-bold text-white"
+					>
+						3
+					</div>
+					<div class="min-w-0">
+						<h2 class="text-base font-semibold text-theme">Review Your Reports</h2>
+						<p class="text-sm text-theme-secondary">
+							At the end of each month, your completed work is summarized into a <a
+								href="/team/reports"
+								class="text-accent2-500 underline underline-offset-2 hover:text-accent2-600 dark:hover:text-accent2-400"
+								>report</a
+							>. View your labor totals and payment breakdowns.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Dashboard Grid -->
+		<div class="grid grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 sm:gap-6">
+			<!-- Services Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-secondary px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-secondary-600 dark:text-secondary-400">
+							Services
+						</h2>
+						<a
+							href="/team/services"
+							class="text-sm text-secondary-500 hover:text-secondary-600 dark:hover:text-secondary-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="divide-theme divide-y">
+					<!-- This Week's Services -->
+					<div class="px-3 py-3 sm:p-4">
+						<h3 class="mb-3 text-sm font-medium text-theme-secondary">This Week</h3>
+						{#if thisWeekServices.length === 0}
+							<p class="text-sm text-theme-muted italic">No services scheduled this week</p>
+						{:else}
+							<div class="space-y-2">
+								{#each thisWeekServices as service (service.id)}
+									{@const accountInfo = getAccountInfo(service.accountAddressId)}
+									<a
+										href="/team/services/{service.id}"
+										class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-secondary-500/30 hover:shadow-md"
+									>
+										<!-- Calendar tile -->
+										<div
+											class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-card"
+										>
+											<span class="text-[10px] font-medium text-theme-muted uppercase"
+												>{getWeekday(service.date)}</span
+											>
+											<span class="text-base leading-none font-bold text-theme"
+												>{getDayNum(service.date)}</span
+											>
+										</div>
+										<!-- Info -->
+										<div class="min-w-0 flex-1 overflow-hidden">
+											{#if accountInfo}
+												<p class="truncate text-sm font-medium text-theme">
+													{accountInfo.accountName}
+												</p>
+												<p class="truncate text-xs text-theme-muted">{accountInfo.addressName}</p>
+											{:else}
+												<p class="text-sm text-theme-muted italic">No account linked</p>
+											{/if}
+										</div>
+										<!-- Chevron or Spinner -->
+										{#if loadingId === service.id}
+											<svg
+												class="h-5 w-5 shrink-0 animate-spin text-secondary-500"
+												style="fill: none"
+												viewBox="0 0 24 24"
+											>
+												<circle
+													class="opacity-25"
+													cx="12"
+													cy="12"
+													r="10"
+													stroke="currentColor"
+													stroke-width="4"
+												></circle>
+												<path
+													class="opacity-75"
+													fill="currentColor"
+													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+												></path>
+											</svg>
+										{:else}
+											<svg
+												class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-secondary-500"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 5l7 7-7 7"
+												/>
+											</svg>
+										{/if}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					</div>
+
+					<!-- Recently Completed Services -->
+					<div class="px-3 py-3 sm:p-4">
+						<h3 class="mb-3 text-sm font-medium text-theme-secondary">Recently Completed</h3>
+						{#if recentlyCompletedServices.length === 0}
+							<p class="text-sm text-theme-muted italic">No completed services yet</p>
+						{:else}
+							<div class="space-y-2">
+								{#each recentlyCompletedServices as service (service.id)}
+									{@const accountInfo = getAccountInfo(service.accountAddressId)}
+									<a
+										href="/team/services/{service.id}"
+										class="group flex items-center gap-3 overflow-hidden rounded-lg p-2 transition-colors hover:bg-theme-secondary"
+									>
+										<!-- Calendar tile -->
+										<div
+											class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-secondary"
+										>
+											<span class="text-[10px] font-medium text-theme-muted uppercase"
+												>{getWeekday(service.date)}</span
+											>
+											<span class="text-base leading-none font-bold text-theme"
+												>{getDayNum(service.date)}</span
+											>
+										</div>
+										<!-- Info -->
+										<div class="min-w-0 flex-1 overflow-hidden">
+											{#if accountInfo}
+												<p class="truncate text-sm text-theme">{accountInfo.accountName}</p>
+												<p class="truncate text-xs text-theme-muted">{accountInfo.addressName}</p>
+											{:else}
+												<p class="text-sm text-theme-muted italic">No account linked</p>
+											{/if}
+										</div>
+										<!-- Chevron or Spinner -->
+										{#if loadingId === service.id}
+											<svg
+												class="h-5 w-5 shrink-0 animate-spin text-secondary-500"
+												style="fill: none"
+												viewBox="0 0 24 24"
+											>
+												<circle
+													class="opacity-25"
+													cx="12"
+													cy="12"
+													r="10"
+													stroke="currentColor"
+													stroke-width="4"
+												></circle>
+												<path
+													class="opacity-75"
+													fill="currentColor"
+													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+												></path>
+											</svg>
+										{:else}
+											<svg
+												class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-secondary-500"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 5l7 7-7 7"
+												/>
+											</svg>
+										{/if}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<!-- Projects Section -->
+			<div class="overflow-hidden card">
+				<div class="section-header-accent px-3 py-3 sm:px-4 sm:py-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-lg font-semibold text-accent-600 dark:text-accent-400">Projects</h2>
+						<a
+							href="/team/projects"
+							class="text-sm text-accent-500 hover:text-accent-600 dark:hover:text-accent-400"
+							>View all</a
+						>
+					</div>
+				</div>
+
+				<div class="divide-theme divide-y">
+					<!-- This Week's Projects -->
+					<div class="px-3 py-3 sm:p-4">
+						<h3 class="mb-3 text-sm font-medium text-theme-secondary">This Week</h3>
+						{#if thisWeekProjects.length === 0}
+							<p class="text-sm text-theme-muted italic">No projects scheduled this week</p>
+						{:else}
+							<div class="space-y-2">
+								{#each thisWeekProjects as project (project.id)}
+									<a
+										href="/team/projects/{project.id}"
+										class="group flex items-center gap-3 overflow-hidden rounded-lg border border-transparent bg-theme-secondary p-2 transition-all hover:border-accent-500/30 hover:shadow-md"
+									>
+										<!-- Calendar tile -->
+										<div
+											class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-card"
+										>
+											<span class="text-[10px] font-medium text-theme-muted uppercase"
+												>{getWeekday(project.date)}</span
+											>
+											<span class="text-base leading-none font-bold text-theme"
+												>{getDayNum(project.date)}</span
+											>
+										</div>
+										<!-- Info -->
+										<div class="min-w-0 flex-1 overflow-hidden">
+											<p class="truncate text-sm font-medium text-theme">
+												{getProjectDisplayName(project)}
+											</p>
+											<p class="truncate text-xs text-theme-muted">{project.name}</p>
+										</div>
+										<!-- Chevron or Spinner -->
+										{#if loadingId === project.id}
+											<svg
+												class="h-5 w-5 shrink-0 animate-spin text-accent-500"
+												style="fill: none"
+												viewBox="0 0 24 24"
+											>
+												<circle
+													class="opacity-25"
+													cx="12"
+													cy="12"
+													r="10"
+													stroke="currentColor"
+													stroke-width="4"
+												></circle>
+												<path
+													class="opacity-75"
+													fill="currentColor"
+													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+												></path>
+											</svg>
+										{:else}
+											<svg
+												class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-accent-500"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 5l7 7-7 7"
+												/>
+											</svg>
+										{/if}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					</div>
+
+					<!-- Recently Completed Projects -->
+					<div class="px-3 py-3 sm:p-4">
+						<h3 class="mb-3 text-sm font-medium text-theme-secondary">Recently Completed</h3>
+						{#if recentlyCompletedProjects.length === 0}
+							<p class="text-sm text-theme-muted italic">No completed projects yet</p>
+						{:else}
+							<div class="space-y-2">
+								{#each recentlyCompletedProjects as project (project.id)}
+									<a
+										href="/team/projects/{project.id}"
+										class="group flex items-center gap-3 overflow-hidden rounded-lg p-2 transition-colors hover:bg-theme-secondary"
+									>
+										<!-- Calendar tile -->
+										<div
+											class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-lg border border-theme bg-theme-secondary"
+										>
+											<span class="text-[10px] font-medium text-theme-muted uppercase"
+												>{getWeekday(project.date)}</span
+											>
+											<span class="text-base leading-none font-bold text-theme"
+												>{getDayNum(project.date)}</span
+											>
+										</div>
+										<!-- Info -->
+										<div class="min-w-0 flex-1 overflow-hidden">
+											<p class="truncate text-sm text-theme">{getProjectDisplayName(project)}</p>
+											<p class="truncate text-xs text-theme-muted">{project.name}</p>
+										</div>
+										<!-- Chevron or Spinner -->
+										{#if loadingId === project.id}
+											<svg
+												class="h-5 w-5 shrink-0 animate-spin text-accent-500"
+												style="fill: none"
+												viewBox="0 0 24 24"
+											>
+												<circle
+													class="opacity-25"
+													cx="12"
+													cy="12"
+													r="10"
+													stroke="currentColor"
+													stroke-width="4"
+												></circle>
+												<path
+													class="opacity-75"
+													fill="currentColor"
+													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+												></path>
+											</svg>
+										{:else}
+											<svg
+												class="h-5 w-5 shrink-0 text-theme-muted transition-transform group-hover:translate-x-0.5 group-hover:text-accent-500"
+												style="fill: none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 5l7 7-7 7"
+												/>
+											</svg>
+										{/if}
+									</a>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/accounts/+page.svelte b/src/routes/team/accounts/+page.svelte
new file mode 100644
index 0000000..bc690b5
--- /dev/null
+++ b/src/routes/team/accounts/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	let accounts = $derived(data.accounts?.data?.accounts ?? []);
+</script>
+
+<svelte:head>
+	<title>Accounts - Team - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader
+			title="Accounts"
+			subtitle="View account information including locations, contacts, and service scopes for the accounts you're assigned to."
+			colorScheme="primary"
+		/>
+
+		{#if accounts.length === 0}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-primary-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Accounts</h2>
+				<p class="empty-state-text">You don't have any accounts assigned to you yet.</p>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				{#each accounts as account (account.id)}
+					<a
+						href="/team/accounts/{account.id}"
+						class="flex items-center justify-between card-account"
+					>
+						<div>
+							<h2 class="mb-2 text-lg font-semibold text-theme">{account.name}</h2>
+							{#if account.primaryAddress}
+								<p class="text-sm text-theme-secondary">
+									{account.primaryAddress.streetAddress}
+								</p>
+								<p class="text-sm text-theme-muted">
+									{account.primaryAddress.city}, {account.primaryAddress.state}
+									{account.primaryAddress.zipCode}
+								</p>
+							{/if}
+							{#if account.addresses && account.addresses.length > 0}
+								<p class="mt-3 text-xs text-theme-muted">
+									{account.addresses.length} location{account.addresses.length === 1 ? '' : 's'}
+								</p>
+							{/if}
+						</div>
+						<svg
+							class="h-5 w-5 flex-shrink-0 text-theme-muted"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/accounts/[account]/+page.server.ts b/src/routes/team/accounts/[account]/+page.server.ts
new file mode 100644
index 0000000..020ae0f
--- /dev/null
+++ b/src/routes/team/accounts/[account]/+page.server.ts
@@ -0,0 +1,18 @@
+import type { PageServerLoad } from './$types';
+import { GetAccountStore } from '$houdini';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals } = event;
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Fetch full account data with schedules, scopes, contacts
+	const accountResult = await new GetAccountStore().fetch({
+		...fetchParams,
+		variables: { id: params.account }
+	});
+
+	return {
+		accountId: params.account,
+		account: accountResult.data?.account ?? null
+	};
+};
diff --git a/src/routes/team/accounts/[account]/+page.svelte b/src/routes/team/accounts/[account]/+page.svelte
new file mode 100644
index 0000000..3552a49
--- /dev/null
+++ b/src/routes/team/accounts/[account]/+page.svelte
@@ -0,0 +1,293 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import type { PageData } from './$types';
+	import type { GetAccount$result } from '$houdini';
+
+	type Account = NonNullable<GetAccount$result['account']>;
+	type Schedule = NonNullable<Account['addresses']>[number]['schedules'][number];
+	type Scope = NonNullable<Account['addresses']>[number]['scopes'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	// Use account from page server load (full data with schedules, scopes, contacts)
+	let account = $derived(data.account);
+
+	// Get active schedule (no endDate means active)
+	function getActiveSchedule(schedules: Schedule[]): Schedule | null {
+		if (schedules.length === 0) return null;
+		return schedules.find((s) => !s.endDate) ?? null;
+	}
+
+	// Get active scope (isActive = true)
+	function getActiveScope(scopes: Scope[]): Scope | null {
+		if (scopes.length === 0) return null;
+		return scopes.find((s) => s.isActive) ?? null;
+	}
+</script>
+
+<svelte:head>
+	<title>{account?.name ?? 'Account'} - Team - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		{#if !account}
+			<div class="empty-state p-12">
+				<svg class="empty-state-icon" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">Account Not Found</h2>
+				<p class="empty-state-text">
+					The account you're looking for doesn't exist or you don't have access to it.
+				</p>
+				<a href="/team/accounts" class="mt-4 btn-primary">Back to Accounts</a>
+			</div>
+		{:else}
+			<TeamPageHeader title={account.name} colorScheme="primary" backHref="/team/accounts" />
+
+			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+				<!-- Main Content: Locations (2 columns on desktop) -->
+				<div class="lg:col-span-2">
+					<div class="card-padded">
+						<h2 class="mb-4 section-title">
+							{#if account.addresses && account.addresses.length === 1}
+								{account.addresses[0].name || 'Primary Service Address'}
+							{:else}
+								Locations
+							{/if}
+						</h2>
+
+						{#if account.addresses && account.addresses.length > 0}
+							<div class="space-y-4">
+								{#each account.addresses as location (location.id)}
+									{@const activeSchedule = getActiveSchedule(location.schedules)}
+									{@const activeScope = getActiveScope(location.scopes)}
+									{@const locationName = location.name || 'Primary Service Address'}
+									<details class="group card-interactive border-2 bg-subtle p-4">
+										<summary class="expandable-header items-start gap-3">
+											<span class="flex-1 text-left">
+												<span class="mb-1 flex items-center gap-2">
+													<span class="text-base font-bold text-theme">{locationName}</span>
+													{#if location.isPrimary && account.addresses.length > 1}
+														<span class="badge-primary py-1">Primary</span>
+													{/if}
+												</span>
+												<span class="block text-sm text-theme-secondary">
+													{location.streetAddress}, {location.city}, {location.state}
+													{location.zipCode}
+												</span>
+											</span>
+											<svg
+												class="expandable-chevron text-theme-secondary"
+												style="fill: none"
+												stroke="currentColor"
+												stroke-width="2.5"
+												viewBox="0 0 24 24"
+											>
+												<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+											</svg>
+										</summary>
+
+										{#if location.notes}
+											<p
+												class="mt-3 border-t border-theme pt-3 text-sm text-theme-secondary italic"
+											>
+												{location.notes}
+											</p>
+										{/if}
+
+										<!-- Schedule -->
+										{#if activeSchedule}
+											<div class="mt-4 border-t border-theme pt-4">
+												<h4 class="mb-3 text-sm font-semibold text-theme">Schedule</h4>
+												<div class="rounded-lg bg-subtle p-3 text-sm">
+													<div class="mb-2 flex items-start justify-between">
+														<h5 class="font-semibold text-theme">
+															{activeSchedule.name || 'Schedule'}
+														</h5>
+														{#if activeSchedule.scheduleException}
+															<span class="badge-warning">{activeSchedule.scheduleException}</span>
+														{/if}
+													</div>
+													<div class="flex flex-wrap gap-1">
+														{#if activeSchedule.sundayService}
+															<span class="schedule-day">Sun</span>
+														{/if}
+														{#if activeSchedule.mondayService}
+															<span class="schedule-day">Mon</span>
+														{/if}
+														{#if activeSchedule.tuesdayService}
+															<span class="schedule-day">Tue</span>
+														{/if}
+														{#if activeSchedule.wednesdayService}
+															<span class="schedule-day">Wed</span>
+														{/if}
+														{#if activeSchedule.thursdayService}
+															<span class="schedule-day">Thu</span>
+														{/if}
+														{#if activeSchedule.fridayService}
+															<span class="schedule-day">Fri</span>
+														{/if}
+														{#if activeSchedule.saturdayService}
+															<span class="schedule-day">Sat</span>
+														{/if}
+														{#if activeSchedule.weekendService}
+															<span class="schedule-day-weekend">Weekend</span>
+														{/if}
+													</div>
+												</div>
+											</div>
+										{:else if location.schedules.length > 0}
+											<div class="mt-4 border-t border-theme pt-4">
+												<h4 class="mb-2 text-sm font-semibold text-theme">Schedule</h4>
+												<p class="text-sm text-theme-muted">
+													{location.schedules.length} schedule{location.schedules.length === 1
+														? ''
+														: 's'} (none active)
+												</p>
+											</div>
+										{/if}
+
+										<!-- Scope -->
+										{#if activeScope}
+											<details class="group/scope mt-4 border-t-2 border-accent-500/20 pt-4">
+												<summary
+													class="expandable-header text-sm font-bold text-accent-600 hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300"
+												>
+													<span>Scope</span>
+													<svg
+														class="h-5 w-5 transition-transform group-open/scope:rotate-180"
+														style="fill: none"
+														stroke="currentColor"
+														stroke-width="2.5"
+														viewBox="0 0 24 24"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M19 9l-7 7-7-7"
+														/>
+													</svg>
+												</summary>
+
+												<div class="mt-4">
+													<div class="scope-container">
+														<h5 class="mb-1 scope-title">{activeScope.name}</h5>
+														{#if activeScope.description}
+															<p class="mb-4 text-xs text-theme-secondary">
+																{activeScope.description}
+															</p>
+														{/if}
+
+														{#if activeScope.areas && activeScope.areas.length > 0}
+															<div class="mt-4 space-y-3">
+																{#each activeScope.areas.toSorted((a, b) => a.order - b.order) as area (area.id)}
+																	<details class="group/area area-container">
+																		<summary
+																			class="expandable-header items-start gap-2 area-title hover:text-primary-700 dark:hover:text-primary-300"
+																		>
+																			<span class="flex-1 text-left">{area.name}</span>
+																			<svg
+																				class="h-4 w-4 flex-shrink-0 transition-transform group-open/area:rotate-180"
+																				style="fill: none"
+																				stroke="currentColor"
+																				stroke-width="2.5"
+																				viewBox="0 0 24 24"
+																			>
+																				<path
+																					stroke-linecap="round"
+																					stroke-linejoin="round"
+																					d="M19 9l-7 7-7-7"
+																				/>
+																			</svg>
+																		</summary>
+
+																		{#if area.tasks && area.tasks.length > 0}
+																			<div class="mt-3 ml-1 space-y-2">
+																				{#each area.tasks.toSorted((a, b) => a.order - b.order) as task (task.id)}
+																					<div class="task-container">
+																						<p class="mb-1 text-xs leading-relaxed text-theme">
+																							{task.checklistDescription || task.description}
+																						</p>
+																						{#if task.frequency}
+																							<p class="mt-2 text-[10px] text-theme-secondary">
+																								<span class="font-semibold text-primary-500"
+																									>Frequency:</span
+																								>
+																								{task.frequency.toLowerCase()}
+																							</p>
+																						{/if}
+																					</div>
+																				{/each}
+																			</div>
+																		{/if}
+																	</details>
+																{/each}
+															</div>
+														{/if}
+													</div>
+												</div>
+											</details>
+										{:else if location.scopes.length > 0}
+											<div class="mt-4 border-t border-theme pt-4">
+												<h4 class="mb-2 text-sm font-semibold text-theme">Scope of Work</h4>
+												<p class="text-sm text-theme-muted">
+													{location.scopes.length} scope{location.scopes.length === 1 ? '' : 's'} (none
+													active)
+												</p>
+											</div>
+										{/if}
+									</details>
+								{/each}
+							</div>
+						{:else}
+							<p class="text-sm text-theme-secondary">No locations found.</p>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Sidebar: Contacts (1 column on desktop, stacks on mobile) -->
+				<div class="lg:col-span-1">
+					<div class="card-padded lg:sticky lg:top-6">
+						<h2 class="mb-4 section-title-accent">Contacts</h2>
+
+						{#if account.contacts && account.contacts.length > 0}
+							<div class="space-y-4">
+								{#each account.contacts.filter((c) => c.isActive) as contact, i (contact.id)}
+									<div
+										class={i < account.contacts.filter((c) => c.isActive).length - 1
+											? 'list-divider'
+											: ''}
+									>
+										<p class="contact-name">
+											{contact.fullName}
+											{#if contact.isPrimary}
+												<span class="ml-2 badge-primary">Primary</span>
+											{/if}
+										</p>
+										{#if contact.email}
+											<a href="mailto:{contact.email}" class="contact-email">
+												{contact.email}
+											</a>
+										{/if}
+										{#if contact.notes}
+											<p class="mt-2 text-sm text-theme-muted italic">{contact.notes}</p>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						{:else}
+							<p class="text-sm text-theme-secondary">No contacts found.</p>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/profile/+page.svelte b/src/routes/team/profile/+page.svelte
new file mode 100644
index 0000000..673e8b2
--- /dev/null
+++ b/src/routes/team/profile/+page.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import { auth } from '$lib/stores/auth.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// GraphQL user data from layout
+	let user = $derived(data.user?.data?.me);
+	let isTeamMember = $derived(user?.__typename === 'TeamProfileType');
+	let userRole = $derived(
+		isTeamMember && user?.__typename === 'TeamProfileType' ? user.role : null
+	);
+
+	// Kratos session data
+	let kratosIdentity = $derived(auth.session?.identity);
+	let kratosTraits = $derived(kratosIdentity?.traits);
+
+	const roleLabels: Record<string, string> = {
+		ADMIN: 'Admin',
+		TEAM_LEADER: 'Team Leader',
+		TEAM_MEMBER: 'Team Member'
+	};
+
+	const roleBadgeStyles: Record<string, string> = {
+		ADMIN: 'bg-error-100 text-error-700 dark:bg-error-900 dark:text-error-300',
+		TEAM_LEADER: 'bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-300',
+		TEAM_MEMBER: 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
+	};
+</script>
+
+<svelte:head>
+	<title>My Profile - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader title="My Profile" subtitle="View and manage your profile information." />
+
+		<div class="space-y-6">
+			<!-- Nexus Account Section (from Kratos) -->
+			<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+				<div
+					class="border-b border-theme bg-gradient-to-r from-accent-500/10 to-secondary-500/10 p-6"
+				>
+					<div class="flex items-center gap-3">
+						<svg
+							class="h-6 w-6 text-accent-600 dark:text-accent-400"
+							style="fill: none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+							/>
+						</svg>
+						<div>
+							<h2 class="text-lg font-semibold text-theme">Nexus Account</h2>
+							<p class="text-sm text-theme-muted">Your authentication and identity information</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="p-6">
+					{#if kratosTraits}
+						<dl class="space-y-4">
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">First Name</dt>
+								<dd class="text-sm text-theme">{kratosTraits.name?.first ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Last Name</dt>
+								<dd class="text-sm text-theme">{kratosTraits.name?.last ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
+								<dd class="text-sm text-theme">{kratosTraits.email ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
+								<dd class="text-sm text-theme">{kratosTraits.phone ?? 'Not set'}</dd>
+							</div>
+						</dl>
+					{:else}
+						<p class="text-sm text-theme-muted">Loading account information...</p>
+					{/if}
+				</div>
+
+				<div class="border-t border-theme bg-black/[0.02] p-6 dark:bg-white/[0.02]">
+					<a
+						href="https://account.example.com/"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600"
+					>
+						<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+						Manage Nexus Account
+						<svg class="h-3 w-3" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+							/>
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			<!-- Profile Information Section (from GraphQL/GetMe) -->
+			{#if user}
+				<div class="overflow-hidden rounded-xl border border-theme bg-theme-card">
+					<div
+						class="border-b border-theme bg-gradient-to-r from-primary-500/10 to-accent-500/10 p-6"
+					>
+						<div class="flex items-center gap-4">
+							<!-- Avatar -->
+							<div
+								class="flex h-16 w-16 items-center justify-center rounded-full bg-primary-500 text-xl font-bold text-white"
+							>
+								{user.fullName?.charAt(0).toUpperCase() ?? '?'}
+							</div>
+							<div>
+								<div class="flex items-center gap-3">
+									<h2 class="text-lg font-semibold text-theme">Profile Information</h2>
+									{#if userRole}
+										<span
+											class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide uppercase {roleBadgeStyles[
+												userRole
+											] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'}"
+										>
+											{roleLabels[userRole] ?? userRole}
+										</span>
+									{/if}
+								</div>
+								<p class="text-sm text-theme-muted">Your team profile data</p>
+							</div>
+						</div>
+					</div>
+
+					<div class="p-6">
+						<dl class="space-y-4">
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Full Name</dt>
+								<dd class="text-sm text-theme">{user.fullName ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Email</dt>
+								<dd class="text-sm text-theme">{user.email ?? 'Not set'}</dd>
+							</div>
+							<div class="flex flex-col sm:flex-row sm:gap-4">
+								<dt class="text-sm font-medium text-theme-secondary sm:w-32">Phone</dt>
+								<dd class="text-sm text-theme">{user.phone ?? 'Not set'}</dd>
+							</div>
+							{#if userRole}
+								<div class="flex flex-col sm:flex-row sm:gap-4">
+									<dt class="text-sm font-medium text-theme-secondary sm:w-32">Role</dt>
+									<dd class="text-sm text-theme">{roleLabels[userRole] ?? userRole}</dd>
+								</div>
+							{/if}
+						</dl>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/projects/+page.svelte b/src/routes/team/projects/+page.svelte
new file mode 100644
index 0000000..a58de39
--- /dev/null
+++ b/src/routes/team/projects/+page.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+	import WorkListLayout from '$lib/components/team/WorkListLayout.svelte';
+	import { page } from '$app/state';
+	import type { PageData } from './$types';
+	import type { TeamDashboard$result } from '$houdini';
+	import { formatAddress, type AccountAddressInfo, type CustomerInfo } from '$lib/utils/lookup';
+
+	type Project = TeamDashboard$result['teamDashboard']['projects'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	// Use pre-built lookups from root layout
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+
+	// Count non-admin team members
+	function countNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): number {
+		if (!teamMembers) return 0;
+		return teamMembers.filter((m) => nonAdminTeamIds.has(m.pk)).length;
+	}
+
+	// Get current status from URL, default to 'scheduled'
+	let currentStatus = $derived(page.url.searchParams.get('status') || 'scheduled');
+
+	// Extract data from each status - now flat arrays
+	let scheduled = $derived(data.projects.scheduled ?? []);
+	let inProgress = $derived(data.projects.inProgress ?? []);
+	let completed = $derived(data.projects.completed ?? []);
+
+	// Calculate counts for tabs
+	let counts = $derived({
+		scheduled: scheduled.length,
+		inProgress: inProgress.length,
+		completed: completed.length
+	});
+
+	// Select current data based on status
+	let currentData = $derived(
+		currentStatus === 'scheduled'
+			? scheduled
+			: currentStatus === 'in_progress'
+				? inProgress
+				: completed
+	);
+
+	// Format date for display
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get status badge class
+	function getStatusClass(status: string): string {
+		switch (status) {
+			case 'SCHEDULED':
+				return 'badge-primary';
+			case 'IN_PROGRESS':
+				return 'badge-accent';
+			case 'COMPLETED':
+				return 'badge-secondary';
+			default:
+				return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+	}
+
+	// Get project display info: account name, customer name, and address
+	function getProjectDisplayInfo(project: Project): {
+		accountInfo: AccountAddressInfo | null;
+		customerInfo: CustomerInfo | null;
+		address: string | null;
+	} {
+		// If project has accountAddressId, it's affiliated with an account
+		if (project.accountAddressId) {
+			const accountInfo = accountLookup.get(project.accountAddressId) ?? null;
+			return {
+				accountInfo,
+				customerInfo: null,
+				address: accountInfo ? formatAddress(accountInfo) : null
+			};
+		}
+
+		// Otherwise, use direct address fields on project and match customer
+		const customerInfo = project.customerId
+			? (customerLookup.get(project.customerId) ?? null)
+			: null;
+		const address = formatAddress({
+			streetAddress: project.streetAddress,
+			city: project.city,
+			state: project.state,
+			zipCode: project.zipCode
+		});
+
+		return { accountInfo: null, customerInfo, address };
+	}
+</script>
+
+<WorkListLayout
+	title="Projects"
+	subtitle="Your one-time cleaning assignments. Start a session to log completed tasks, photos, and notes."
+	items={currentData}
+	{currentStatus}
+	currentMonth={data.filters.month}
+	{counts}
+	emptyTitle="No Projects"
+	emptyText="No projects found for this month and status."
+	colorScheme="accent"
+>
+	{#snippet emptyIcon()}
+		<svg
+			class="empty-state-icon text-accent-400"
+			style="fill: none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.5"
+				d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+			/>
+		</svg>
+	{/snippet}
+
+	{#snippet item(project: Project)}
+		{@const displayInfo = getProjectDisplayInfo(project)}
+		{@const teamCount = countNonAdminTeamMembers(project.teamMembers)}
+		<a href="/team/projects/{project.id}" class="block">
+			<div class="card-project">
+				<div class="flex items-start justify-between gap-4">
+					<div class="min-w-0 flex-1 space-y-1">
+						<!-- Row 1: Date + Status badges -->
+						<div class="flex flex-wrap items-center gap-2">
+							<span
+								class="rounded-full border border-theme bg-theme-secondary px-3 py-1 text-xs font-medium text-theme"
+							>
+								{formatDate(project.date)}
+							</span>
+							<span
+								class="rounded-full px-3 py-1 text-xs font-medium {getStatusClass(project.status)}"
+							>
+								{project.status.replace('_', ' ')}
+							</span>
+						</div>
+						<!-- Row 2: Account/Customer Name -->
+						{#if displayInfo.accountInfo}
+							<p class="text-base font-semibold text-primary-500">
+								{displayInfo.accountInfo.accountName}
+							</p>
+						{:else if displayInfo.customerInfo}
+							<p class="text-base font-semibold text-primary-500">
+								{displayInfo.customerInfo.customerName}
+							</p>
+						{:else}
+							<p class="text-base font-semibold text-theme-muted italic">
+								No account/customer linked
+							</p>
+						{/if}
+						<!-- Row 3: Project Name -->
+						<p class="text-sm text-theme-secondary">{project.name}</p>
+						<!-- Row 4: Address -->
+						{#if displayInfo.address}
+							<p class="text-sm text-theme-muted">{displayInfo.address}</p>
+						{/if}
+						<!-- Row 5: Team Members -->
+						<p class="text-sm text-theme-muted">
+							{teamCount} team member{teamCount !== 1 ? 's' : ''} assigned
+						</p>
+						<!-- Row 6: Notes -->
+						{#if project.notes}
+							<p class="line-clamp-2 text-sm text-theme-muted italic">{project.notes}</p>
+						{/if}
+					</div>
+					<svg
+						class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+						style="fill: none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+					</svg>
+				</div>
+			</div>
+		</a>
+	{/snippet}
+</WorkListLayout>
diff --git a/src/routes/team/projects/[project]/+page.server.ts b/src/routes/team/projects/[project]/+page.server.ts
new file mode 100644
index 0000000..b072ef0
--- /dev/null
+++ b/src/routes/team/projects/[project]/+page.server.ts
@@ -0,0 +1,99 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import {
+	GetProjectStore,
+	ProjectSessionByProjectStore,
+	ProjectScopeStore,
+	ProjectSessionPhotosStore,
+	ProjectSessionVideosStore
+} from '$houdini';
+import { fromGlobalId, toGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, parent, locals } = event;
+	const data = await parent();
+	const projectId = params.project;
+
+	// Fetch params for Houdini stores
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Search through all status categories to find the project in parent data
+	const allProjects = [
+		...(data.projects.scheduled ?? []),
+		...(data.projects.inProgress ?? []),
+		...(data.projects.completed ?? [])
+	];
+
+	const foundProject = allProjects.find((p) => p.id === projectId);
+
+	// If not found in parent data, fetch directly
+	let project;
+	if (foundProject) {
+		project = foundProject;
+	} else {
+		const projectStore = new GetProjectStore();
+		const projectData = await projectStore.fetch({ ...fetchParams, variables: { id: projectId } });
+		project = projectData.data?.project;
+
+		if (!project) {
+			throw error(404, 'Project not found');
+		}
+	}
+
+	// Get the project UUID from the global ID for querying
+	const projectUuid = fromGlobalId(projectId);
+
+	// Fetch session data if project is in progress or completed
+	let session = null;
+	if (project.status === 'IN_PROGRESS' || project.status === 'COMPLETED') {
+		const sessionStore = new ProjectSessionByProjectStore();
+		const sessionData = await sessionStore.fetch({
+			...fetchParams,
+			variables: { projectId: projectUuid }
+		});
+		session = sessionData?.data?.projectSessions?.[0] ?? null;
+
+		// Fetch photos and videos separately to handle missing file errors gracefully
+		if (session) {
+			const sessionUuid = fromGlobalId(session.id);
+			const [photosResult, videosResult] = await Promise.all([
+				new ProjectSessionPhotosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session photos:', err);
+						return { data: { projectSessionImages: [] } };
+					}),
+				new ProjectSessionVideosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session videos:', err);
+						return { data: { projectSessionVideos: [] } };
+					})
+			]);
+
+			// Merge photos and videos into session object
+			session = {
+				...session,
+				photos: photosResult?.data?.projectSessionImages ?? [],
+				videos: videosResult?.data?.projectSessionVideos ?? []
+			};
+		}
+	}
+
+	// Fetch scope data if project has a scopeId
+	// Note: project.scopeId is a UUID, but projectScope query expects a Relay Global ID
+	let scopeData = null;
+	if (project.scopeId) {
+		const scopeStore = new ProjectScopeStore();
+		const scopeGlobalId = toGlobalId('ProjectScopeType', project.scopeId);
+		scopeData = await scopeStore.fetch({ ...fetchParams, variables: { id: scopeGlobalId } });
+	}
+
+	return {
+		project,
+		projectId,
+		projectUuid,
+		session,
+		scope: scopeData?.data?.projectScope ?? null
+	};
+};
diff --git a/src/routes/team/projects/[project]/+page.svelte b/src/routes/team/projects/[project]/+page.svelte
new file mode 100644
index 0000000..5c36f4e
--- /dev/null
+++ b/src/routes/team/projects/[project]/+page.svelte
@@ -0,0 +1,442 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import { EntityDetailsCard } from '$lib/components/entity';
+	import {
+		SessionSectionHeader,
+		SessionContent,
+		StartSessionButton,
+		type ExtendedProjectTask,
+		type ProjectAreaWithCompletions,
+		type ProjectAreaWithTasks
+	} from '$lib/components/session';
+	import {
+		openProjectSession,
+		closeProjectSession,
+		revertProjectSession,
+		addProjectTask,
+		removeProjectTask,
+		createProjectNote,
+		updateProjectNote,
+		removeProjectNote,
+		uploadProjectPhoto,
+		updateProjectPhoto,
+		removeProjectPhoto,
+		uploadProjectVideo,
+		updateProjectVideo,
+		removeProjectVideo
+	} from '$lib/utils/session';
+	import type { PageData } from './$types';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	let { data }: { data: PageData } = $props();
+
+	// Core data
+	let project = $derived(data.project);
+	let session = $derived(data.session);
+	let scope = $derived(data.scope);
+	let projectUuid = $derived(data.projectUuid); // UUID for session and task mutations
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+	let teamMemberLookup = $derived(data.teamMemberLookup);
+
+	// Current user for note authorship
+	let currentUserProfileId = $derived(data.user?.data?.me?.id ?? null);
+
+	// Check if current user is assigned to this project
+	let isAssignedToProject = $derived(() => {
+		if (!currentUserProfileId || !project.teamMembers) return false;
+		const currentUserUuid = fromGlobalId(currentUserProfileId);
+		return project.teamMembers.some((m) => m.pk === currentUserUuid);
+	});
+
+	// Role-based permissions - must be admin/team leader AND assigned to the project
+	let canRevertSession = $derived(() => {
+		const me = data.user?.data?.me;
+		if (me?.__typename === 'TeamProfileType') {
+			const hasRole = me.role === 'ADMIN' || me.role === 'TEAM_LEADER';
+			return hasRole && isAssignedToProject();
+		}
+		return false;
+	});
+
+	// Account or customer info
+	let accountInfo = $derived(
+		project.accountAddressId ? (accountLookup.get(project.accountAddressId) ?? null) : null
+	);
+	let customerInfo = $derived(
+		project.customerId ? (customerLookup.get(project.customerId) ?? null) : null
+	);
+
+	// Display name (account or customer)
+	let displayName = $derived(
+		accountInfo?.accountName ?? customerInfo?.customerName ?? 'Project Details'
+	);
+
+	// Address - from account or direct project fields
+	let address = $derived(() => {
+		if (accountInfo) {
+			return formatAddress(accountInfo);
+		}
+		return formatAddress({
+			streetAddress: project.streetAddress,
+			city: project.city,
+			state: project.state,
+			zipCode: project.zipCode
+		});
+	});
+
+	// Team members (non-admin only)
+	let teamMembers = $derived(() => {
+		if (!project.teamMembers) return [];
+		return project.teamMembers
+			.filter((m) => nonAdminTeamIds.has(m.pk))
+			.map((m) => teamMemberLookup.get(m.pk))
+			.filter((m): m is NonNullable<typeof m> => m !== undefined);
+	});
+
+	// Loading states
+	let isStartingSession = $state(false);
+	let isSubmitting = $state(false);
+	let isReverting = $state(false);
+	let submittingTaskId = $state<string | null>(null);
+	let removingTaskId = $state<string | null>(null);
+
+	// Build extended tasks from scope (projects use projectAreas and projectTasks)
+	let tasks = $derived<ExtendedProjectTask[]>(
+		scope?.projectAreas?.flatMap(
+			(area) =>
+				area.projectTasks?.map((task) => ({
+					...task,
+					uuid: fromGlobalId(task.id),
+					areaId: area.id,
+					areaName: area.name
+				})) || []
+		) || []
+	);
+
+	// Task tracking
+	let completedTaskIds = $derived(
+		new SvelteSet(session?.completedTasks?.map((ct) => ct.taskId) || [])
+	);
+	let selectedTaskIds = new SvelteSet<string>();
+	let availableTasksCount = $derived(
+		tasks.filter((t) => !completedTaskIds.has(t.uuid) && !selectedTaskIds.has(t.uuid)).length
+	);
+
+	// Group completed tasks by area
+	let completedTasksByArea = $derived.by((): ProjectAreaWithCompletions[] => {
+		if (!session?.completedTasks || !scope?.projectAreas) return [];
+		const areaMap = new SvelteMap<string, ProjectAreaWithCompletions>();
+		scope.projectAreas.forEach((area) => {
+			const areaTasks = session.completedTasks.filter((completion) => {
+				const task = tasks.find((t) => t.uuid === completion.taskId);
+				return task && task.areaId === area.id;
+			});
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, completions: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Group ready to submit tasks by area
+	let readyToSubmitByArea = $derived.by((): ProjectAreaWithTasks[] => {
+		if (!scope?.projectAreas) return [];
+		const areaMap = new SvelteMap<string, ProjectAreaWithTasks>();
+		scope.projectAreas.forEach((area) => {
+			const areaTasks = tasks.filter((t) => t.areaId === area.id && selectedTaskIds.has(t.uuid));
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, tasks: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Helper function to get team member name by ID
+	function getTeamMemberName(completedById: string | null | undefined): string {
+		if (!completedById) return 'Unknown';
+		const member = teamMemberLookup.get(completedById);
+		return member?.fullName || 'Unknown';
+	}
+
+	// Session handlers
+	async function handleStartSession() {
+		isStartingSession = true;
+		try {
+			await openProjectSession({ projectId: projectUuid });
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to start session:', err);
+		} finally {
+			isStartingSession = false;
+		}
+	}
+
+	async function handleCloseSession() {
+		if (!session) return;
+		isSubmitting = true;
+		try {
+			if (selectedTaskIds.size > 0) {
+				const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+					addProjectTask(projectUuid, taskUuid)
+				);
+				await Promise.all(promises);
+				selectedTaskIds.clear();
+			}
+			await closeProjectSession({ projectId: projectUuid });
+			await goto('/team/projects', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to close session:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	async function handleRevertSession() {
+		if (
+			!confirm(
+				'Are you sure you want to cancel this session? All completed tasks, photos, videos, and notes will be deleted.'
+			)
+		) {
+			return;
+		}
+		isReverting = true;
+		try {
+			await revertProjectSession(projectUuid);
+			await goto('/team/projects', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to revert session:', err);
+		} finally {
+			isReverting = false;
+		}
+	}
+
+	// Task handlers
+	function toggleTask(taskUuid: string) {
+		if (selectedTaskIds.has(taskUuid)) {
+			selectedTaskIds.delete(taskUuid);
+		} else {
+			selectedTaskIds.add(taskUuid);
+		}
+	}
+
+	async function handleSubmitTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			submittingTaskId = taskUuid;
+			await addProjectTask(projectUuid, taskUuid);
+			selectedTaskIds.delete(taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit task:', err);
+		} finally {
+			submittingTaskId = null;
+		}
+	}
+
+	function handleRemoveTask(taskUuid: string) {
+		selectedTaskIds.delete(taskUuid);
+	}
+
+	async function handleRemoveCompletedTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			removingTaskId = taskUuid;
+			await removeProjectTask(projectUuid, taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove completed task:', err);
+		} finally {
+			removingTaskId = null;
+		}
+	}
+
+	async function handleSubmitAllTasks() {
+		if (!session || selectedTaskIds.size === 0) return;
+		try {
+			isSubmitting = true;
+			const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+				addProjectTask(projectUuid, taskUuid)
+			);
+			await Promise.all(promises);
+			selectedTaskIds.clear();
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit all tasks:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	// Note handlers
+	async function handleAddNote(content: string, internal: boolean) {
+		if (!session) return;
+		await createProjectNote({
+			sessionId: session.id,
+			content,
+			internal,
+			authorId: currentUserProfileId
+		});
+		await invalidateAll();
+	}
+
+	async function handleUpdateNote(noteId: string, content: string, internal: boolean) {
+		await updateProjectNote({ id: noteId, content, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeleteNote(noteId: string) {
+		await removeProjectNote(noteId);
+		await invalidateAll();
+	}
+
+	// Media handlers
+	async function handleUploadPhoto(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadProjectPhoto(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUploadVideo(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadProjectVideo(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUpdatePhoto(
+		photoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateProjectPhoto({ id: photoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleUpdateVideo(
+		videoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateProjectVideo({ id: videoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeletePhoto(photoId: string) {
+		await removeProjectPhoto(photoId);
+		await invalidateAll();
+	}
+
+	async function handleDeleteVideo(videoId: string) {
+		await removeProjectVideo(videoId);
+		await invalidateAll();
+	}
+</script>
+
+<svelte:head>
+	<title>{displayName} - Projects - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader
+			title={displayName}
+			subtitle={project.name}
+			colorScheme="accent"
+			backHref="/team/projects"
+			invalidateOnBack={true}
+		/>
+
+		<EntityDetailsCard
+			entityType="project"
+			entityId={project.id}
+			status={project.status}
+			date={project.date}
+			address={address()}
+			teamMembers={teamMembers()}
+			notes={project.notes}
+			projectName={project.name}
+			{accountInfo}
+			{customerInfo}
+		/>
+
+		{#if project.status === 'IN_PROGRESS' && session}
+			<section>
+				<SessionSectionHeader isActive={true} sessionType="project" />
+				<SessionContent
+					sessionType="project"
+					isActive={true}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					scopeDescription={scope?.description}
+					addressInfo={address()}
+					teamMembers={teamMembers()}
+					areas={scope?.projectAreas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{isSubmitting}
+					{isReverting}
+					{submittingTaskId}
+					{removingTaskId}
+					{getTeamMemberName}
+					onClose={handleCloseSession}
+					onRevert={canRevertSession() ? handleRevertSession : undefined}
+					onToggleTask={toggleTask}
+					onSubmitTask={handleSubmitTask}
+					onRemoveTask={handleRemoveTask}
+					onRemoveCompletedTask={handleRemoveCompletedTask}
+					onSubmitAllTasks={handleSubmitAllTasks}
+					onClearSelection={() => selectedTaskIds.clear()}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdatePhoto={handleUpdatePhoto}
+					onUpdateVideo={handleUpdateVideo}
+					onDeletePhoto={handleDeletePhoto}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if project.status === 'COMPLETED' && session}
+			<section>
+				<SessionSectionHeader isActive={false} sessionType="project" />
+				<SessionContent
+					sessionType="project"
+					isActive={false}
+					{session}
+					entityName={displayName}
+					scopeName={scope?.name}
+					addressInfo={address()}
+					teamMembers={teamMembers()}
+					areas={scope?.projectAreas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{getTeamMemberName}
+				/>
+			</section>
+		{:else if project.status === 'SCHEDULED'}
+			<StartSessionButton
+				isLoading={isStartingSession}
+				backLabel="Back to Projects"
+				onStart={handleStartSession}
+				onBack={() => goto('/team/projects', { invalidateAll: true })}
+			/>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/reports/+page.svelte b/src/routes/team/reports/+page.svelte
new file mode 100644
index 0000000..bded7b3
--- /dev/null
+++ b/src/routes/team/reports/+page.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	// Extract reports from data - now flat arrays from layout
+	let reports = $derived(data.reports ?? []);
+
+	// Sort reports by date descending (most recent first)
+	let sortedReports = $derived([...reports].sort((a, b) => b.date.localeCompare(a.date)));
+
+	// Format date for display (YYYY-MM format to readable)
+	function formatReportDate(dateStr: string): string {
+		const [year, month] = dateStr.split('-').map(Number);
+		const date = new Date(year, month - 1, 1);
+		return date.toLocaleDateString('en-US', {
+			month: 'long',
+			year: 'numeric'
+		});
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+</script>
+
+<svelte:head>
+	<title>Reports - Team - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader
+			title="Reports"
+			subtitle="Monthly summaries of your completed work. Reports appear here after an admin or team leader has reviewed and finalized them."
+			colorScheme="accent2"
+		/>
+
+		{#if sortedReports.length === 0}
+			<div class="empty-state">
+				<svg
+					class="empty-state-icon text-accent2-400"
+					style="fill: none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+					/>
+				</svg>
+				<h2 class="empty-state-title">No Reports Yet</h2>
+				<p class="empty-state-text">
+					Your monthly labor reports will appear here once you have completed work logged in the
+					system.
+				</p>
+			</div>
+		{:else}
+			<div class="space-y-4">
+				{#each sortedReports as report (report.id)}
+					<a href="/team/reports/{report.id}" class="block">
+						<div class="card-report">
+							<div class="flex items-start justify-between gap-4">
+								<div class="min-w-0 flex-1 space-y-3">
+									<!-- Report Month -->
+									<h3 class="text-lg font-semibold text-accent2-600 dark:text-accent2-400">
+										{formatReportDate(report.date)}
+									</h3>
+
+									<!-- Labor Breakdown -->
+									<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+										<!-- Services Labor -->
+										<div class="rounded-lg bg-secondary-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-secondary-600 uppercase dark:text-secondary-400"
+											>
+												Services
+											</p>
+											<p class="mt-1 text-lg font-bold text-secondary-700 dark:text-secondary-300">
+												{formatCurrency(report.servicesLaborTotal)}
+											</p>
+										</div>
+
+										<!-- Projects Labor -->
+										<div class="rounded-lg bg-accent-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-accent-600 uppercase dark:text-accent-400"
+											>
+												Projects
+											</p>
+											<p class="mt-1 text-lg font-bold text-accent-700 dark:text-accent-300">
+												{formatCurrency(report.projectsLaborTotal)}
+											</p>
+										</div>
+
+										<!-- Total Labor -->
+										<div class="rounded-lg bg-accent2-500/10 p-3">
+											<p
+												class="text-xs font-medium tracking-wide text-accent2-600 uppercase dark:text-accent2-400"
+											>
+												Total
+											</p>
+											<p class="mt-1 text-lg font-bold text-accent2-700 dark:text-accent2-300">
+												{formatCurrency(report.totalLaborValue)}
+											</p>
+										</div>
+									</div>
+								</div>
+
+								<!-- Chevron -->
+								<svg
+									class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+									style="fill: none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+								</svg>
+							</div>
+						</div>
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/reports/[report]/+page.server.ts b/src/routes/team/reports/[report]/+page.server.ts
new file mode 100644
index 0000000..bd40b37
--- /dev/null
+++ b/src/routes/team/reports/[report]/+page.server.ts
@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit';
+import { GetTeamReportStore } from '$houdini';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, locals, parent } = event;
+	const reportId = params.report;
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Get the lookups from parent layout data
+	const parentData = await parent();
+
+	// Fetch report details
+	const reportResult = await new GetTeamReportStore().fetch({
+		...fetchParams,
+		variables: { id: reportId }
+	});
+
+	const report = reportResult.data?.report;
+	if (!report) {
+		throw error(404, 'Report not found');
+	}
+
+	return {
+		report,
+		accountLookup: parentData.accountLookup,
+		customerLookup: parentData.customerLookup
+	};
+};
diff --git a/src/routes/team/reports/[report]/+page.svelte b/src/routes/team/reports/[report]/+page.svelte
new file mode 100644
index 0000000..575b7de
--- /dev/null
+++ b/src/routes/team/reports/[report]/+page.svelte
@@ -0,0 +1,322 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	let report = $derived(data.report);
+	let accountLookup = $derived(data.accountLookup);
+	let customerLookup = $derived(data.customerLookup);
+
+	// Create lookup maps for labor breakdown by service/project ID
+	let serviceLaborMap = $derived(
+		new Map(
+			(report.laborBreakdown?.services ?? []).map((s) => [
+				s.serviceId,
+				{
+					totalLaborRate: s.totalLaborRate as string | number,
+					teamMemberCount: s.teamMemberCount,
+					laborShare: s.laborShare as string | number
+				}
+			])
+		)
+	);
+
+	let projectLaborMap = $derived(
+		new Map(
+			(report.laborBreakdown?.projects ?? []).map((p) => [
+				p.projectId,
+				{
+					totalLaborAmount: p.totalLaborAmount as string | number,
+					teamMemberCount: p.teamMemberCount,
+					laborShare: p.laborShare as string | number
+				}
+			])
+		)
+	);
+
+	// Format date for display (Month Year)
+	function formatReportDate(dateStr: string): string {
+		const [year, month] = dateStr.split('-').map(Number);
+		const date = new Date(year, month - 1, 1);
+		return date.toLocaleDateString('en-US', {
+			month: 'long',
+			year: 'numeric'
+		});
+	}
+
+	// Format item date (short)
+	function formatItemDate(dateStr: string): string {
+		return new Date(dateStr + 'T00:00:00').toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get service display name: "Date, Account Name"
+	function getServiceDisplayName(service: {
+		date: string;
+		accountAddressId: string | null;
+	}): string {
+		const dateStr = formatItemDate(service.date);
+		const addressInfo = service.accountAddressId
+			? accountLookup.get(service.accountAddressId)
+			: null;
+		const accountName = addressInfo?.accountName ?? 'Unknown Account';
+		return `${dateStr}, ${accountName}`;
+	}
+
+	// Get project display name: "Date, Account/Customer - Project Name"
+	function getProjectDisplayName(project: {
+		date: string;
+		name: string;
+		accountAddressId: string | null;
+		customerId: string | null;
+	}): string {
+		const dateStr = formatItemDate(project.date);
+
+		let entityName = 'Unknown';
+		if (project.accountAddressId) {
+			const addressInfo = accountLookup.get(project.accountAddressId);
+			if (addressInfo) {
+				entityName = addressInfo.accountName;
+			}
+		} else if (project.customerId) {
+			const customerInfo = customerLookup.get(project.customerId);
+			if (customerInfo) {
+				entityName = customerInfo.customerName;
+			}
+		}
+
+		return `${dateStr}, ${entityName} - ${project.name}`;
+	}
+
+	// Format currency
+	function formatCurrency(value: string | number | null | undefined): string {
+		if (value === null || value === undefined) return '$0.00';
+		const num = typeof value === 'string' ? parseFloat(value) : value;
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD'
+		}).format(num);
+	}
+
+	let reportTitle = $derived(formatReportDate(report.date));
+</script>
+
+<svelte:head>
+	<title>{reportTitle} Report - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader
+			title={reportTitle}
+			subtitle="Monthly labor summary and payment breakdown."
+			colorScheme="accent2"
+			backHref="/team/reports"
+		/>
+
+		<!-- Labor Summary Card -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Labor Summary</h3>
+
+			<div class="space-y-4">
+				<!-- Services Labor -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-500/20">
+							<svg
+								class="h-5 w-5 text-secondary-600 dark:text-secondary-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+								/>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Services</p>
+							<p class="text-sm text-theme-muted">
+								{report.services.length} service{report.services.length !== 1 ? 's' : ''}
+							</p>
+						</div>
+					</div>
+					<p class="text-lg font-bold text-secondary-600 dark:text-secondary-400">
+						{formatCurrency(report.servicesLaborTotal)}
+					</p>
+				</div>
+
+				<!-- Projects Labor -->
+				<div class="flex items-center justify-between border-b border-theme py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent-500/20">
+							<svg
+								class="h-5 w-5 text-accent-600 dark:text-accent-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Projects</p>
+							<p class="text-sm text-theme-muted">
+								{report.projects.length} project{report.projects.length !== 1 ? 's' : ''}
+							</p>
+						</div>
+					</div>
+					<p class="text-lg font-bold text-accent-600 dark:text-accent-400">
+						{formatCurrency(report.projectsLaborTotal)}
+					</p>
+				</div>
+
+				<!-- Total -->
+				<div class="flex items-center justify-between py-3">
+					<div class="flex items-center gap-3">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-accent2-500/20">
+							<svg
+								class="h-5 w-5 text-accent2-600 dark:text-accent2-400"
+								style="fill: none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-medium text-theme">Total Labor</p>
+							<p class="text-sm text-theme-muted">Combined earnings for the month</p>
+						</div>
+					</div>
+					<p class="text-xl font-bold text-accent2-600 dark:text-accent2-400">
+						{formatCurrency(report.totalLaborValue)}
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Services Section -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Services</h3>
+
+			{#if report.services.length === 0}
+				<p class="text-sm text-theme-muted italic">No services in this report.</p>
+			{:else}
+				<div class="space-y-2">
+					{#each report.services as service (service.id)}
+						{@const labor = serviceLaborMap.get(service.id)}
+						<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+							<div class="flex items-start justify-between gap-2">
+								<div class="min-w-0 flex-1">
+									<p class="text-sm font-medium text-theme">{getServiceDisplayName(service)}</p>
+									{#if labor}
+										<div
+											class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-theme-muted"
+										>
+											<span>Total: {formatCurrency(labor.totalLaborRate)}</span>
+											<span>Team: {labor.teamMemberCount}</span>
+											<span class="font-semibold text-secondary-600 dark:text-secondary-400">
+												Share: {formatCurrency(labor.laborShare)}
+											</span>
+										</div>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Projects Section -->
+		<div class="mb-6 card-padded">
+			<h3 class="mb-4 text-sm font-medium text-theme-muted">Projects</h3>
+
+			{#if report.projects.length === 0}
+				<p class="text-sm text-theme-muted italic">No projects in this report.</p>
+			{:else}
+				<div class="space-y-2">
+					{#each report.projects as project (project.id)}
+						{@const labor = projectLaborMap.get(project.id)}
+						<div class="rounded-lg border border-theme bg-theme-secondary p-3">
+							<div class="flex items-start justify-between gap-2">
+								<div class="min-w-0 flex-1">
+									<p class="text-sm font-medium text-theme">{getProjectDisplayName(project)}</p>
+									{#if labor}
+										<div
+											class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-theme-muted"
+										>
+											<span>Total: {formatCurrency(labor.totalLaborAmount)}</span>
+											<span>Team: {labor.teamMemberCount}</span>
+											<span class="font-semibold text-accent-600 dark:text-accent-400">
+												Share: {formatCurrency(labor.laborShare)}
+											</span>
+										</div>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Labor Breakdown Details -->
+		{#if report.laborBreakdown && (report.laborBreakdown.services.length > 0 || report.laborBreakdown.projects.length > 0)}
+			<div class="mb-6 card-padded">
+				<h3 class="mb-4 text-sm font-medium text-theme-muted">Labor Breakdown</h3>
+
+				<!-- Totals Summary -->
+				<div class="rounded-lg bg-accent2-500/10 p-4">
+					<div class="space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="text-theme-secondary">Services Total:</span>
+							<span class="font-semibold text-theme"
+								>{formatCurrency(report.laborBreakdown.servicesTotal)}</span
+							>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="text-theme-secondary">Projects Total:</span>
+							<span class="font-semibold text-theme"
+								>{formatCurrency(report.laborBreakdown.projectsTotal)}</span
+							>
+						</div>
+						<div class="flex items-center justify-between border-t border-accent2-500/20 pt-2">
+							<span class="font-semibold text-accent2-600 dark:text-accent2-400">Grand Total:</span>
+							<span class="text-lg font-bold text-accent2-600 dark:text-accent2-400"
+								>{formatCurrency(report.laborBreakdown.grandTotal)}</span
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Back Button -->
+		<a href="/team/reports" class="btn-ghost block w-full text-center"> Back to Reports </a>
+	</ContentContainer>
+</div>
diff --git a/src/routes/team/services/+page.svelte b/src/routes/team/services/+page.svelte
new file mode 100644
index 0000000..37bd18f
--- /dev/null
+++ b/src/routes/team/services/+page.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import WorkListLayout from '$lib/components/team/WorkListLayout.svelte';
+	import { page } from '$app/state';
+	import type { PageData } from './$types';
+	import type { TeamDashboard$result } from '$houdini';
+	import { formatAddress } from '$lib/utils/lookup';
+
+	type Service = TeamDashboard$result['teamDashboard']['services'][number];
+
+	let { data }: { data: PageData } = $props();
+
+	// Use pre-built lookups from root layout
+	let accountLookup = $derived(data.accountLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+
+	// Count non-admin team members
+	function countNonAdminTeamMembers(teamMembers: { pk: string }[] | null | undefined): number {
+		if (!teamMembers) return 0;
+		return teamMembers.filter((m) => nonAdminTeamIds.has(m.pk)).length;
+	}
+
+	// Get current status from URL, default to 'scheduled'
+	let currentStatus = $derived(page.url.searchParams.get('status') || 'scheduled');
+
+	// Extract data from each status - now flat arrays
+	let scheduled = $derived(data.services.scheduled ?? []);
+	let inProgress = $derived(data.services.inProgress ?? []);
+	let completed = $derived(data.services.completed ?? []);
+
+	// Calculate counts for tabs
+	let counts = $derived({
+		scheduled: scheduled.length,
+		inProgress: inProgress.length,
+		completed: completed.length
+	});
+
+	// Select current data based on status
+	let currentData = $derived(
+		currentStatus === 'scheduled'
+			? scheduled
+			: currentStatus === 'in_progress'
+				? inProgress
+				: completed
+	);
+
+	// Format date for display
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr + 'T00:00:00');
+		return date.toLocaleDateString('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+
+	// Get status badge class
+	function getStatusClass(status: string): string {
+		switch (status) {
+			case 'SCHEDULED':
+				return 'badge-primary';
+			case 'IN_PROGRESS':
+				return 'badge-accent';
+			case 'COMPLETED':
+				return 'badge-secondary';
+			default:
+				return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200';
+		}
+	}
+
+	// Get account info for a service
+	function getAccountInfo(accountAddressId: string | null | undefined) {
+		if (!accountAddressId) return null;
+		return accountLookup.get(accountAddressId) ?? null;
+	}
+</script>
+
+<WorkListLayout
+	title="Services"
+	subtitle="Your recurring cleaning assignments. Start a session to log completed tasks, photos, and notes for each visit."
+	items={currentData}
+	{currentStatus}
+	currentMonth={data.filters.month}
+	{counts}
+	emptyTitle="No Services"
+	emptyText="No services found for this month and status."
+	colorScheme="secondary"
+>
+	{#snippet emptyIcon()}
+		<svg
+			class="empty-state-icon text-secondary-400"
+			style="fill: none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.5"
+				d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+			/>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.5"
+				d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+			/>
+		</svg>
+	{/snippet}
+
+	{#snippet item(service: Service)}
+		{@const accountInfo = getAccountInfo(service.accountAddressId)}
+		{@const address = accountInfo ? formatAddress(accountInfo) : null}
+		{@const teamCount = countNonAdminTeamMembers(service.teamMembers)}
+		<a href="/team/services/{service.id}" class="block">
+			<div class="card-service">
+				<div class="flex items-start justify-between gap-4">
+					<div class="min-w-0 flex-1 space-y-1">
+						<!-- Row 1: Date + Status badges -->
+						<div class="flex flex-wrap items-center gap-2">
+							<span
+								class="rounded-full border border-theme bg-theme-secondary px-3 py-1 text-xs font-medium text-theme"
+							>
+								{formatDate(service.date)}
+							</span>
+							<span
+								class="rounded-full px-3 py-1 text-xs font-medium {getStatusClass(service.status)}"
+							>
+								{service.status.replace('_', ' ')}
+							</span>
+						</div>
+						<!-- Row 2: Account Name -->
+						{#if accountInfo}
+							<p class="text-base font-semibold text-primary-500">{accountInfo.accountName}</p>
+						{:else}
+							<p class="text-base font-semibold text-theme-muted italic">No account linked</p>
+						{/if}
+						<!-- Row 3: Address Name -->
+						{#if accountInfo}
+							<p class="text-sm text-theme-secondary">{accountInfo.addressName}</p>
+						{/if}
+						<!-- Row 4: Address -->
+						{#if address}
+							<p class="text-sm text-theme-muted">{address}</p>
+						{/if}
+						<!-- Row 5: Team Members -->
+						<p class="text-sm text-theme-muted">
+							{teamCount} team member{teamCount !== 1 ? 's' : ''} assigned
+						</p>
+						<!-- Row 6: Notes -->
+						{#if service.notes}
+							<p class="line-clamp-2 text-sm text-theme-muted italic">{service.notes}</p>
+						{/if}
+					</div>
+					<svg
+						class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
+						style="fill: none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+					</svg>
+				</div>
+			</div>
+		</a>
+	{/snippet}
+</WorkListLayout>
diff --git a/src/routes/team/services/[service]/+page.server.ts b/src/routes/team/services/[service]/+page.server.ts
new file mode 100644
index 0000000..0201346
--- /dev/null
+++ b/src/routes/team/services/[service]/+page.server.ts
@@ -0,0 +1,99 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import {
+	GetServiceStore,
+	ServiceSessionByServiceStore,
+	ScopeByAddressStore,
+	ServiceSessionPhotosStore,
+	ServiceSessionVideosStore
+} from '$houdini';
+import { fromGlobalId } from '$lib/utils/relay';
+
+export const load: PageServerLoad = async (event) => {
+	const { params, parent, locals } = event;
+	const data = await parent();
+	const serviceId = params.service;
+
+	// Fetch params for Houdini stores
+	const fetchParams = { event, metadata: { cookie: locals.cookie } };
+
+	// Search through all status categories to find the service in parent data
+	const allServices = [
+		...(data.services.scheduled ?? []),
+		...(data.services.inProgress ?? []),
+		...(data.services.completed ?? [])
+	];
+
+	const foundService = allServices.find((s) => s.id === serviceId);
+
+	// If not found in parent data, fetch directly
+	let service;
+	if (foundService) {
+		service = foundService;
+	} else {
+		const serviceStore = new GetServiceStore();
+		const serviceData = await serviceStore.fetch({ ...fetchParams, variables: { id: serviceId } });
+		service = serviceData.data?.service;
+
+		if (!service) {
+			throw error(404, 'Service not found');
+		}
+	}
+
+	// Get the service UUID from the global ID for querying
+	const serviceUuid = fromGlobalId(serviceId);
+
+	// Fetch session data if service is in progress or completed
+	let session = null;
+	if (service.status === 'IN_PROGRESS' || service.status === 'COMPLETED') {
+		const sessionStore = new ServiceSessionByServiceStore();
+		const sessionData = await sessionStore.fetch({
+			...fetchParams,
+			variables: { serviceId: serviceUuid }
+		});
+		session = sessionData?.data?.serviceSessions?.[0] ?? null;
+
+		// Fetch photos and videos separately to handle missing file errors gracefully
+		if (session) {
+			const sessionUuid = fromGlobalId(session.id);
+			const [photosResult, videosResult] = await Promise.all([
+				new ServiceSessionPhotosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session photos:', err);
+						return { data: { serviceSessionImages: [] } };
+					}),
+				new ServiceSessionVideosStore()
+					.fetch({ ...fetchParams, variables: { sessionId: sessionUuid } })
+					.catch((err) => {
+						console.error('Failed to fetch session videos:', err);
+						return { data: { serviceSessionVideos: [] } };
+					})
+			]);
+
+			// Merge photos and videos into session object
+			session = {
+				...session,
+				photos: photosResult?.data?.serviceSessionImages ?? [],
+				videos: videosResult?.data?.serviceSessionVideos ?? []
+			};
+		}
+	}
+
+	// Fetch scope data if service has an accountAddressId
+	let scopeData = null;
+	if (service.accountAddressId) {
+		const scopeStore = new ScopeByAddressStore();
+		scopeData = await scopeStore.fetch({
+			...fetchParams,
+			variables: { accountAddressId: service.accountAddressId }
+		});
+	}
+
+	return {
+		service,
+		serviceUuid,
+		session,
+		scope: scopeData?.data?.scopes?.[0] ?? null
+	};
+};
diff --git a/src/routes/team/services/[service]/+page.svelte b/src/routes/team/services/[service]/+page.svelte
new file mode 100644
index 0000000..38e4d80
--- /dev/null
+++ b/src/routes/team/services/[service]/+page.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
+	import { EntityDetailsCard } from '$lib/components/entity';
+	import {
+		SessionSectionHeader,
+		SessionContent,
+		StartSessionButton,
+		type ExtendedServiceTask,
+		type ServiceAreaWithCompletions,
+		type ServiceAreaWithTasks
+	} from '$lib/components/session';
+	import {
+		openServiceSession,
+		closeServiceSession,
+		revertServiceSession,
+		addServiceTask,
+		removeServiceTask,
+		createServiceNote,
+		updateServiceNote,
+		removeServiceNote,
+		uploadServicePhoto,
+		updateServicePhoto,
+		removeServicePhoto,
+		uploadServiceVideo,
+		updateServiceVideo,
+		removeServiceVideo
+	} from '$lib/utils/session';
+	import type { PageData } from './$types';
+	import { formatAddress } from '$lib/utils/lookup';
+	import { fromGlobalId } from '$lib/utils/relay';
+	import { goto, invalidateAll } from '$app/navigation';
+	import { SvelteSet, SvelteMap } from 'svelte/reactivity';
+
+	let { data }: { data: PageData } = $props();
+
+	// Core data
+	let service = $derived(data.service);
+	let session = $derived(data.session);
+	let scope = $derived(data.scope);
+	let serviceUuid = $derived(data.serviceUuid);
+	let accountLookup = $derived(data.accountLookup);
+	let nonAdminTeamIds = $derived(data.nonAdminTeamIds);
+	let teamMemberLookup = $derived(data.teamMemberLookup);
+
+	// Current user for note authorship
+	let currentUserProfileId = $derived(data.user?.data?.me?.id ?? null);
+
+	// Check if current user is assigned to this service
+	let isAssignedToService = $derived(() => {
+		if (!currentUserProfileId || !service.teamMembers) return false;
+		const currentUserUuid = fromGlobalId(currentUserProfileId);
+		return service.teamMembers.some((m) => m.pk === currentUserUuid);
+	});
+
+	// Role-based permissions - must be admin/team leader AND assigned to the service
+	let canRevertSession = $derived(() => {
+		const me = data.user?.data?.me;
+		if (me?.__typename === 'TeamProfileType') {
+			const hasRole = me.role === 'ADMIN' || me.role === 'TEAM_LEADER';
+			return hasRole && isAssignedToService();
+		}
+		return false;
+	});
+
+	// Account info
+	let accountInfo = $derived(
+		service.accountAddressId ? (accountLookup.get(service.accountAddressId) ?? null) : null
+	);
+	let address = $derived(accountInfo ? formatAddress(accountInfo) : null);
+
+	// Team members (non-admin only)
+	let teamMembers = $derived(() => {
+		if (!service.teamMembers) return [];
+		return service.teamMembers
+			.filter((m) => nonAdminTeamIds.has(m.pk))
+			.map((m) => teamMemberLookup.get(m.pk))
+			.filter((m): m is NonNullable<typeof m> => m !== undefined);
+	});
+
+	// Loading states
+	let isStartingSession = $state(false);
+	let isSubmitting = $state(false);
+	let isReverting = $state(false);
+	let submittingTaskId = $state<string | null>(null);
+	let removingTaskId = $state<string | null>(null);
+
+	// Build extended tasks from scope
+	let tasks = $derived<ExtendedServiceTask[]>(
+		scope?.areas?.flatMap(
+			(area) =>
+				area.tasks?.map((task) => ({
+					...task,
+					uuid: fromGlobalId(task.id),
+					areaId: area.id,
+					areaName: area.name
+				})) || []
+		) || []
+	);
+
+	// Task tracking
+	let completedTaskIds = $derived(
+		new SvelteSet(session?.completedTasks?.map((ct) => ct.taskId) || [])
+	);
+	let selectedTaskIds = new SvelteSet<string>();
+	let availableTasksCount = $derived(
+		tasks.filter((t) => !completedTaskIds.has(t.uuid) && !selectedTaskIds.has(t.uuid)).length
+	);
+
+	// Group completed tasks by area
+	let completedTasksByArea = $derived.by((): ServiceAreaWithCompletions[] => {
+		if (!session?.completedTasks || !scope?.areas) return [];
+		const areaMap = new SvelteMap<string, ServiceAreaWithCompletions>();
+		scope.areas.forEach((area) => {
+			const areaTasks = session.completedTasks.filter((completion) => {
+				const task = tasks.find((t) => t.uuid === completion.taskId);
+				return task && task.areaId === area.id;
+			});
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, completions: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Group ready to submit tasks by area
+	let readyToSubmitByArea = $derived.by((): ServiceAreaWithTasks[] => {
+		if (!scope?.areas) return [];
+		const areaMap = new SvelteMap<string, ServiceAreaWithTasks>();
+		scope.areas.forEach((area) => {
+			const areaTasks = tasks.filter((t) => t.areaId === area.id && selectedTaskIds.has(t.uuid));
+			if (areaTasks.length > 0) {
+				areaMap.set(area.id, { area, tasks: areaTasks });
+			}
+		});
+		return Array.from(areaMap.values());
+	});
+
+	// Helper function to get team member name by ID
+	function getTeamMemberName(completedById: string | null | undefined): string {
+		if (!completedById) return 'Unknown';
+		const member = teamMemberLookup.get(completedById);
+		return member?.fullName || 'Unknown';
+	}
+
+	// Session handlers
+	async function handleStartSession() {
+		isStartingSession = true;
+		try {
+			await openServiceSession({ serviceId: serviceUuid });
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to start session:', err);
+		} finally {
+			isStartingSession = false;
+		}
+	}
+
+	async function handleCloseSession() {
+		if (!session) return;
+		isSubmitting = true;
+		try {
+			if (selectedTaskIds.size > 0) {
+				const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+					addServiceTask(serviceUuid, taskUuid)
+				);
+				await Promise.all(promises);
+				selectedTaskIds.clear();
+			}
+			await closeServiceSession({ serviceId: serviceUuid, taskIds: [] });
+			await goto('/team/services', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to close session:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	async function handleRevertSession() {
+		if (
+			!confirm(
+				'Are you sure you want to cancel this session? All completed tasks, photos, videos, and notes will be deleted.'
+			)
+		) {
+			return;
+		}
+		isReverting = true;
+		try {
+			await revertServiceSession(serviceUuid);
+			await goto('/team/services', { invalidateAll: true });
+		} catch (err) {
+			console.error('Failed to revert session:', err);
+		} finally {
+			isReverting = false;
+		}
+	}
+
+	// Task handlers
+	function toggleTask(taskUuid: string) {
+		if (selectedTaskIds.has(taskUuid)) {
+			selectedTaskIds.delete(taskUuid);
+		} else {
+			selectedTaskIds.add(taskUuid);
+		}
+	}
+
+	async function handleSubmitTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			submittingTaskId = taskUuid;
+			await addServiceTask(serviceUuid, taskUuid);
+			selectedTaskIds.delete(taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit task:', err);
+		} finally {
+			submittingTaskId = null;
+		}
+	}
+
+	function handleRemoveTask(taskUuid: string) {
+		selectedTaskIds.delete(taskUuid);
+	}
+
+	async function handleRemoveCompletedTask(taskUuid: string) {
+		if (!session) return;
+		try {
+			removingTaskId = taskUuid;
+			await removeServiceTask(serviceUuid, taskUuid);
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to remove completed task:', err);
+		} finally {
+			removingTaskId = null;
+		}
+	}
+
+	async function handleSubmitAllTasks() {
+		if (!session || selectedTaskIds.size === 0) return;
+		try {
+			isSubmitting = true;
+			const promises = Array.from(selectedTaskIds).map((taskUuid) =>
+				addServiceTask(serviceUuid, taskUuid)
+			);
+			await Promise.all(promises);
+			selectedTaskIds.clear();
+			await invalidateAll();
+		} catch (err) {
+			console.error('Failed to submit all tasks:', err);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	// Note handlers
+	async function handleAddNote(content: string, internal: boolean) {
+		if (!session) return;
+		await createServiceNote({
+			sessionId: session.id,
+			content,
+			internal,
+			authorId: currentUserProfileId
+		});
+		await invalidateAll();
+	}
+
+	async function handleUpdateNote(noteId: string, content: string, internal: boolean) {
+		await updateServiceNote({ id: noteId, content, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeleteNote(noteId: string) {
+		await removeServiceNote(noteId);
+		await invalidateAll();
+	}
+
+	// Media handlers
+	async function handleUploadPhoto(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadServicePhoto(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUploadVideo(file: File, title: string, notes: string, internal: boolean) {
+		if (!session) return;
+		await uploadServiceVideo(file, session.id, title, notes, internal);
+		await invalidateAll();
+	}
+
+	async function handleUpdatePhoto(
+		photoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateServicePhoto({ id: photoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleUpdateVideo(
+		videoId: string,
+		title: string,
+		notes: string,
+		internal: boolean
+	) {
+		await updateServiceVideo({ id: videoId, title, notes, internal });
+		await invalidateAll();
+	}
+
+	async function handleDeletePhoto(photoId: string) {
+		await removeServicePhoto(photoId);
+		await invalidateAll();
+	}
+
+	async function handleDeleteVideo(videoId: string) {
+		await removeServiceVideo(videoId);
+		await invalidateAll();
+	}
+</script>
+
+<svelte:head>
+	<title>{accountInfo?.accountName ?? 'Service'} - Services - Nexus</title>
+</svelte:head>
+
+<div class="py-8">
+	<ContentContainer>
+		<TeamPageHeader
+			title={accountInfo?.accountName ?? 'Service Details'}
+			subtitle={accountInfo?.addressName ?? 'View service information and log your work.'}
+			colorScheme="secondary"
+			backHref="/team/services"
+			invalidateOnBack={true}
+		/>
+
+		<EntityDetailsCard
+			entityType="service"
+			entityId={service.id}
+			status={service.status}
+			date={service.date}
+			{address}
+			teamMembers={teamMembers()}
+			notes={service.notes}
+			{accountInfo}
+		/>
+
+		{#if service.status === 'IN_PROGRESS' && session}
+			<section>
+				<SessionSectionHeader isActive={true} sessionType="service" />
+				<SessionContent
+					sessionType="service"
+					isActive={true}
+					{session}
+					entityName={accountInfo?.accountName ?? 'Service'}
+					scopeName={scope?.name}
+					scopeDescription={scope?.description}
+					addressInfo={address}
+					teamMembers={teamMembers()}
+					areas={scope?.areas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{isSubmitting}
+					{isReverting}
+					{submittingTaskId}
+					{removingTaskId}
+					{getTeamMemberName}
+					onClose={handleCloseSession}
+					onRevert={canRevertSession() ? handleRevertSession : undefined}
+					onToggleTask={toggleTask}
+					onSubmitTask={handleSubmitTask}
+					onRemoveTask={handleRemoveTask}
+					onRemoveCompletedTask={handleRemoveCompletedTask}
+					onSubmitAllTasks={handleSubmitAllTasks}
+					onClearSelection={() => selectedTaskIds.clear()}
+					onAddNote={handleAddNote}
+					onUpdateNote={handleUpdateNote}
+					onDeleteNote={handleDeleteNote}
+					onUploadPhoto={handleUploadPhoto}
+					onUploadVideo={handleUploadVideo}
+					onUpdatePhoto={handleUpdatePhoto}
+					onUpdateVideo={handleUpdateVideo}
+					onDeletePhoto={handleDeletePhoto}
+					onDeleteVideo={handleDeleteVideo}
+				/>
+			</section>
+		{:else if service.status === 'COMPLETED' && session}
+			<section>
+				<SessionSectionHeader isActive={false} sessionType="service" />
+				<SessionContent
+					sessionType="service"
+					isActive={false}
+					{session}
+					entityName={accountInfo?.accountName ?? 'Service'}
+					scopeName={scope?.name}
+					addressInfo={address}
+					teamMembers={teamMembers()}
+					areas={scope?.areas || []}
+					{tasks}
+					{selectedTaskIds}
+					{completedTaskIds}
+					{completedTasksByArea}
+					{readyToSubmitByArea}
+					{availableTasksCount}
+					{getTeamMemberName}
+				/>
+			</section>
+		{:else if service.status === 'SCHEDULED'}
+			<StartSessionButton
+				isLoading={isStartingSession}
+				backLabel="Back to Services"
+				onStart={handleStartSession}
+				onBack={() => goto('/team/services', { invalidateAll: true })}
+			/>
+		{/if}
+	</ContentContainer>
+</div>
diff --git a/src/routes/terms/+page.svelte b/src/routes/terms/+page.svelte
new file mode 100644
index 0000000..234dca8
--- /dev/null
+++ b/src/routes/terms/+page.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
+	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
+</script>
+
+<svelte:head>
+	<title>Terms of Use - Nexus</title>
+	<meta
+		name="description"
+		content="Terms of Use for Nexus Cleaning Solutions services and web application."
+	/>
+</svelte:head>
+
+<!-- Hero Section -->
+<section class="py-20 md:py-28">
+	<ContentContainer>
+		<PublicBackLink class="mb-6" />
+		<div class="max-w-3xl">
+			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Terms of Use</h1>
+			<p class="mt-6 text-lg text-theme-secondary">Last updated: December 2024</p>
+		</div>
+	</ContentContainer>
+</section>
+
+<!-- Content Section -->
+<section class="pb-20">
+	<ContentContainer>
+		<div class="prose prose-lg max-w-3xl dark:prose-invert">
+			<h2 class="text-2xl font-bold text-theme">Welcome</h2>
+			<p class="text-theme-secondary">
+				These Terms of Use govern your use of Nexus, the business management platform operated by
+				Nexus Cleaning Solutions. By using Nexus, you agree to these terms. If you don't agree,
+				please don't use the platform.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Who We Are</h2>
+			<p class="text-theme-secondary">
+				Nexus Cleaning Solutions is a commercial cleaning company based in Macomb County,
+				Michigan. We provide janitorial services, floor care, and specialty cleaning for businesses
+				throughout Southeast Michigan.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Using Nexus</h2>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">Accounts</h3>
+			<p class="text-theme-secondary">To access Nexus, you need an account. When you create one:</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>Provide accurate information</li>
+				<li>Keep your login credentials secure</li>
+				<li>Let us know right away if you suspect unauthorized access</li>
+				<li>You're responsible for all activity under your account</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">What You Can Do</h3>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>View your service schedules and history</li>
+				<li>Access and download invoices</li>
+				<li>Communicate with our team</li>
+				<li>Manage your account information</li>
+				<li>Upload photos or documents related to your services</li>
+			</ul>
+
+			<h3 class="mt-6 text-xl font-semibold text-theme">What You Shouldn't Do</h3>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>Share your account with others</li>
+				<li>Try to access accounts or data that isn't yours</li>
+				<li>Use the Service for anything illegal</li>
+				<li>Attempt to disrupt or interfere with the Service</li>
+				<li>Upload malicious files or content</li>
+			</ul>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Your Content</h2>
+			<p class="text-theme-secondary">
+				When you upload photos, documents, or other content to Nexus:
+			</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>You keep ownership of your content</li>
+				<li>
+					You give us permission to use it as needed to provide our services (for example, sharing
+					photos with our team to document completed work)
+				</li>
+				<li>
+					Make sure you have the right to share anything you upload (don't upload content that
+					belongs to someone else without permission)
+				</li>
+			</ul>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Platform Ownership</h2>
+			<p class="text-theme-secondary">
+				The Nexus platform—including its design, software, code, and user interface—is owned by
+				Corellon Digital and licensed to Nexus Cleaning Solutions for business operations.
+				Nexus branding, service content, and customer data are owned by Nexus Cleaning
+				Solutions. You can use the platform to interact with our services, but you can't copy,
+				modify, or distribute any part of it without permission.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Platform Availability</h2>
+			<p class="text-theme-secondary">
+				We do our best to keep Nexus running smoothly, but we can't promise it will be available
+				100% of the time. Sometimes we need to perform maintenance or updates. We're not responsible
+				for any issues if the platform is temporarily unavailable.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Cleaning Services</h2>
+			<p class="text-theme-secondary">
+				Nexus helps you manage your relationship with us, but the actual cleaning services are
+				governed by your service agreement with Nexus Cleaning Solutions. If there's ever a
+				conflict between these Terms and your service agreement, the service agreement wins.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Limitation of Liability</h2>
+			<p class="text-theme-secondary">
+				Nexus is provided "as is." While we work hard to keep things running well, we can't
+				guarantee everything will be perfect. To the extent allowed by law, we're not liable for:
+			</p>
+			<ul class="list-disc space-y-2 pl-6 text-theme-secondary">
+				<li>Lost data or content</li>
+				<li>Service interruptions</li>
+				<li>Indirect or consequential damages</li>
+				<li>Issues caused by third-party services we integrate with</li>
+			</ul>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Changes to These Terms</h2>
+			<p class="text-theme-secondary">
+				We may update these Terms from time to time. If we make significant changes, we'll let you
+				know through Nexus or by email. Continuing to use the platform after changes take effect
+				means you accept the updated Terms.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Termination</h2>
+			<p class="text-theme-secondary">
+				You can stop using Nexus at any time. We can also suspend or terminate your access if you
+				violate these Terms or if we need to for legal or security reasons. If your account is
+				terminated, you may lose access to your data in Nexus.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Governing Law</h2>
+			<p class="text-theme-secondary">
+				These Terms are governed by the laws of the State of Michigan. Any disputes will be resolved
+				in the courts of Macomb County, Michigan.
+			</p>
+
+			<h2 class="mt-10 text-2xl font-bold text-theme">Contact Us</h2>
+			<p class="text-theme-secondary">Have questions about these Terms? Get in touch:</p>
+			<ul class="list-none space-y-2 pl-0 text-theme-secondary">
+				<li>
+					<strong>Email:</strong>
+					<a
+						href="mailto:service@nexusclean.net"
+						class="text-primary-600 hover:underline dark:text-primary-400"
+					>
+						service@nexusclean.net
+					</a>
+				</li>
+				<li>
+					<strong>Phone:</strong>
+					<a href="tel:+15864058925" class="text-primary-600 hover:underline dark:text-primary-400">
+						(586) 405-8925
+					</a>
+				</li>
+			</ul>
+		</div>
+	</ContentContainer>
+</section>
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..b6dd667
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..b113b00
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+	kit: {
+		adapter: adapter(),
+
+		alias: {
+			$houdini: '.houdini/'
+		}
+	}
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..887e784
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+		"rootDirs": [".", "./.svelte-kit/types", "./.houdini/types"]
+	}
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..0c3061b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import houdini from 'houdini/vite';
+import devtoolsJson from 'vite-plugin-devtools-json';
+import tailwindcss from '@tailwindcss/vite';
+import mkcert from 'vite-plugin-mkcert';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	server: {
+		host: 'local.example.com'
+	},
+	plugins: [houdini(), tailwindcss(), sveltekit(), devtoolsJson(), mkcert()]
+});